Good vs Bad - Highlight the active page in the nab-bar for MVC Razor View Engine
Published: 2022-04-26 12:15:43

#Below is the expected output for this Article#


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71axx19yeezlbwr668wx.gif)

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


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


 

> <div class="@Html.IsSelected("Home", "Index")"> @Html.ActionLink("Home", "Index", "Home")</div>

>    <div class="@Html.IsSelected("Home", "About")"> @Html.ActionLink("About", "About", "Home")</div>

>    <div class="@Html.IsSelected("Home", "Contact")"> @Html.ActionLink("Contact", "Contact", "Home")</div>
 


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