Dynamically edit class of element in Master Page

[CJM]

I have a site that is being built using master pages, and includes a menu
that I want to manipulate dynamically.

Specifically the currently-selected menu option is styled differently to the
others, as follows:

<div id="menu">
<ul>
<li class="current_page_item"><a href="/">Home</a></li>
<li><a href="/about/">About Us</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/events/">Events</a></li>
<li><a href="/contact/">Contact Us</a></li>
</ul>
</div>

I want to be able to move the class from the first item, and apply it to the
oppropriate menu item for each page, during the Form_Load() event.

I know I could place the entire menu into it's own Content Placeholder, but
a) I thought doing it dynamically might be more sophisticated, and b) I just
want to know how to do it for the hell of it - it's a learning exercise.

I know I need to use FindControl. and I know there are complications
regarding naming containers, but I haven't managed to find or figure out the
right solution.

Thanks

Chris

 

[Rain]

Hi, this will work for you

//HTML
<ul>

<li id="li1" runat="server">Menu Item1</li>

<li id="li2" runat="server">Menu Item2</li>

</ul>

//Page Lload

System.Web.UI.HtmlControls.HtmlGenericControl li;

li = (System.Web.UI.HtmlControls.HtmlGenericControl)
this.Master.FindControl("li1");

li.Attributes.Add("class", "MySelectedClass.css");

 

[CJM]

Hi, this will work for you

//HTML
<ul>

<li id="li1" runat="server">Menu Item1</li>

<li id="li2" runat="server">Menu Item2</li>

</ul>

//Page Lload

System.Web.UI.HtmlControls.HtmlGenericControl li;

li = (System.Web.UI.HtmlControls.HtmlGenericControl)
this.Master.FindControl("li1");

li.Attributes.Add("class", "MySelectedClass.css");

That's precisely the approach I was trying to take (albeit using VB.Net):

Dim oCtl As System.Web.UI.HtmlControls.HtmlGenericControl
oCtl = Page.Master.FindControl("menu_home")
With oCtl
.Attributes.Add("class", "current_page_item")
End With

Unfortunately, I'm getting 'Object reference not set to an instance of an
object'....

So, my FindControl call is not hitting the right target... Where am I going
wrong?

Cheers

Chris

 

[Rain]

whats oCtl = Page.Master.FindControl("menu_home")

Menu home didnt appear in your html text at all.

 

[CJM]

whats oCtl = Page.Master.FindControl("menu_home")

Menu home didnt appear in your html text at all.

I simplied my original code snippet... I'd actually tried roughly what you
were suggesting, but it hadn't worked. Actually tried a few other variations
too, but since I didn't know which one was heading in the right direction, I
just reverted to basics.

So my current snippets would be:

<div id="menu">
<ul>
<li id="menu_home" runat="server"><a href="/">Home</a></li>
<li id="menu_about" runat="server"><a href="/about/">About Us</a></li>
<li id="menu_services" runat="server"><a
href="/services">Services</a></li>
<li id="menu_projects" runat="server"><a
href="/projects/">Projects</a></li>
<li id="menu_events" runat="server"><a href="/events/">Events</a></li>
<li id="menu_contact" runat="server"><a href="/contact/">Contact
Us</a></li>
</ul>
</div>

Protected Sub Page_Load(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Me.Load
Dim oCtl As System.Web.UI.HtmlControls.HtmlGenericControl
oCtl = Page.Master.FindControl("menu")
With oCtl
.Attributes.Add("class", "current_page_item")
End With
End Sub

And in case it isn't clear, 'current_page_item' is the class I wish to
assign to the active menu item...

Chris

 

[Rain]

OK Chris,

Your div has the id="menu", and your items are uniquely identified as
"menu_home" etc. But your code is trying to set the class attribute of the
div, which by the way would not work as you have no runat="server". (
resulting in an object variable not set ).

oCtl = Page.Master.FindControl("menu")
With oCtl
.Attributes.Add("class", "current_page_item")
End With

so...

oCtl = Page.Master.FindControl("menu_home")

oCtl.Attrinbutes.Add("class","current_page_item") // Would set the
"menu_home" item to the current item class..

Hope that helps.