Solved

How trigger Ajax control using MasterPage menu item

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

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

Suggested Solutions

It’s quite interesting for me as I worked with Excel using vb.net for some time. Here are some topics which I know want to share with others whom this might help. First of all if you are working with Excel then you need to Download the Following …
Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…
Exchange organizations may use the Journaling Agent of the Transport Service to archive messages going through Exchange. However, if the Transport Service is integrated with some email content management application (such as an antispam), the admini…

696 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