C# .NET Website - adding a CSS class to menu elements

I've been using PHP for 7 years or so now, but as of today I've been thrust into using .NET for a project. Just for an insite:

This project features:

.NET4 Viewstate = false

Now my issue is this. The main layout is covered by the master page which seems quiet obvious how it works. It also includes nav menu options such as:

<div id="menu">
    <ul>
        <li><a href="default.aspx" title="Home" >Home</a></li>
        <li><a href="products.aspx" title="Product开发者_高级运维s">Products</a></li>
        <li><a href="prices.aspx" title="Size &amp; Price">Size &amp; Price</a></li>
        <li><a href="formats.aspx" title="File Formats">File Formats</a></li>
    </ul>
</div>

Now what I would like to do would be to add a CSS class attribute depending on what page I'm on so if I was on the products page I'd get the following source:

<div id="menu">
    <ul>
        <li><a href="default.aspx" title="Home" >Home</a></li>
        <li><a href="products.aspx" class="active" title="Products">Products</a></li>
        <li><a href="prices.aspx" title="Size &amp; Price">Size &amp; Price</a></li>
        <li><a href="formats.aspx" title="File Formats">File Formats</a></li>
    </ul>
</div>

Any help would be greatly appreciated!

Cheers :)

---

Lots of ways to do this, one way is to add a script to the "slave" page that sets the class of the appropriate tag.

<li><a href="default.aspx" title="Home" id="aHome" >Home</a></li>
<li><a href="products.aspx" title="Products" id="aProducts">Products</a></li>

Then in products.aspx you can do:

<SCRIPT>document.getElementById('aProducts').setAttribute('class', 'active');</SCRIPT>

---

It's not an answer to your question, but this was in the CSS category so I figured I'd at least comment :)

I would strongly suggest that you set static classes on each list item, and combined with body classes in the CSS, use something like:

<style type="text/css"><!--
    body.products #menu li.products a,
    body.otherpage1 #menu li.otherpage1 a,
    body.otherpage2 #menu li.otherpage2 a,
    body.otherpage3 #menu li.otherpage3 a,
    body.otherpage4 #menu li.otherpage4 a, { /* your styles here*/ }
--></style>

I think that using C# in order to just set a class is a little overkill, that's all :)

---

I'd start by converting the links to server controls. See the MSDN page for <asp:HyperLink />. From there, I'd make an interface for my MasterPage, so that if I ever need to change MasterPages in the future, I can implement the same interface and not have to worry about breaking my build (we'll publicly expose some properties in the next step, so this will be useful).

public interface IMasterPage
{
    String LnkHomeClass { get; set; }
    String LnkProductsClass { get; set; }
    ...
} 

Now as I mentioned, expose the CssClass attribute for your HyperLinks in the code-behind of your MasterPage.

public string LnkProductsClass
{
    get 
    {
        return LnkProducts.CssClass;    
    }
    set
    {
        LnkProducts.CssClass = value;
    }
}

Now you can set these on your child pages.

IMasterPage masterPage = Master as IMasterPage;
if (masterPage != null)
{
    masterPage.LnkProductsClass = “active”;
} 

Another option, but one that I am less familiar with, may be to use nested MasterPages.