DEV Community

Suchitkumar Khunt
Suchitkumar Khunt

Posted on

Good vs Bad - Highlight the active page in the nab-bar for MVC Razor View Engine

Below is the expected output for this Article

Image description

Bad practice:

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

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

Bad Practice: 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:

  $('#lnkHome').addClass('active');

  $('#lnkAbout').removeClass('active');

  $('#lnkContact').removeClass('active');
Enter fullscreen mode Exit fullscreen mode

About Page:

  $('#lnkHome').removeClass('active');

  $('#lnkAbout').addClass('active');

  $('#lnkContact').removeClass('active');
Enter fullscreen mode Exit fullscreen mode

Contact Page:

  $('#lnkHome').removeClass('active');

  $('#lnkAbout').removeClass('active');

  $('#lnkContact').addClass('active');
Enter fullscreen mode Exit fullscreen mode

Bad Practice: 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();
Enter fullscreen mode Exit fullscreen mode
$(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');
    }
});
Enter fullscreen mode Exit fullscreen mode

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 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;

    }
Enter fullscreen mode Exit fullscreen mode

}
`

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

@Html.ActionLink("Home", "Index", "Home") @Html.ActionLink("About", "About", "Home") @Html.ActionLink("Contact", "Contact", "Home")

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 customise it as per our need

Thank you for reading.

Happy coding :)

Top comments (0)