How to add “active” class to Html.ActionLink in AS

Question

I'm trying to add an"active" class to my bootstrap navbar in MVC, but the following doesn't show the active class when written like this:

<ul class="nav navbar-nav">
  <li>@Html.ActionLink("Home", "Index", "Home", null, new {@class="active"})</li>
  <li>@Html.ActionLink("About", "About", "Home")</li>
  <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

This resolves to what looks like a correctly formatted class, but doesn't work:

<a class="active" href="/">Home</a>

In the Bootstrap documentation it states that 'a' tags shouldn't be used in the navbar, but the above is how I believe is the correct way of adding a class to an Html.ActionLink. Is there another (tidy) way I can do this?

Answer 1

Add '.ToString' to improve comparing on ASP.NET MVC

<ul class="nav navbar-nav">
<li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Index" ? "active" : "")">@Html.ActionLink("Home", "Index", "Home")</li>
<li class="@(ViewContext.RouteData.Values["Action"].ToString() == "About" ? "active" : "")">@Html.ActionLink("About", "About", "Home")</li>
<li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Contact" ? "active" : "")">@Html.ActionLink("Contact", "Contact", "Home")</li>

--

Answer 2

I realized that this problem was a common problem for some of us, so I published my own solution using nuget package. Below you can see how it works. I hope that will be useful.

Note:This nuget package is my first package. So if you see a mistake, please give feedback. Thank you.

1. Install Package or download source code and add your Project

   -Install-Package Betalgo.MvcMenuNavigator
   

2. Add your pages to an enum

   public enum HeaderTop
   {
       Dashboard,
       Product
   }
   public enum HeaderSub
   {
       Index
   }
   

3. Put Filter to top of your Controllor or Action

   [MenuNavigator(HeaderTop.Product, HeaderSub.Index)]
   public class ProductsController : Controller
   {
       public async Task<ActionResult> Index()
       {
           return View();
       }
   
       [MenuNavigator(HeaderTop.Dashboard, HeaderSub.Index)]
       public async Task<ActionResult> Dashboard()
       {
           return View();
       }
   }
   

4. And use it In your header layout like this

   @{
   var headerTop = (HeaderTop?)MenuNavigatorPageDataNavigatorPageData.HeaderTop;
   var headerSub = (HeaderSub?)MenuNavigatorPageDataNavigatorPageData.HeaderSub;
   }
   <div class="nav-collapse collapse navbar-collapse navbar-responsive-collapse">
   <ul class="nav navbar-nav">
       <li class="@(headerTop==HeaderTop.Dashboard?"active selected open":"")">
           <a href="@Url.Action("Index","Home")">Dashboard</a>
       </li>
       <li class="@(headerTop==HeaderTop.Product?"active selected open":"")">
           <a href="@Url.Action("Index", "Products")">Products</a>
       </li>
   </ul>
   

More Info: https://github.com/betalgo/MvcMenuNavigator

Answer 3

I have make combination of answers above and made my solution.

So..

First in razor block create one string variable which will contain name value of controller and action that is called by user.

    @{
        string controllerAction =  ViewContext.RouteData.Values["Controller"].ToString() + ViewContext.RouteData.Values["Action"].ToString(); 
    }

Then use combination of HTML and Razor code:

    <ul class="nav navbar-nav">
        <li class="@(controllerAction == "HomeIndex" ? "active" : "" )">@Html.ActionLink("Home", "Index", "Home")</li>
        <li class="@(controllerAction == "AboutIndex" ? "active" : "" )">@Html.ActionLink("About", "Index", "About")</li>
        <li class="@(controllerAction == "HomeContact" ? "active" : "" )">@Html.ActionLink("Contact", "Contact", "Home")</li>
    </ul>

I think, that this is good because you don't need to access "ViewContext.RouteData.Values" each time to get controller name and action name.

Answer 4

is possible with a lambda function

@{
string controllerAction = ViewContext.RouteData.Values["Controller"].ToString() + ViewContext.RouteData.Values["Action"].ToString();
    Func<string, string> IsSelected= x => x==controllerAction ? "active" : "";
}

then usage

 @Html.ActionLink("Inicio", "Index", "Home", new { area = "" }, new { @class = IsSelected("HomeIndex")})

Answer 5

I know this question is old, but I will just like to add my voice here. I believe it is a good idea to leave the knowledge of whether or not a link is active to the controller of the view.

I would just set a unique value for each view in the controller action. For instance, if I wanted to make the home page link active, I would do something like this:

public ActionResult Index()
{            
    ViewBag.Title = "Home";
    ViewBag.Home = "class = active";
    return View();
}

Then in my view, I will write something like this:

<li @ViewBag.Home>@Html.ActionLink("Home", "Index", "Home", null, new { title = "Go home" })</li>

When you navigate to a different page, say Programs, ViewBag.Home does not exist (instead ViewBag.Programs does); therefore, nothing is rendered, not even class="". I think this is cleaner both for maintainability and cleanliness. I tend to always want to leave logic out of the view as much as I can.

Answer 6

I manged to do this by adding a view bag parameter in asp.net mvc. Here what have i done

Added ViewBag.Current = "Scheduler"; like parameter in each page

In layout page

<ul class="nav navbar-nav">
     <li class="@(ViewBag.Current == "Scheduler" ? "active" : "") "><a href="@Url.Action("Index","Scheduler")" target="_self">Scheduler</a></li>
 </ul>

This solved my problem.