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

Question

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

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?

css asp-net

3 years ago by vishaljlf39

2 Answers

Login / Signup to Answer the Question.

Login Signup

**Amit8z4mc** · Answer 1 · 2021-08-09T12:00:44

Extension:

public static MvcHtmlString LiActionLink(this HtmlHelper html, string text, string action, string controller)

{

    var context = html.ViewContext;

    if (context.Controller.ControllerContext.IsChildAction)

        context = html.ViewContext.ParentActionViewContext;

    var routeValues = context.RouteData.Values;

    var currentAction = routeValues["action"].ToString();

    var currentController = routeValues["controller"].ToString();



    var str = String.Format("<li role=\"presentation\"{0}>{1}</li>",

        currentAction.Equals(action, StringComparison.InvariantCulture) &&

        currentController.Equals(controller, StringComparison.InvariantCulture) ?

        " class=\"active\"" :

        String.Empty, html.ActionLink(text, action, controller).ToHtmlString()

    );

    return new MvcHtmlString(str);

}

Usage:

<ul class="nav navbar-nav">

    @Html.LiActionLink("About", "About", "Home")

    @Html.LiActionLink("Contact", "Contact", "Home")

</ul>

**pankajshivnani123** · Answer 2 · 2021-08-10T12:36:13

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.

C TUTORIAL

C PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

C++ TUTORIAL

C++ PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

PYTHON TUTORIAL

PYTHON HOW TOS

INTERVIEW TESTS

EXECUTE CODE

JAVA TUTORIAL

JAVA CODE EXAMPLES

SPRING TUTORIAL

MORE IN JAVA

COMPUTER ARCHITECTURE

COMPUTER NETWORK

OPERATING SYSTEM

DBMS & SQL

PL/SQL

MongoDB

EXECUTE SQL

ANDROID DEVELOPMENT

GO LANGUAGE

LINUX

DOCKER

HTML TAGS (A to Z)

CSS REFERENCES

SASS/SCSS

KOTLIN

GAME DEVELOPMENT

PHP

GIT GUIDE

JAVASCRIPT

ADVANCED DSA

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

2 Answers

Login / Signup to Answer the Question.