Asp.Net Mvc highlighting current page link technique?

Question

I need to highlight active link in the menu. My menu is in the master page by the way. I\'m looking for the best way to implement this? Any ideas?

Answer 1

I use this solution:

First - add attribute data-menuPageId to your menu links

   

            @(Html.Link(x => x.Index(), "Home"))
   
   

            @(Html.Link(x => x.Index(), "Products"))
   

Next - add hidden field for current page Id to Layout.cshtml

Add ViewBag.Page initializtion at your pages like Home or Products

@{
    ViewBag.Page = "products";
}

And last thing you should reference this javascipt from yor Layout.cshtml

$(function() {
    var pageIdAttr = "data-menuPageId";
    var currentPage = $("#currentPageId").attr("value");

    var menu = $(".menu");

    $("a[" + pageIdAttr + "]").removeClass("selected");
    $("a[" + pageIdAttr + "=\"" + currentPage + "\"]", menu).addClass("selected");
});