Question

I have a master page in my asp.net MVC project, which has code like this:

    <div id="menu">
        <ul>
            <li><a href="#" class="current">home</a></li>
            <li><a href="#">add image</a></li>
            <li><a href="#">contact</a></li>
        </ul>
    </div>

Depending on what page I am on, I’d like to move the class="current" attribute to a different <li>.

What is the general pattern that this type of thing is done with on ASP.NET MVC?

Answer 1

Server-side you can use a BaseViewModel that contains information on which link should have the current class. All of your view models would inherit from this base class and the MasterPage would be strongly typed to the BaseViewModel. You can then use the model to set up the links.

Client-side you can apply a specific id or class that uniquely identifies each link and associates it with a particular url. On page load you can use jQuery (or other) to add the class to the matching link based on the mapping logic for your application.

I prefer the former as it will work even if javascript isn’t available.

 public class BaseViewModel
 {
      public string CurrentLink { get; set; }
      ...
 }

View logic

 <div id="menu">
    <ul>
        <li><a href="#" class="<%= Model.CurrentLink == "home" ? "current" : "" %>">home</a></li>
        <li><a href="#" class="<%= Model.CurrentLink == "addimage" ? "current" : "" %>">add image</a></li>
        <li><a href="#" class="<%= Model.CurrentLink == "contact" ? "current" : "" %>">contact</a></li>
    </ul>
</div>

Moreover, I’d probably put together a HTML helper that would generate the menu item for me. Essentially, use a TagBuilder to build up the anchor and apply the class using the model on the ViewContext associated with the HtmlHelper. Wrap this in an li and return it as a string. Makes the page logic much cleaner and, if your links are associated with controllers/actions you can use that information from the ViewContext as well to choose which should be the current link.