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

Below is the expected output for this Article

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

About Page:

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

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

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

Contact Page:

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

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

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

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

$(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');
    }
});

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;

    }

}
`

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 :)