Bootstrap Navbar Active Class to html.actionlink with MVC

In this tutorial I will show you how to implement bootstrap menu active on navabar using MVC. Here I applied to my project. By default MVC project template was comes with bootstrap and styling for menu by default but functionality was not included.

We have the situation to utilize the navigational layout add styling to the page by keep where the user in the application with navigation assists.

To implement active class dynamically on layout by checking current routing data values.

Layout Page:

The new ASP.NET web application in MVC contains some default pages and navigational links and it is under the views folder of shared layout. It seems to be like

              <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    </ul>
                </div>

Highlight Link:

In order to highlight the navbar li element using the class name called active. Below example I applied to the home page.

<div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active">@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    </ul>
                </div>

But here we needed is to generate active class dynamically depending up on the current active page. To achieve this using the extension method called IsActive, it will takes the parameters of controller and route values. Here I applied of my application like this,

<ul class="nav navbar-nav">

                    <li class='@Html.IsActive("UserLogins", "Index")'>
                        @Html.ActionLink("User Login's", "Index", "UserLogins")
                    </li>
                    <li class='@Html.IsActive("categories", "Index")'>
                        @Html.ActionLink("categorie's", "Index", "categories")
                   </li>
                    <li class='@Html.IsActive("ratings", "Index")'>
                        @Html.ActionLink("rating's", "Index", "ratings")
                    </li>
                    <li class='@Html.IsActive("cars", "Index")'>
                        @Html.ActionLink("car's", "Index", "cars")
                    </li>
                </ul>

I created a class named called HtmlUtility there I implemented the extension method named IsActive. If the string matches the current route and controller text it will return active class.

To get the context in HtmlUtility class object using the ViewContent property, it contains the RouteData which has collection of URL parameter and default values.

HtmlUtility Class seems to be like this;

public static class HtmlUtility
    {
 
        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"];
 
            // must match both
            var returnActive = control == routeControl &&
                               action == routeAction;

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

In razor view, make sure to import the project namespace. It seems to be like this,

@using yourprojectName;

For me it like this,

@using cars.Models;

Car is my project name and I created class inside models folder. When you run the project default current page should be highlighted and then click the navbar links the current page should be highlighted.