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">Servi ces</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]

Re: Dynamically edit class of element in Master Page

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.H tmlControls.Htm lGenericControl li;

li = (System.Web.UI. HtmlControls.Ht mlGenericContro l)
this.Master.Fin dControl("li1") ;

li.Attributes.A dd("class", "MySelectedClas s.css");



"CJM" <cjmnews04@nosp am.yahoo.co.ukw rote in message
news:FB5F4FE9-3D4C-40E7-B69A-661924BDABB9@mi crosoft.com...

>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">Servi ces</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

[CJM]

Re: Dynamically edit class of element in Master Page


"Rain" <me@myplace.com wrote in message
news:ugGWD2AxIH A.4876@TK2MSFTN GP02.phx.gbl...

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.H tmlControls.Htm lGenericControl li;
>
li = (System.Web.UI. HtmlControls.Ht mlGenericContro l)
this.Master.Fin dControl("li1") ;
>
li.Attributes.A dd("class", "MySelectedClas s.css");
>
>

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

Dim oCtl As System.Web.UI.H tmlControls.Htm lGenericControl
oCtl = Page.Master.Fin dControl("menu_ home")
With oCtl
.Attributes.Add ("class", "current_page_i tem")
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]

Re: Dynamically edit class of element in Master Page

whats oCtl = Page.Master.Fin dControl("menu_ home")

Menu home didnt appear in your html text at all.


"CJM" <cjmnews04@nosp am.yahoo.co.ukw rote in message
news:FB5FDED4-DCDE-48BC-843B-00F119B8AFC6@mi crosoft.com...

>
"Rain" <me@myplace.com wrote in message
news:ugGWD2AxIH A.4876@TK2MSFTN GP02.phx.gbl...

>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.Ht mlGenericContro l li;
>>
>li = (System.Web.UI. HtmlControls.Ht mlGenericContro l)
>this.Master.Fi ndControl("li1" );
>>
>li.Attributes. Add("class", "MySelectedClas s.css");
>>
>>

>
That's precisely the approach I was trying to take (albeit using VB.Net):
>
Dim oCtl As System.Web.UI.H tmlControls.Htm lGenericControl
oCtl = Page.Master.Fin dControl("menu_ home")
With oCtl
.Attributes.Add ("class", "current_page_i tem")
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

[CJM]

Re: Dynamically edit class of element in Master Page


"Rain" <me@myplace.com wrote in message
news:eQoSrADxIH A.516@TK2MSFTNG P04.phx.gbl...

whats oCtl = Page.Master.Fin dControl("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_servic es" runat="server"> <a
href="/services">Servi ces</a></li>
<li id="menu_projec ts" runat="server"> <a
href="/projects/">Projects</a></li>
<li id="menu_events " runat="server"> <a href="/events/">Events</a></li>
<li id="menu_contac t" runat="server"> <a href="/contact/">Contact
Us</a></li>
</ul>
</div>

Protected Sub Page_Load(ByVal sender As Object, ByVal e As
System.EventArg s) Handles Me.Load
Dim oCtl As System.Web.UI.H tmlControls.Htm lGenericControl
oCtl = Page.Master.Fin dControl("menu" )
With oCtl
.Attributes.Add ("class", "current_page_i tem")
End With
End Sub

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

Chris