Question

Okay, my site is http://www.kristianbak.com.

I have a css class called activebutton. I want that to change whenever another View is active. Currently it’s merely hard-coded in the HTML (sitemaster).

Anyone with a good idea?

Answer 1

You could test the current action and if it matches apply a CSS class:

<% if (ViewContext.RouteData.GetRequiredString("action") == "About") { %>
    ... highlight here
<% } %>

Even better I would write a HTML helper to generate the menu:

public static MvcHtmlString MenuItem(
    this HtmlHelper htmlHelper, 
    string text,
    string action, 
    string controller
)
{
    var li = new TagBuilder("li");
    var routeData = htmlHelper.ViewContext.RouteData;
    var currentAction = routeData.GetRequiredString("action");
    var currentController = routeData.GetRequiredString("controller");
    if (string.Equals(currentAction, action, StringComparison.OrdinalIgnoreCase) &&
        string.Equals(currentController, controller, StringComparison.OrdinalIgnoreCase))
    {
        li.AddCssClass("active");
    }
    li.InnerHtml = htmlHelper.ActionLink(text, action, controller).ToHtmlString();
    return MvcHtmlString.Create(li.ToString());
}

and then use it like this:

<ul>
    <%= Html.MenuItem("Home", "Home", "Home") %>
    <%= Html.MenuItem("About Me", "About", "Home") %>
    <%= Html.MenuItem("My Work", "Work", "Home") %>
    <%= Html.MenuItem("Blog", "Index", "Blog") %>
    ...
</ul>

This will add the active class to the anchor if the current request matches the action and controller of the link.