Adding active class to menu in asp.net core?

Question

it's my menu

<nav class="moduletable navigation hidden-sm hidden-xs">
  <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")"><a href="@Url.Action("UpcommingGames", "Games")">upcomming game</a></li>
  </ul>
</nav>

and this method check menu active

 public static string IsActive(this IHtmlHelper htmlHelper, string controller, string action)
    {
        var routeData = htmlHelper.ViewContext.RouteData;

        var routeAction = routeData.Values["action"].ToString();
        var routeController = routeData.Values["controller"].ToString();

        var returnActive = (controller == routeController && action == routeAction);

        return returnActive ? "active" : "";
    }

When I select menu it is working but when I click on one game and see details active class is removed, this code just worked for index view and but not working for details menu

game is a controller action or rendered in view or you are called any ajax function? — jishan siddique
– jishan siddique, Commented Jul 15, 2019 at 6:00

mehdi farhadi · Accepted Answer · 2019-08-01 09:04:18Z

17

you must just change isactive method like this :

public static string IsActive(this IHtmlHelper htmlHelper, string controller, string action)
    {
        var routeData = htmlHelper.ViewContext.RouteData;

        var routeAction = routeData.Values["action"].ToString();
        var routeController = routeData.Values["controller"].ToString();

        var returnActive = (controller == routeController && (action == routeAction || routeAction == "Details"));

        return returnActive ? "active" : "";
    }

answered Aug 1, 2019 at 9:04

mehdi farhadi

1,5421 gold badge10 silver badges16 bronze badges

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

Comments

Claudinei Ferreira · Accepted Answer · 2020-07-13 01:26:28Z

4

Work in .Core 2.2 / 3.x

1- In make this way in Layout.cshtml, last lines:

@if (ViewData["Active"] != null)
{
    <script type="text/javascript">document.getElementById("@ViewData["Active"]").classList.add("active")</script>
}

2- In _MenuPartial or another *.cshtml

@{
    ViewBag.Title = "Super Administração";
    ViewData["Active"] = "Home";
}

3- Set the ID according to the ViewData passed in the header

<a id="Home" asp-action="Index" asp-controller="Super" class="nav-link">

answered Jul 13, 2020 at 1:26

Claudinei Ferreira

5126 silver badges12 bronze badges

Comments

jishan siddique · Accepted Answer · 2019-07-15 06:06:19Z

you need to try this C# code

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

    <nav class="moduletable navigation hidden-sm hidden-xs">
  <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>

Collectives™ on Stack Overflow

Adding active class to menu in asp.net core?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related