asp.net-mvc-5 - 重定向到“添加”页面时，MVC 保持导航活动

Question

我使用“Gentelella Alela”模板创建了一些页面，当我创建页面时，它能够根据控制器和操作名称激活导航（使用“当前页面”类）：

我在 RoleController 中添加“添加”操作，当我重定向到“/Admin/Role/Add”时，导航活动消失了：

知道我应该如何使它工作吗？

触发按钮是这样编码的：

_Layout.cshtml 导航代码：

Answer 1

希望这对你有用。

<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>

Answer 2

一种简单的方法是使用 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}");
        }

您可以在执行操作之前调用活动页面。在此之后，您需要在布局页面上检查此 ViewData。

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

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

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

在编写脚本之前，您的 ul 和 li 元素必须包含特定名称才能识别它。您需要使用 BaseController ActivePage 方法 ControlleName-ActionName 中给出的格式。

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

Answer 3

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>