Best approach for styling navigation using unordered lists in ASP.NET

Question

In ASP.NET (not MVC), what is the best approach to programmatically setting styles on an unordered list used for navigation so the appropriate menu item is styled as the active item if that page is being viewed?

This would most likely be used in conjunction with a MasterPage.

Answer 1

The answer to your question depends a lot on how you have your list implemented {User control or not, etc}. How I would do it, is implement the list to be generated by a user control.

I'd have the UserControl tag each element with something like:

<{...} class="GeneratedMenuItem"> {...}

And I'd have the appropriate styles in the Style Sheet; of course if it was in a user control then you might be able to use Themes (but that depends on which version of ASP.net you are using.

Answer 2

Good question, I have played around with various methods of doing this since the bad old days of asp, and am yet to find the perfect hammer.

Generally I have used the Request.Url.AbsoluteUri (or similar) as an argument to whatever the rendering function was, and most often set a css class of "current" or similar on the appropriate node, as well as rendering child nodes as needed.

I have most often used an xml/xsl combination, which can usually be worked against most cms platforms, although I have never been that happy with the overhead of firing up an xsl transform just to output a nav list, but if you know xsl, is a very nice tool for generating html, and you can always cache the output - for little static html sites which come up occasionally, I often use this approach in a build process to render static menu markup.

Have also used the aspnet sitemap functionality a few times, which is pretty good if you use the css friendly adapters with it - the default rendering makes very ugly markup.

I found this article earlier this weeek: http://blog.devarchive.net/2008/01/auto-generate-strong-typed-navigation.html which uses t4 templates to make a strongly typed navigation class, and I will definately be investigating that further.

Answer 3

The way I took this approach was to create ASP.NET Hyperlink Controls for each of my navigation items in my master page.

Within the master page, I then created a public method that would assign the appropriate "selected" CSS style to the control I specify:

Public Sub SetNavigationPage(ByVal MenuName As String)

   DirectCast(Me.FindControl(MenuName), HyperLink).CssClass = "MenuCurrent"

End Sub

Then in my content pages, I simply had to reference the master page accordingly.

Dim myMaster As EAF = DirectCast(Me.Master, EAF)
myMaster.SetNavigationPage("hypSearchRequest")

This gave me the flexibility to add/remove navigation items on various pages and also be able to assign multiple pages to the administrator navigation option when necessary.

It is also interesting to note that referencing the hyperlink control and setting the Visibility attribute (for hiding administrative pages) didn't work. This is due to the order in which the master and the content pages load. Instead, I created another CSS class that simply set the visibility property and used the same approach as above.