Solved

How trigger Ajax control using MasterPage menu item

Posted on 2011-03-09
5
745 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
  • 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 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Microsoft Reports are based on a report definition, which is an XML file that describes data and layout for the report, with a different extension. You can create a client-side report definition language (*.rdlc) file with Visual Studio, and build g…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This Micro Tutorial hows how you can integrate  Mac OSX to a Windows Active Directory Domain. Apple has made it easy to allow users to bind their macs to a windows domain with relative ease. The following video show how to bind OSX Mavericks to …
Both in life and business – not all partnerships are created equal. As the demand for cloud services increases, so do the number of self-proclaimed cloud partners. Asking the right questions up front in the partnership, will enable both parties …

912 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now