Asp.Net Mvc highlighting current page link technique?
I use this solution:
First - add attribute data-menuPageId to your menu links
<ul class="menu">
<li data-menuPageId="home">
@(Html.Link<HomeController>(x => x.Index(), "Home"))
</li>
<li data-menuPageId="products">
@(Html.Link<ProductsController>(x => x.Index(), "Products"))
</li>
</li>
Next - add hidden field for current page Id to Layout.cshtml
<input type="hidden" id="currentPageId" value="@(ViewBag.Page ?? "home")" />
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");
});
I am always using this solution Html Part
<ul>
@Html.ListItemAction("Home Page","Index","Home")
@Html.ListItemAction("Manage","Index","Home")
</ul>
Helper Part
public static class ActiveLinkHelper
{
public static MvcHtmlString ListItemAction(this HtmlHelper helper, string name, string actionName, string controllerName)
{
var currentControllerName = (string)helper.ViewContext.RouteData.Values["controller"];
var currentActionName = (string)helper.ViewContext.RouteData.Values["action"];
var sb = new StringBuilder();
sb.AppendFormat("<li{0}", (currentControllerName.Equals(controllerName, StringComparison.CurrentCultureIgnoreCase) &&
currentActionName.Equals(actionName, StringComparison.CurrentCultureIgnoreCase)
? " class=\"active\">" : ">"));
var url = new UrlHelper(HttpContext.Current.Request.RequestContext);
sb.AppendFormat("<a href=\"{0}\">{1}</a>", url.Action(actionName, controllerName), name);
sb.Append("</li>");
return new MvcHtmlString(sb.ToString());
}
}
The best way to handle this is to write an HTML helper. You could use RouteData.Values["action"]
to get the currently executing action and compare to the menu name and if they match apply a CSS class that will highlight it.
public static MvcHtmlString MenuItem(
this HtmlHelper htmlHelper,
string action,
string text
)
{
var menu = new TagBuilder("div");
var currentAction = (string)htmlHelper.ViewContext.RouteData.Values["action"];
if (string.Equals(
currentAction,
action,
StringComparison.CurrentCultureIgnoreCase)
)
{
menu.AddCssClass("highlight");
}
menu.SetInnerText(text);
return MvcHtmlString.Create(menu.ToString());
}
And then use this helper to render the menu items:
<%: Html.MenuItem("about", "About us") %>
<%: Html.MenuItem("contact", "Contact us") %>
...
In layout try like following:
@{
string url = Request.RawUrl;
}
@switch (url)
{
case "/home/":
@Html.ActionLink("Home", "../home/", null, new { @style = "background:#00bff3;" })
@Html.ActionLink("Members", "../home/MembersList/")
break;
case "/home/MembersList/":
@Html.ActionLink("Home", "../home/")
@Html.ActionLink("Members", "../home/MembersList/", null, new { @style = "background:#00bff3;" })
break;
default:
@Html.ActionLink("Home", "../home/")
@Html.ActionLink("Members", "../home/MembersList/")
break;
}