MVC 5 Razor Active Navigation Tab

Question

I have been trying to highlight the Active navigation tab on my project. I was tasked on updating an older website without changing to bootstrap(which is where my experience is). I found an example that had most of what I needed. Right now the only Tab that has the "selected class" is the Home tab. When I click on another tab the Home tab is no longer highlighted but the current tab is not. When I inspect the element the Home tab still has the "selected class" attribute. Not sure what to do.

_Layout

        <ul id="navigation">
            <li class="@Html.ActivePage("Home", "Index")">@Html.ActionLink("Home", "Index", "Home")</li>
            <li class="@Html.ActivePage("About", "About")">@Html.ActionLink("About", "About", "Home")</li>
            <li class="@Html.ActivePage("Products", "Products")">@Html.ActionLink("Products", "Products", "Home")</li>
            <li class="@Html.ActivePage("Services", "Services")">@Html.ActionLink("Services", "Services", "Home")</li>
            <li class="@Html.ActivePage("Contact", "Contact")">@Html.ActionLink("Contact", "Contact", "Home")</li>
        </ul>

HtmlHelper Class

public static class HtmlHelperExtensions
{
    public static string ActivePage(this HtmlHelper helper, string controller, string action)
    {
        string classValue = "";

        string currentController = helper.ViewContext.Controller.ValueProvider.GetValue("controller").RawValue.ToString();
        string currentAction = helper.ViewContext.Controller.ValueProvider.GetValue("action").RawValue.ToString();

        if (currentController == controller && currentAction == action)
        {
            classValue = "selected";
        }

        return classValue;
    }
}

CSS

ul#navigation li {
    list-style: none;
    float: left;
    position: relative;
    background: url(../images/mi-standby.gif) no-repeat left top;
    padding-left: 3px;
    margin-left: 6px;
}

ul#navigation a {
    float: left;
    display: block;
    background: url(../images/mi-standby.gif) no-repeat right top;
    padding: 10px 29px 6px 26px;
    text-decoration: none;
    font-weight: bold;
    font-size: .8em;
    color: #a6a6a6;
}

ul#navigation li.selected a {
    background: url(../images/mi-active.gif) no-repeat right top;
    color: #FFF;
}

ul#navigation li.selected {
    background: url(../images/mi-active.gif) no-repeat left top;
    color: #FFF;
}

ul#navigation li a:active {
    background-color: #ff0000;
    text-decoration: none;
    color: #ffffff;
}

Answer 1

Your helper method is looking to see if the current controller and action match the values you're passing in, but you're passing the action's name as both arguments. From your code snippet it looks like all your actions are on your HomeController, so try replacing your view with this:

    <ul id="navigation">
        <li class="@Html.ActivePage("Home", "Index")">@Html.ActionLink("Home", "Index", "Home")</li>
        <li class="@Html.ActivePage("Home", "About")">@Html.ActionLink("About", "About", "Home")</li>
        <li class="@Html.ActivePage("Home", "Products")">@Html.ActionLink("Products", "Products", "Home")</li>
        <li class="@Html.ActivePage("Home", "Services")">@Html.ActionLink("Services", "Services", "Home")</li>
        <li class="@Html.ActivePage("Home", "Contact")">@Html.ActionLink("Contact", "Contact", "Home")</li>
    </ul>