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

Question

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

我的想法：

a. 在 ul 标签上添加一个点击事件。

湾单击时在 ul 标签中找到“活动”类并将其删除。

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

问题：

选定/单击的菜单会突出显示一秒钟，然后自动突出显示第一个菜单。 因此，只要与新单击的菜单项对应的整个页面重新加载，第一个菜单项就会重新突出显示。

我的尝试

PS：这是一个局部视图，所有重定向都会重新加载这个局部视图。

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

编辑 1

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

Answer 1

每次单击链接时，它都会进行页面重定向，并且无论您使用 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>

您可能不需要该区域，这就是您可以将其留空的原因，我把它放在这里以防万一。

Answer 2

尝试将其添加到您的共享视图中。 通常是“_Layout”。

@{ 
    string pageUrl = Request.Url.PathAndQuery.ToString();
}

并且不是从 html 标记中添加“活动”类，而是添加将检查 pageUrl 的条件语句，就像下面的代码一样。

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

Answer 3

您必须添加文档就绪功能。

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

Answer 4

试试这个示例。 它对我有用。 :) :)

<script>
        $(document).ready(function(){
        $(window).load(function(){
            var x = window.location.href;
                $('ul a[href="'+x+'"]').each(function() {
                    if(x == window.location.href){
                        $('ul li').removeClass('active');
                        $(this).parent('li').addClass('active');
                    } 
                });
            });
        });
    </script>

Answer 5

我采用了不同的方法，利用我为每个部分视图使用加载脚本将数据加载到该视图上的 DataTables 的事实。

我首先为每个菜单项添加了一个“id”。

<ul class="nav navbar-nav">
    <li id="Index"><a asp-page="/Index">Reportables</a></li>
    <li id="TaskAssayExclusion"><a asp-page="/TaskAssayExclusion">Task Assay Exclusions</a></li>
    <li id="SpecimenSite"><a asp-page="/SpecimenSite">Specimen Site</a></li>
    <li id="SnomedCT"><a asp-page="/SnomedCT">Snomed CT</a></li>
    <li id="Loinc"><a asp-page="/Loinc">LOINC</a></li>
    <li id="Search"><a asp-page="/Search">Search Messages</a></li>
</ul>

在每个局部视图的底部，我都有一段 JavaScript，在该视图加载时执行。 索引页面的代码片段示例如下所示。

<script type="text/javascript">
    function partialIndexModelScript() {
        $('li#Index').addClass('menu_item_active');
        filterLoadComplete = false;
        selectLoadComplete = false;
        loadReportableResultData();
    }
</script>

在我的主要 JavaScript 文件中，靠近$(document).ready()函数的末尾，我使用“typeof”来执行相关的 JavaScript 代码段。

if (typeof partialIndexModelScript !== "undefined") partialIndexModelScript();
if (typeof partialSpecimenSiteModelScript !== "undefined") partialSpecimenSiteModelScript();
if (typeof partialNormalcyModelScript !== "undefined") partialNormalcyModelScript();
if (typeof partialSnomedCTModelScript !== "undefined") partialSnomedCTModelScript();
if (typeof partialLoincModelScript !== "undefined") partialLoincModelScript();
if (typeof partialTaskAssayExclusionModelScript !== "undefined") partialTaskAssayExclusionModelScript();
if (typeof partialSearchModelScript !== "undefined") partialSearchModelScript();

最后是几乎与 :hover CSS 相同的 CSS，除了
我已经包括了font-weight: bolder !important真正让所选菜单项脱颖而出。

.menu_item_active {
    color: #B8B7DA !important;
    background-color: #514689 !important;
    text-decoration: underline !important;
    font-weight: bolder !important;
}

最终结果：