Good Vs Bad - Highlight The Active Page In The Nab-Bar For MVC Razor View Engine

This article explained the good and bad code practices for highlighting the navigation link for the active page.

Below is the expected output for this mail code.

Bad practice

Writing a piece of JavaScript code to each page to add/remove an active class to the corresponding link in nav-bar
Writing a piece of JavaScript code on the master layout page rather than each page to highlight the active page in the nav-bar

Writing a piece of JavaScript code to each page to add/remove an active class to the corresponding link in nav-bar

Assume we have three pages; Home, About, and Contact, and wrote the below bad code to manage highlight active class in nav-bar.

Home Page

<script>
  $(document).ready(function() {
      $('#lnkHome').addClass('active');
      $('#lnkAbout').removeClass('active');
      $('#lnkContact').removeClass('active');
  });
</script>

About Page

<script>
  $(document).ready(function() {
      $('#lnkHome').removeClass('active');
      $('#lnkAbout').addClass('active');
      $('#lnkContact').removeClass('active');
  });
</script>

Contact Page

<script>
  $(document).ready(function() {
      $('#lnkHome').removeClass('active');
      $('#lnkAbout').removeClass('active');
      $('#lnkContact').addClass('active');
  });
</script>

Writing a piece of JavaScript code on the master layout page rather than each page to highlight the active page in the nav-bar

Assume we have three pages; Home, About, and Contact, and wrote the below bad code in the master layout page to manage highlight active class in nav-bar.

@ {
    var currentActionName = ViewContext.RouteData.Values["action"].ToString();
} 
<script> 
  $(document).ready(function() {
    //remove the active class in each pages
    $('.lnk').each(function() {
        $(this).removeClass('active');
    });
    //assign the active class to active page only
    if ('@currentActionName' === 'Index') {
        $('#lnkHome').addClass('active');
    } else if ('@currentActionName' === "About") {
        $('#lnkHome').addClass('lnkAbout');
    } else if ('@currentActionName' === "Contact") {
        $('#lnkHome').addClass('lnkContact');
    }
}); 
</script>

Good Practice

Rather than writing the JavaScript code, we will create an Html helper in C# and manage the active class from that code.

Refer to the below code, I have created an Html helper with the method IsSelected() to manage the active class in the nav-bar.

public static class HtmlHelperExtensions {
    public static string IsSelected(this HtmlHelper html, string controller = null, string action = null, string cssClass = null) {
        if (string.IsNullOrEmpty(cssClass)) cssClass = "active";
        var currentAction = (string) html.ViewContext.RouteData.Values["action"];
        var currentController = (string) html.ViewContext.RouteData.Values["controller"];
        if (string.IsNullOrEmpty(controller)) controller = currentController;
        if (string.IsNullOrEmpty(action)) action = currentAction;
        return controller == currentController && action == currentAction ? cssClass : string.Empty;
    }
    public static string PageClass(this HtmlHelper html) {
        var currentAction = (string) html.ViewContext.RouteData.Values["action"];
        return currentAction;
    }
}

After writing the above C# code, we will create this method in each menu link as bellowed. [@Html.IsSelected()]

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

Below are the advantages of the above code.

Ease to use
Easily manage the highlight page functionality in large scale applications
Show the single menu item highlighted for multiple pages
Manage dynamic highlight class name for each menu item
And most important, it is custom written code so we can customize it as per our need

Thank you for reading.

Happy Coding :)