MVC keep navigation active when redirect to "Add" page

Question

I've created some pages using "Gentelella Alela" template, when I create pages, it has the ability to turn navigation active (with 'current-page' class) based on controller and action name:

I'm adding "Add" action in RoleController, when I redirect to "/Admin/Role/Add", the navigation active is gone:

Any idea how should I make it work?

The trigger button is coded this way:

_Layout.cshtml navigation code:

How are you specify "current-page". Would you share the Layout page, too ? — lucky, Dec 29 '17 at 13:35
The current-page class comes with the template, updated my post for _Layout.cshtml — Jeff Tung, Dec 29 '17 at 14:20

score 1 · Answer 1 · edited Jul 10 '20 at 13:22

1

Hope this will work for you.

<ul>
  <li class="@(ViewContext.RouteData.Values["Controller"].ToString() == "Home" ? "active" : "")">
    <a asp-area="" asp-controller="Home" asp-action="Index"><i class="icon fa fa-home"></i><span>Home</span></a>
  </li>
</ul>

edited Jul 10 '20 at 13:22

Matt Ke

3,599
12
30
49

answered Jul 10 '20 at 12:26

Farhana

11
2

score 0 · Answer 2 · answered Dec 29 '17 at 14:02

One easy way to do is using BaseController

ViewData["ActivePage"] = ActivePage();

 private string ActivePage()
        {
            string actionName = this.ControllerContext
                .RouteData
                .Values["action"]
                .ToString();

            string controllerName = this.ControllerContext
                .RouteData
                .Values["controller"]
                .ToString();

            return string.Format($"{controllerName}-{actionName}");
        }

You can call active page before action executing. After this you need to check this ViewData on Layout page.

 $(document).ready(function () {
            var activePageName = '@ViewData["ActivePage"]';

            var activeElement = $('li.' + activePageName);
            activeElement.addClass('active');

            $.each(activeElement.parents('li'), function (k, v) {
                $(v).addClass('active');
            });
        });

And before script your ul and li element must contains specific name to recognize it. You need to use format given in BaseController ActivePage method ControlleName-ActionName.

<ul class="nav nav-second-level collapse">
                        <li class="Home-Index">
                            @Html.ActionLink("Index", "Index", "Home")
                        </li>
                    </ul>

score 0 · Answer 3 · answered Jan 01 '18 at 05:10

public static class Utilities
    {
        public static string IsActive(this HtmlHelper html,
                                      string control,
                                      string action)
        {
            var routeData = html.ViewContext.RouteData;

            var routeAction = (string)routeData.Values["action"];
            var routeControl = (string)routeData.Values["controller"];

            // both must match
            var returnActive = control == routeControl &&
                               action == routeAction;

            return returnActive ? "current-page" : "";
        }
    }


<li class="treeview @Html.IsActive("Home", "Index") ">
<a href="@Url.Action("Index", "Dashboard", new { Area = "" })"><i class="fa fa-dashboard"></i> <span>Dashboard</span></a>
</li>

MVC keep navigation active when redirect to "Add" page

3 Answers3