Active class not retained on the selected list item in the bootstrap nav bar in mvc3 after new page opens

I am using Bootstrap 3.2.0 to create a navbar in my MVC3 application. Also I am using jquery-1.11.1.js.

The problem I am facing is that my navbar is created properly and it's responsive too, but the "active" class is not retained on the selected navbar item once the new page loads.

What is happening is that when I click on the navbar item, selected item gets the "active" class but after the new page is loaded, selected item losses the "active" class and the "active" class goes to the first item in the nav list.

I am pasting the code below for reference:

_Layout.cshtml:

<body>
    <div class="container">
        <div class="row" id="navigationbar" 
             style="height:50px; background-color:black;">
            @Html.Partial("_navbar")
        </div>
        <div class="content">
            ......
        </div>
    </div>
</body>

_navbar.cshtml:

<div class="navbar navbar-default col-xs-10" role="navigation" 
     style="background-color: orange; border: 0px; border-radius: 0px; text-align: center;">
    <div>
        <button type="button" class="navbar-header navbar-toggle" data-toggle="collapse"
        data-target="#navbarcollapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse" id="navbarcollapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="/Home/Index">Home</a></li>
            <li><a href="/Home/ListOfEmployees">Employee List</a></li>
            <li><a href="/Register/Index">Registration</a></li>
            <li><a href="/Home/AddEmployee">Add Employee</a></li>
        </ul>
    </div>
</div>

And I have included the below jquery code in the _navbar.cshtml:-

$(".nav a").on("click", function () {
    $(".nav").find(".active").removeClass("active");
    $(this).parent().addClass("active");
});

Answer

September 17, 2014

KyleMit

You'll need to determine that information when the page loads and dynamically add the .active class to the applicable menu item. You can do that by using the routing information exposed by html.ViewContext.RouteData and an extension method that checks to see if it matches.

Update your _navbar.cshtml like this:

<pre><code><div class="collapse navbar-collapse" id="navbarcollapse"> <ul class="nav navbar-nav"> <li <b>class='@Html.IsActive("Home", "Index")'</b>> <a href="/Home/Index">Home</a> </li> <li <b>class='@Html.IsActive("Home", "ListOfEmployees")'</b>> <a href="/Home/ListOfEmployees">Employee List</a> </li> <li <b>class='@Html.IsActive("Register", "Index")'</b>> <a href="/Register/Index">Registration</a> </li> <li <b>class='@Html.IsActive("Home", "AddEmployee")'</b>> <a href="/Home/AddEmployee">Add Employee</a> </li> </ul> </div> </code></pre>

Then add the extension method IsActive:

public static class Utilities
{
    public static string IsActive(this HtmlHelper html, 
                                  string control,
                                  string action)
    {
        var routeData = html.ViewContext.RouteData;

        var routeAction = (string)routeData.Values["action"];
        var routeControl = (string)routeData.Values["controller"];

        // both must match
        var returnActive = control == routeControl &&
                           action == routeAction;

        return returnActive ? "active" : "";
    }
}

For more info, you can check an article I authored a while back about loading the active class in bootstrap using ASP.NET MVC