asked on

How trigger Ajax control using MasterPage menu item

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

Bob Learned

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)?

EYoung

ASKER

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

Bob Learned

Are you using a SiteMap and a SiteMapProvider? Can you use a SiteMapPath for the breadcrumb?

EYoung

ASKER

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.

ASKER CERTIFIED SOLUTION

Bob Learned

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial