Question

I’m looking at the StackOverflow website and I’ve noticed that there is a Class="youarehere" attribute set to the buttons of active views. This results in the orange styling instead of the grey styling.

Can anybody tell me how they’re doing this? What’s the easiest way to dynamically set the class based on the URL?

Answer 1

Writing an html helper for those buttons could be one way of doing it. Assuming the standard routing is set:

routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
    "Default",
    "{controller}/{action}/{id}",
    new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);

here’s how the helper might look like:

public static MvcHtmlString MyButton(this HtmlHelper htmlHelper, string id, string text)
{
    var button = new TagBuilder("input");
    button.MergeAttribute("type", "button");
    button.MergeAttribute("value", text);
    // get the id from the current route:
    var routeId = htmlHelper.ViewContext.RouteData.Values["id"] as string;
    if (id == routeId)
    {
        button.MergeAttribute("class", "active");
    }
    return MvcHtmlString.Create(button.ToString(TagRenderMode.SelfClosing));
}

and finally add to your view:

<%= Html.MyButton("questions", "Questions") %>
<%= Html.MyButton("tags", "Tags") %>
<%= Html.MyButton("users", "Users") %>

To further improve the helper you could add additional parameters that will contain the action and the controller this button will redirect to when clicked.