Question

I’m trying to get the clicked tab to be ‘Selected’. I have a class=’selected’ that would set it correctly if I can programatically get the value set. I’m using an extension method that is mostly working, it is setting the class=’selected’ on the link not the li. If I can somehow set li class=’selected’ then it will work. Any ideas?

Thanks

<div id="tabs" class="shadetabs">     

    <ul>         
        <li id="tab10" class="test">@Html.MenuLink("Overview", "Index", "Statistics")</li>   
        <li id="tab20" class="test">@Html.MenuLink("Detail View", "Detail", "Statistics")</li>   
        <li id="tab30" class="test">@Html.MenuLink("Trends", "Trends", "Statistics")</li> 
   </ul> 

</div>


public static class HTMLHelper
{
    public static MvcHtmlString MenuLink(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName)
    {
        var routeData = htmlHelper.ViewContext.RouteData;
        string currentAction = routeData.GetRequiredString("action");
        string currentController = routeData.GetRequiredString("controller");

        if (actionName == currentAction && controllerName == currentController)
        {

            return htmlHelper.ActionLink(linkText, actionName, controllerName, null, new { @class = "selected" });
        }

        return htmlHelper.ActionLink(linkText, actionName, controllerName);
    }       
}

Answer 1

Here’s one way you could do it..

 <ul id="menu">
    <li id="tab10" class="test @Html.AddClassIfRouteMatches("Home", "Index", "Home", "selected")">@Html.ActionLink("Home", "Index", "Home")</li>
    <li id="tab20" class="test @Html.AddClassIfRouteMatches("Detail View", "Detail", "Statistics", "selected")">@Html.ActionLink("Detail View", "Detail", "Statistics")</li>
     <li id="tab30" class="test @Html.AddClassIfRouteMatches("Detail View", "Detail", "Statistics", "selected")">@Html.ActionLink("Trends", "Trends", "Statistics")</li>
 </ul>

public static string AddClassIfRouteMatches(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName, string selectedClassName)
 {
    var routeData = htmlHelper.ViewContext.RouteData;
    string currentAction = routeData.GetRequiredString("action");
    string currentController = routeData.GetRequiredString("controller");

    if (actionName == currentAction && controllerName == currentController)
    {
        return selectedClassName;
    }
    return string.Empty;
 }

Instead of rendering anything differently, we can just use a helper to render a string if the current route matches our parameters.. This way, you don’t lose the availability of all the ActionLink overrides.