Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ASP.NET MVC - Current Page highlighting in navigation

I'm wondering how is it possible to add a CSS Class to the current page in your navigation when using ASP.NET MVC 3? Here is my navigation in my _Layout.cshtml file:

<p>@Html.ActionLink("Product Search", "Index", new { controller = "Home" }, new { @class = "current" })
                | @Html.ActionLink("Orders", "Index", new { controller = "Orders" }) 
                | @Html.ActionLink("My Account", "MyAccount", new { controller = "Account" })
                | @Html.ActionLink("Logout", "LogOff", new { controller = "Account" })</p>

As you can see I have 4 links in my navigation with the first one having the CSS class "current" applied to it, I'd like to be able to add/remove this class to the different links in my navigation depending on which page the user is at. Is this possible?

Cheers

like image 274
CallumVass Avatar asked Feb 15 '12 08:02

CallumVass


5 Answers

You can do this

@{ 
   var currentController = ViewContext.RouteData.Values["controller"] as string ?? "Home";
   var currentAction = ViewContext.RouteData.Values["action"] as string ?? "Index";
   var currentPage = (currentController + "-" + currentAction ).ToLower();
}

@Html.ActionLink("Product Search", "Index", "Home", null,
                 new { @class = currentPage == "home-index" ? "current" : "" })
@Html.ActionLink("MyAccount", "MyAccount", "Account", null,
                  new { @class = currentPage == "account-myaccount" ? "current" : "" })
like image 50
dknaack Avatar answered Nov 06 '22 02:11

dknaack


I would recommend using an extension method for this. Something like:

public static HtmlString NavigationLink(
    this HtmlHelper html,
    string linkText,
    string actionName,
    string controllerName)
{
    string contextAction = (string)html.ViewContext.RouteData.Values["action"];
    string contextController = (string)html.ViewContext.RouteData.Values["controller"];

    bool isCurrent =
        string.Equals(contextAction, actionName, StringComparison.CurrentCultureIgnoreCase) &&
        string.Equals(contextController, controllerName, StringComparison.CurrentCultureIgnoreCase);

    return html.ActionLink(
        linkText,
        actionName,
        controllerName,
        routeValues: null,
        htmlAttributes: isCurrent ? new { @class = "current" } : null);
}

Then you can use it in your View by including the namespace of your extension and just calling your method:

@using MyExtensionNamespace;

...

  @Html.NavigationLink("Product Search", "Index", "Home")
| @Html.NavigationLink("Orders", "Index", "Orders") 
| @Html.NavigationLink("My Account", "MyAccount", "Account")
| @Html.NavigationLink("Logout", "LogOff", "Account")

This has the benefit of keeping your razor a little cleaner and is easily reusable in other views.

like image 21
bingles Avatar answered Nov 06 '22 02:11

bingles


@{
   var controller = ViewContext.RouteData.Values["controller"].ToString();
   var action = ViewContext.RouteData.Values["action"].ToString();
   var isActiveController = new Func<string, string, string, string, string>((ctrl, act, activeStyle, inactiveStyle) => controller == ctrl && action == act ? activeStyle : inactiveStyle);
 }

Then in your class attribute in your HTML you can do:

class="@isActiveController("controlername","action","activecssstyleclass","inactiveccsstyle")"

Just an other way of @dknaack his answer.. bit more generic and less functionality to repeat in your code.

like image 23
KyorCode Avatar answered Nov 06 '22 03:11

KyorCode


In my case,assume I have a Home page and a menu.

Add a ViewBag.Active as a placeholder in Home page like this:

@{
   ViewBag.Title = "Home";
   ViewBag.Active = "Home";
}

Then place it to your li class as a condition to active it or not:

 <li class="@(ViewBag.Active=="Home"? "active" : "")">
      <a href="@Url.Action("Index", "Home")"><span>@ViewBag.Title</span></a>
 </li>
like image 5
Fereydoon Barikzehy Avatar answered Nov 06 '22 02:11

Fereydoon Barikzehy


I used this tutorial to get this done, it's a lot simpler to understand and takes 2 minutes Hightlight Active menu item

like image 2
CSharper Avatar answered Nov 06 '22 02:11

CSharper