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
– Alex, Commented Oct 12, 2019 at 6:40
Possible duplicate of How do you add a CSS class name to an ASP.NET MVC 3 Url.Action link? — Chandrashekhar Komati
– Chandrashekhar Komati, Commented Oct 12, 2019 at 7:10

Vishal modi · Accepted Answer · 2019-10-12 07:04:32Z

0

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>

edited Oct 12, 2019 at 7:04

answered Oct 12, 2019 at 6:43

Vishal modi

1,7202 gold badges13 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vishal modi Over a year ago

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

jishan siddique · Accepted Answer · 2019-10-12 08:46:56Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related