How to add class attribute to list item in master page

may1hem · Dec 27, 2012

I have a menu list in my master page and in each page on my web site I want the current page to be highlighted in the menu.

Here is the relevant snippet of the MasterPage file:

HTML:

<body id="master_body" runat="server">
<div id="header">
<div class="container">
<div id="top-menu">
<ul class="menu">
<li> <a href="default.aspx" title="" id="menu-item-home"> <span> Welcome </span> Home </a> </li>
<li> <a href="about.aspx" title="" id="menu-item-about"> <span> Who we are </span> About </a>

I tried using this code, but it gives an error "Object reference not set to an instance of an object".

HTML:

Dim myControl As HtmlGenericControl = CType(Master.FindControl("menu-item-about"), HtmlGenericControl)
myControl.Attributes.Add("class", "current_page_item")

I tried the same code, just to test if I could add a class attribute to the BODY tag and that worked ok.

So why doesn't it work for the LI tag? Is it because it's a sub-item of something else?

jbenson001 · Dec 28, 2012

Since it is in a Master page the IDs are changed when the page is rendered. View the page source and you will see what I mean. The control names get a prefix. This is the same thing that will happen when you nest controls, use a usercontrol, etc.
If you are using 4.0 and above, you can put a tag on the <a> CliendIdMode = "static". Then when the page loads, the a tag will have the ID you specify. This way the findcontrol will work.

may1hem · Jan 11, 2013

Thanks for your response, but I can't get this to work.

I checked the source code, the ID doesn't change when I view the page in a browser.

Also my Visual Studio 2008 gives an error when I add clientidmode to an <a> tag.

Any ideas how to fix this?

may1hem · Jan 15, 2013

Any ideas anyone?

MarkSweetland · Jan 16, 2013

I try not to mix classic asp with .Net if I can help it, but:

1. Add runat = "server" to both the anchors and change the dashes "-" to underscore "_" in the ID of the control since .NET will give you an invalid identifier with dashes:

Code:

<a href="default.aspx" title="" id="menu_item_home" [red]runat="server"[/red]>

2. Add a sub in the Master code behind that will find the control change the class. Also note the control was changed to [red]HtmlAnchor[/red]:

Code:

Public Sub SetPageLinkColor(ByVal pageName As String)
        Select Case pageName.ToString.toLower()
            Case "home"
                Dim myControl As HtmlAnchor = CType(Me.FindControl("menu_item_home"), HtmlAnchor)
                myControl.Attributes.Add("class", "current_page_item")
            Case "about"
                Dim myControl As HtmlAnchor = CType(Me.FindControl("menu_item_about"), HtmlAnchor)
                myControl.Attributes.Add("class", "current_page_item")
        End Select
    End Sub

3. In each of your other pages add the call to the Page_Load handler to set the page link color. Change the section for "YourMasterClassName" to your particular solution. For your "Home" page:

Code:

CType(Me.Master, [red]YourMasterClassName[/red]).SetPageLinkColor("Home")

Mark

"You guys pair up in groups of three, then line up in a circle."
- Bill Peterson, a Florida State football coach

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to add class attribute to list item in master page

may1hem

Programmer

jbenson001

Programmer

may1hem

Programmer

may1hem

Programmer

MarkSweetland

MIS

Similar threads

Part and Inventory Search

Sponsor