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

问题描述

因此，我有一个ASP.Net MVC 5应用程序.在那一页中有四个菜单项.当页面加载时，默认情况下会选择第一个菜单项(因此，页面加载后应立即突出显示该菜单项).现在，一旦用户单击任何其他菜单，该其他菜单应处于突出显示状态，以便用户知道他当前在哪个菜单上.以下是我的尝试:

So, I have one ASP.Net MVC 5 application. In that one of page hasfour menu items. When page loads first menu item is selected by default (so it should be highlighted as soon as the page loads). And now as soon as user clicks on any other menu, that other menu should be in highlighted stage, so that user knows which menu he is currently on. Below is my attempt:

我的想法:

a.在ul标签上添加click事件.

a. add a click event on the ul tag.

b.单击后，在ul标签中找到活动"类并将其删除.

b. when clicked find "active" class inside ul tag and remove it.

c.现在将活动类添加到click事件的源中(这意味着用户单击了li标签).

c. now add active class to the source of click event (which means the li tag on which user clicked).

问题:

我的尝试

P.S:这是部分视图，并且所有重定向都会加载该部分视图刷新.

P.S: This is a partial View, And all redirects will load this partial view 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>

编辑1

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

So the problem is as the page gets redirected. The active tag again gets appened to the first menu item when entire DOM gets reloaded because all the landing pages use the same partial view.

推荐答案

每次单击链接时，它都会进行页面重定向，并且与jQuery所做的更改无关紧要，它始终会提取部分内容.视图，在此局部视图中，您在第一个链接上有活动的类，这就是为什么它总是突出显示第一个链接的原因.

Everytime you click on a link, it does a page redirect, and it doesn't matter what changes you've made with jQuery, it always fetch this partial view, and in this partial view, you have active class on the first link, that is why it always highlights the first link.

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

What you have to do is write an HtmlHelper that will add the class "active" to current link on each page load. Create a folder called Helpers under your project and add a custom HtmlHelper class.

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>

您可能不需要区域，这就是为什么您可以将其保留为空白的原因，以防万一.

You might not need the area, that is why you can leave it blank, i put it in here just in case.

这篇关于在ASP.Net MVC 5应用程序中访问页面时，如何保持活动菜单项突出显示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！