?
Solved

How trigger Ajax control using MasterPage menu item

Posted on 2011-03-09
5
Medium Priority
?
750 Views
Last Modified: 2012-05-11
I am new to ASP.net 4.0 and am developing a new intranet web site for our company.  I am trying to reduce the number of page reloads by using Ajax controls on the client side pages.

Currently the web site project utilizes MasterPages for the headers, footers, and menus that appear on each of the main web pages.

Here is the question:  the MasterPage menu has several menu choices.  Two of them are Home and Retail.  When the user clicks on the Home menu option, I want the word Home to appear on the page along with a home image.  Likewise when the user clicks the Retail menu option, I want the word Retail and the Retail image to appear without a full reload of the page.

Attached is the code for MasterPage.master followed by the code for Default.aspx

Thank you for the help.
======================================================================================
Here is the code for the MasterPage.master
======================================================================================

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>TTA Intranet</title>
</head>

<body bgcolor="#FFFDE2" style="font-family: 'Times New Roman', Times, serif">

    <form id="Form1" runat="server">   

        <div style="position:absolute; top:40px; left:30px; z-index: 1; visibility:visible; height: 103px; width: 107px;">
            <img alt="" src="Images/mexico_compass.gif""/>
        </div>
        <div style="position:absolute; top:39px; left:133px; z-index: 1; visibility:visible; height: 4px; width: 3px;">
            <img alt="" src='Images/The Territory Ahead with line.gif'"/>
        </div> 
        <div style="position:absolute; top:830px; left:10px; z-index: 1; visibility:visible; height: 20px; width: 200px;
            font-size:smaller">&copy; 2011 - The Territory Ahead
        </div>
        
        <div>
            <asp:ContentPlaceHolder id="Home" runat="server" />
            <asp:ContentPlaceHolder id="Retail" runat="server" />
        </div>
        
        <div style="position:absolute; top:200px; left:40px; z-index: 1; visibility:visible; height: 580px; width: 220px;
            font-size:large; color: Maroon">
            <asp:Menu ID="mnuHome" runat="server" MaximumDynamicDisplayLevels="1" 
                BackColor="#FFFDE2" ForeColor="Maroon" 
                DynamicEnableDefaultPopOutImage="False" Font-Size="Large" 
                Orientation="Vertical" Font-Bold="False" Height="32px" Width="170px" 
                DisappearAfter="100">
                <DynamicHoverStyle BackColor="#FFFDE2" Font-Bold="True" ForeColor="Maroon" 
                    Font-Size="Large" />
                <DynamicMenuItemStyle BackColor="#FFFDE2" Font-Bold="False" Font-Size="Large" 
                    ForeColor="Maroon" BorderColor="Maroon" BorderStyle="Dotted" 
                    BorderWidth="1px" />
                <DynamicMenuStyle BackColor="#FFFDE2" />
                <DynamicSelectedStyle BackColor="#FFFDE2" Font-Bold="True" Font-Size="Large" 
                    ForeColor="Maroon" />
                <Items>
                    <asp:MenuItem Text="Home" Value="Home" NavigateUrl="Default.aspx">
                        <asp:MenuItem Text="TTA Current Intranet" Value="TTA Current Intranet" NavigateUrl="http://ttareports/">
                            </asp:MenuItem>
                        <asp:MenuItem Text="TTA Forum" Value="TTA Forum" NavigateUrl="http://tta-ap1:411/">
                            </asp:MenuItem>
                        <asp:MenuItem Text="TTA Internet" Value="TTA Internet"
                            NavigateUrl="http://www.territoryahead.com/jump.jsp?itemID=0&amp;itemType=HOME_PAGE&amp;code=C12WBM&amp;ps=y&amp;cm_mmc=SEM-_-MSN-_-Brand-_-territory%20ahead" >
                            </asp:MenuItem>
                        <asp:MenuItem Text="TTA Retail Intranet" Value="TTA Retail Intranet"
                            NavigateUrl="http://ttareports:85/">
                            </asp:MenuItem>
                        <asp:MenuItem Text="Phone List" Value="Phone List"></asp:MenuItem>
                    </asp:MenuItem>
                    <asp:MenuItem Text="Marketing" Value="Marketing"></asp:MenuItem>
                    <asp:MenuItem Text="Finance" Value="Finance"></asp:MenuItem>
                    <asp:MenuItem Text="Inventory" Value="Inventory"></asp:MenuItem>
                    <asp:MenuItem Text="Merchandising" Value="Merchandising"></asp:MenuItem>
                    <asp:MenuItem Text="Retail" Value="Retail" 
                            NavigateUrl="Retail.aspx">
                        <asp:MenuItem Text="Monitor Store Sales" Value="Monitor Store Sales">
                        </asp:MenuItem>
                        <asp:MenuItem Text="Moz-Cam Reconciliation" Value="Moz-Cam Reconciliation">
                        </asp:MenuItem>
                        <asp:MenuItem Text="Reports" Value="Reports">
                        </asp:MenuItem>
                    </asp:MenuItem>
                    <asp:MenuItem Text="  H S N" Value="H S N"></asp:MenuItem>
                    <asp:MenuItem Text="  C S S" Value="C S S" NavigateUrl="http://ttareports:83/"></asp:MenuItem>
                    <asp:MenuItem Text="  C B I" Value="C B I" 
                        NavigateUrl="http://ccsg-sp3/sites/cornerstone/Default.aspx"></asp:MenuItem>
                </Items>
                <StaticHoverStyle BackColor="#FFFDE2" Font-Size="Large" ForeColor="Maroon" 
                    Font-Bold="True" />
                <StaticMenuItemStyle BackColor="#FFFDE2" Font-Bold="False" Font-Size="Large" 
                    ForeColor="Maroon" HorizontalPadding="10px" VerticalPadding="10px" />
                <StaticMenuStyle BackColor="#FFFDE2" />
                <StaticSelectedStyle Font-Bold="True" Font-Size="Large" ForeColor="Maroon" 
                    HorizontalPadding="7px" VerticalPadding="5px" BackColor="#FFFDE2" />
            </asp:Menu>
        </div>        
        
    </form>
</body>

</html>


======================================================================================
Here is the code for the Default.aspx
======================================================================================

<%@ Page Language="VB" MasterPageFile="MasterPage.master" CodeFile="Default.aspx.vb" Inherits="_Default" Debug="true" %>

<asp:Content ID="Home1" ContentPlaceHolderID="Home" Runat="Server">   

    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
        <ContentTemplate>
            <asp:Label ID="Label1" runat="server" Text = "" style="position:absolute; top:81px; left:833px; z-index: 1; visibility:visible; height: 20px; width: 290px;
                font-size:xx-large; color: Maroon" align="right"></asp:Label>
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </ContentTemplate>
        <Triggers>
              <asp:AsyncPostBackTrigger ControlID="mnuHome" />
        </Triggers>
    </asp:UpdatePanel> 

    <div style="position:absolute; top:130px; left:823px; z-index: 1; visibility:visible; height: 20px; width: 300px; text-align:right;">
        <p><%= mWelcomeMessage%></p>
    </div>

    <div style="position:absolute; top:210px; left:285px; z-index: 1; visibility:visible; height: 122px; width: 135px;">
        <img alt="" src="Images/Flagship_Store_30.jpg""/>
    </div>
    
</asp:Content>

Open in new window

0
Comment
Question by:EYoung
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 96

Expert Comment

by:Bob Learned
ID: 35100036
Are you saying that you want to change the appearance of the master page, to show which page you have navigated to (like a breadcrumb)?
0
 
LVL 7

Author Comment

by:EYoung
ID: 35100419
Yes.  I want the Default.aspx page to change when the user clicks on one of the 10 or so menu options.

In the previous code I displayed above, the <asp:Menu ID="mnuHome"... control only seems to have one "ID" attribute.  If that is true, then how can I tell the Content Triggers the sub menu options that the users may click on if the sub menu options do not have their own IDs?

Thanks
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 35100460
Are you using a SiteMap and a SiteMapProvider?  Can you use a SiteMapPath for the breadcrumb?  
0
 
LVL 7

Author Comment

by:EYoung
ID: 35100680
I am not using SiteMap or the SiteMapProvider.  I don't know what those are nor do I know what breadcrumb is.

I am using the Menu control out of the Navigation section of the ASP toolbox.
0
 
LVL 96

Accepted Solution

by:
Bob Learned earned 2000 total points
ID: 35102383
Site maps provide the data for site navigation, and with the .sitemap files, you can bind that to a navigation control (TreeView, Menu, etc.)  The SiteMapProvider provides a method for loading the site map.  The SiteMapPath shows a visual representation of where you are navigating (breadcrumbs).


Ease Web site navigation by implementing ASP.NET's SiteMapPath control
http://www.techrepublic.com/blog/programming-and-development/ease-web-site-navigation-by-implementing-aspnets-sitemappath-control/460

SiteMapPath output example:

     Home Page > Page One > Page Two
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today is the age of broadband.  More and more people are going this route determined to experience the web and it’s multitude of services as quickly and painlessly as possible. Coupled with the move to broadband, people are experiencing the web via …
Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
Add bar graphs to Access queries using Unicode block characters. Graphs appear on every record in the color you want. Give life to numbers. Hopes this gives you ideas on visualizing your data in new ways ~ Create a calculated field in a query: …
In this video, Percona Solutions Engineer Barrett Chambers discusses some of the basic syntax differences between MySQL and MongoDB. To learn more check out our webinar on MongoDB administration for MySQL DBA: https://www.percona.com/resources/we…
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question