Solved

How trigger Ajax control using MasterPage menu item

Posted on 2011-03-09
5
744 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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
Creating an analog clock UserControl seems fairly straight forward.  It is, after all, essentially just a circle with several lines in it!  Two common approaches for rendering an analog clock typically involve either manually calculating points with…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're interested in additional methods for monitoring bandwidt…

743 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

14 Experts available now in Live!

Get 1:1 Help Now