Master pages

westannex · March 27th, 2009, 03:53 PM

I'm a complete beginner to ASP.NET so apologies if this question is very basic.

I set up a master page with header, footer and left sidebar. The latter has links to display different content pages. This works fine.

I want to change the appearance of the active link (ie. the one whose page is displayed) which I managed to do with a bit of javascript in the master page. The onload of the body tag in the master page calls the script and passes a parameter to say which page is active. I have this parm hard-coded because I cant figure out how to set the parm in each content page so it is picked up by the master.

Am I missing something obvious here, or am I going about this the wrong way.

Any help is appreciated.
Thanks.

philip_cole · March 27th, 2009, 06:34 PM

How is your sidebar set up - is it an ASP:menu, or hard-coded or something else?

JavaScript is OK for setting this, but if you are just doing something fairly basic like setting a css class on it, you really want to be doing it in the code before it is rendered as it is faster and less reliant on the browser to get it right. A simple way to do this is to get the page to pass a value to a method in your master page which says which menu item to highlight.

Here is an example using a hard-coded as it is easiest to get your head round. Note that I've not used a code-behind file and it's not exactly robust, for simplicity.

MyMaster.master

Code:

<%@ Master Language="VB" ClassName="MyMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    Public Sub SetCurrentMenu(ByVal name As String)
        ' get the hyperlink based on the name passed (note the menu IDs)
        Dim link As HyperLink = MyMenu.FindControl("menu_" & name)
        ' set the highlight class
        link.CssClass = "menu_current"
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
    .menu, .menu_current { text-decoration:none; width:200px; float:left; }
    .menu_current { font-weight:bold; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Panel runat="server" ID="MyMenu" style="clear:both;">
        <asp:Hyperlink runat="server" ID="menu_Home"
            NavigateUrl="/" CssClass="menu">Home</asp:Hyperlink>
        <asp:Hyperlink runat="server" ID="menu_About"
            NavigateUrl="About.aspx" CssClass="menu">About Us</asp:Hyperlink>
        <asp:Hyperlink runat="server" ID="menu_Contact"
            NavigateUrl="Contact.aspx" CssClass="menu">Contact Us</asp:Hyperlink>
    </asp:Panel>

    <div style="clear:both;">
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" ></asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

About.aspx

Code:

<%@ Page Language="VB" MasterPageFile="MyMaster.master" %>
<script runat="server">
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
         ' Get a reference to the master page, casting to the appropriate type
        Dim master As MyMaster = DirectCast(Me.Master, MyMaster)
        ' call the menu function to highlight "About Us"
        master.SetCurrentMenu("About")
    End Sub
</script>
<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
Some page content
</asp:Content>

You can a use a similar approach if your menu is set up differently. Let us know if you are stuck on that.

Phil

westannex · March 28th, 2009, 01:11 PM

Thanks Phil.
I see what the code is doing but I cant get it to work for me. Here's what I have.

Master page:
<script language="JavaScript">

</script>
.
.
<body onload='setActiveLink("leftColumn", "FAQ");'>
.
.
<div id="leftColumn">
<ul>
<li><a href="/FAQ.aspx" id="FAQ">FAQ</a></li>
<li><a href="/Links.aspx" id="Links">Links</a></li>
.....
</ul>
</div>

As you see, I have to hardcode FAQ in the function call. How can I set a variable in each content page so it is picked up by the function call in the master?

philip_cole · March 29th, 2009, 05:33 AM

OK if you are going to do it this way, then you can simply set a global Javascript variable within the page content.

Code:

<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script language="javascript">
masterActiveLink = 'FAQ';
</script>

..Some page content..

</asp:Content>

Then your master page can just use this variable in the call, or directly in the method:

javascript Code:

<script language="JavaScript">
<!--
// default to change nothing
var masterActiveLink = null;

function setActiveLink(containerElement)
{
    if(masterActiveLink != null)
   {
      //..... ( changes the CSS for the specified link )
   }
}
//-->
</script>

<body onload="setActiveLink('leftColumn');">

HTH
Phil

westannex · March 29th, 2009, 07:48 AM

Phil,

this works a treat. Thanks for your help.

David.