访问 ASP.Net MVC 5 应用程序中的页面时如何保持活动菜单项突出显示？

因此，我有一个 ASP.Net MVC 5 应用程序。其中一页有四个菜单项。页面加载时，默认选择第一个菜单项（因此页面加载后应立即突出显示）。现在，一旦用户单击任何其他菜单，该其他菜单就应该处于突出显示阶段，以便用户知道他当前所在的菜单。以下是我的尝试：

我的想法：

A。在ul标签上添加点击事件。

b.单击后，在 ul 标记内找到“活动”类并将其删除。

C。现在将活动类添加到单击事件的源（这意味着用户单击的 li 标签）。

Issue:

所选/单击的菜单会突出显示一秒钟，然后 第一个菜单会自动突出显示。所以一旦整个 与新单击的菜单项对应的页面将重新加载第一个 菜单项重新突出显示。

我的尝试

P.S: 这是一个部分视图，所有重定向都会加载这个部分视图afresh.

@if (Request.IsAuthenticated)
{
    <ul style="list-style-type:none;">
        <li class="active setBtnMargin">
            <a href="@Url.Action("Index", "Resume")" class="btn btn-block">My Resume </a>
        </li>
        <li class="setBtnMargin">
            <a href="@Url.Action("Index", "CoverLetter")" class="btn btn-block">My Cover Letter </a>
        </li>
        <li class="setBtnMargin">
            <a href="@Url.Action("Index", "Home")" class="btn btn-block">My Account </a>
        </li>
        <li class="setBtnMargin">
            <a href="@Url.Action("Index", "Home")" class="btn  btn-block">Get Rewards </a>
        </li>
    </ul>
}

<script>
// ATTEMPT 1
    $("ul").on("click", "li", function () {
        $('ul li').removeAttr('active');
        $(this).addClass('active');
    });

// ATTEMPT 2
    //$("li").click(function () {
    //    //$("ul li").removeClass("active");
    //    $(this).addClass("active");
    //});
</script>

EDIT 1

所以问题是页面被重定向。当整个 DOM 重新加载时，活动标签再次被附加到第一个菜单项因为所有登陆页面都使用相同的部分视图.

每次您单击一个链接时，它都会进行页面重定向，并且无论您使用 jQuery 进行什么更改，它总是会获取此部分视图，并且在此部分视图中，您在第一个链接上有活动类，这就是为什么它总是突出显示第一个链接。

您所要做的就是编写一个 HtmlHelper，它将在每次页面加载时将“active”类添加到当前链接。在项目下创建一个名为 Helpers 的文件夹并添加自定义 HtmlHelper 类。

using System;
using System.Web.Mvc;

public static class ActiveMenuHelper
{
    public static MvcHtmlString MenuLink(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName, string areaName)
    {
        var currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action");
        var currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller");
        var currentArea = htmlHelper.ViewContext.RouteData.DataTokens["area"];

        var builder = new TagBuilder("li")
        {
            //InnerHtml = htmlHelper.ActionLink(linkText, actionName, controllerName).ToHtmlString()
            InnerHtml = "<a href=\"" + new UrlHelper(htmlHelper.ViewContext.RequestContext).Action(actionName, controllerName, new { area = areaName }).ToString() + "\">" + linkText + "</a>"
        };

        if (String.Equals(controllerName, currentController, StringComparison.CurrentCultureIgnoreCase) && String.Equals(actionName, currentAction, StringComparison.CurrentCultureIgnoreCase))
            builder.AddCssClass("active");

        return new MvcHtmlString(builder.ToString());
    }
}

然后在你的部分视图中：

@using YourProjectName.Helpers

<ul>
    @Html.MenuLink("Resume", "Index", "Resume", "" )
    @Html.MenuLink("Cover Letter", "Index", "CoverLetter", "" )
</ul>

您可能不需要area，这就是为什么你可以将其留空，我将其放在这里以防万一。