我想在ASP.NET Core MVC中添加带有NAV-Link的活动类

Question

我需要与.nav-link添加一个活跃的类

<ul class="sidebar-nav" id="sidebar-nav">
 <li class="nav-item">
  <a asp-area="DemoArea" class="nav-link" asp-controller="Dashboard" asp-action="Index">Dashboard</a>
 </li>
</ul>

Answer 1

您可以使用jQuery来做到这一点，而不是最好的答案，但也有效。您可以根据需要添加菜单级别...请参阅下面的代码：

<script>
        $(document).ready(function () {
           var currentUrl = document.location.pathname;

            var elementLevelZero = $('.nav-main a[href="' + currentUrl + '"]');
            $(elementLevelZero).addClass('active');

            var elementLevelZeroList = $(elementLevelZero).closest('ul');

            var elementLevelOne = $(elementLevelZeroList).prev("a");
            $(elementLevelOne).addClass('active');

            var elementLevelOneList = $($(elementLevelOne).parent()).closest('ul');

            var elementLevelTwo = $(elementLevelOneList).prev("a");
            $(elementLevelTwo).addClass('active'); 

            var elementLevelTwoList = $($(elementLevelTwo).parent()).closest('ul');

            var elementLevelThree = $(elementLevelTwoList).prev("a");
            $(elementLevelThree).addClass('active'); 
        });
    </script>

您可以使用.east函数在列表中的每个父项目上循环。

Answer 2

这是一个动态添加类的简单演示，按ViewBag值：

<ul class="sidebar-nav" id="sidebar-nav">
 <li class="nav-item">
  <a asp-area="DemoArea" class="@(ViewBag.Class==true?"nav-link":"")" asp-controller="Dashboard" asp-action="Index">Dashboard</a>
 </li>
</ul>

后端：

public async Task<IActionResult> Index()
{
    ViewBag.Class = true;
    return View();
}

Answer 3

我已经使用了静态类菜单螺旋桨和静态方法makeActiveClass，以及当传递值和routedata值匹配时，我已经传递了控制器名称和操作方法名称，然后它将返回活动类，而其他为null。

public static class MenuStateHelper
{
    public static string MakeActiveClass(this IUrlHelper urlHelper, string controller, string action)
    {
        try
        {
            string result = "active";

            if (!String.IsNullOrEmpty(Convert.ToString(urlHelper.ActionContext.RouteData.DataTokens["area"])))
            {
                string areaName = urlHelper.ActionContext.RouteData.DataTokens["area"].ToString();
            }

            if (urlHelper.ActionContext.RouteData.Values != null)
            {
                string controllerName = urlHelper.ActionContext.RouteData.Values["controller"].ToString();
                string methodName = urlHelper.ActionContext.RouteData.Values["action"].ToString();
                if (string.IsNullOrEmpty(controllerName)) return null;
                if (controllerName.Equals(controller, StringComparison.OrdinalIgnoreCase))
                {
                    if (methodName != null && methodName.Equals(action, StringComparison.OrdinalIgnoreCase))
                    {
                        return result;
                    }
                }
            }

            return null;
        }
        catch (Exception)
        {
            return null;
        }

    }
}

我已经称 makeactiveclass 锚标签助手

<a asp-area="@menu.Area" asp-controller="@menu.ControllerName" asp-action="@menu.ActionMethod" class="nav-link @Url.MakeActiveClass(menu.ControllerName, menu.ActionMethod)">
    <i class="far fa-circle nav-icon"></i>
    <p>
        @menu.MenuName
    </p>
  </a>