Better way to get active page link in MVC 3 Razor

user_794849 0
Viewed 28120

When I want a specific menu link to be active at a given page, I'm using this approach in Razor:

On the master layout I have these checks:

var active = ViewBag.Active;
const string ACTIVE_CLASS = "current";

if (active == "home")
{
    ViewBag.ActiveHome = ACTIVE_CLASS;
}
if (active == "products")
{
    ViewBag.ActiveProducts = ACTIVE_CLASS;
}

etc.

The html menu on the master layout:

<ul>
<li class="@ViewBag.ActiveHome"><a href="/">Home</a></li>
<li class="@ViewBag.ActiveProducts"><a href="@Url.Action("index", "products")">Products</a></li>
</ul>

When specifying which layout page to use on a different view:

@{
    ViewBag.Active = "home";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Is there a better approach to sepcify active links, than the one I'm currently using?

asp.net-mvc-3 razor c#
6 Answers

This code worked great for me, even on a new Visual Studio 2013 MVC5/Bootstrap project. Note also that you could change the li.AddCssClass("active"); line to point to a custom class if you want to leave the Bootstrap "active" class alone. I added one called "activemenu" in the project's Site.css file and did any specific navbar styling changes I wanted there.

The line in the code above was just changed to this to get it all working:

li.AddCssClass("activemenu");

In Site.css I added a simple class for my purpose:

.activemenu {
    text-decoration: underline;
}

Alternatively you could change the background color and/or border, etc...

user_12691600
Related