How to add “active” class to Html.ActionLink in ASP.NET MVC

Question

I have a _layout.cshtml like this

<ul class="sidebar-menu tree" data-widget="tree">
    <li class="header" style="color:white;font-weight:bold;">Test Menu</li>
    <li>
        <a href="@Url.Action("Index","Monney")">
            <i class="fa fa-dashboard"></i> <span>Monney</span>
        </a>
    </li>
    <li>
        <a href="@Url.Action("Index","Bank")">
            <i class="fa fa-dashboard"></i> <span>Bank</span>
        </a>
    </li>
    <li>
        <a href="@Url.Action("Index","User")">
            <i class="fa fa-dashboard"></i> <span>User</span>
        </a>
    </li>
</ul>

I'm trying to add an "active" class in to li when it active to my sidebar-menu in MVC.

How can I do that?

I used Jquery / Javascript before, but the page will reload when I click each `a`. — Alex, Oct 12 '19 at 06:40
Possible duplicate of [How do you add a CSS class name to an ASP.NET MVC 3 Url.Action link?](https://stackoverflow.com/questions/10589128/how-do-you-add-a-css-class-name-to-an-asp-net-mvc-3-url-action-link) — chandu komati, Oct 12 '19 at 07:10

Vishal modi · Accepted Answer · 2019-10-12T07:04:32.570

first thing if you click on particular link, your page will be refreshed and active class will be remove, if you use jquery. so you need to manage it using Viewbag.

you need to define value in your controller each action.

// let say you have User controller

public ActionResult Index()
{
   ViewBag.data = "user";
   return View();
}

in your layout you need to check value of that viewbag

<ul class="sidebar-menu tree" data-widget="tree">
    <li class="header" style="color:white;font-weight:bold;">Test Menu</li>
    <li id="money">
        <a href="@Url.Action("Index","Monney")">
            <i class="fa fa-dashboard"></i> <span>Monney</span>
        </a>
    </li>
   <li id="bank">
        <a href="@Url.Action("Index","Bank")">
            <i class="fa fa-dashboard"></i> <span>Bank</span>
        </a>
    </li>
   <li id="user">
        <a href="@Url.Action("Index","User")">
            <i class="fa fa-dashboard"></i> <span>User</span>
        </a>
    </li>
</ul>

<script>
    $(document).ready(function () {
        if ('@ViewBag.data' != null)
        {
           $('#' + '@ViewBag.data').addClass('active');
        }
    });
</script>

you need to define viewbag in three controller's index method, or you can create one action fiilter to check controller name and assign value in viewbag — Vishal modi, Oct 12 '19 at 06:55

jishan siddique · Answer 2 · 2019-10-12T08:46:56.253

You can use an alternative way and handle dynamically.

Create One helper class add following method inside

public static  class HtmlExtension
{
    public static string IsActive(this IHtmlHelper html, string controller = null, string action = null, string cssClass = null)
    {

        if (String.IsNullOrEmpty(cssClass))
            cssClass = "active";

        string currentAction = (string)html.ViewContext.RouteData.Values["action"];
        string currentController = (string)html.ViewContext.RouteData.Values["controller"];

        if (String.IsNullOrEmpty(controller))
            controller = currentController;

        if (String.IsNullOrEmpty(action))
            action = currentAction;

        return controller.ToLower().Split(',').Contains(currentController.ToLower()) && action.ToLower().Split(',').Contains(currentAction.ToLower()) ?
            cssClass : String.Empty;
    }
}

In cshtml, you need to change

 <ul class="sidebar-menu tree" data-widget="tree">
  <ul id="nav" class="sf-menu">
    <li class="@Html.IsActive("GameVideos", "Index")"><a href="@Url.Action("Index", "GameVideos")">videogame</a></li>                                
    <li class="@Html.IsActive("SystemRequirements", "Index")"><a href="@Url.Action("Index", "SystemRequirements")">systemReq</a></li>
    <li class="@Html.IsActive("Games", "UpcommingGames,Details”)”><a href="@Url.Action("UpcommingGames”, "Games")">upcomming game</a></li>
  </ul>
</nav>

Register your helper in web.config for global access.

<system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        <add namespace="YourNameSpace"/> // here you need to add your htmlextension namespace
      </namespaces>
    </pages>
  </system.web.webPages.razor>

if you want you can access specific cshtml page

@using YourNameSpace // here you need to add your HTML extension namespace

How to add “active” class to Html.ActionLink in ASP.NET MVC

2 Answers2