如何保持选项卡处于活动状态？ ASP.NET 核心剃刀页面

Question

你好，

我在导航栏中的选项卡有问题。

我希望的结果：

默认情况下，请参阅 "Home" 选项卡 class active
单击另一个选项卡必须从已经激活的 <a> 中删除 active class（在起点是 "Home" 选项卡）
将相同的 class active 添加到我单击的选项卡（这也意味着应用会重定向我）
保留点击的选项卡active

到目前为止我得到了什么：

我看到 "Home" 选项卡默认设置为 active
单击任何选项卡会删除我上面提到的 class active，并将相同的 class 添加到单击的选项卡
重定向发生并且 "Home" 选项卡 returns 其默认状态（再次变为 active）

我在下面分享我的代码：

HTML

<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse" id="navigation">
            <ul class="navbar-nav flex-grow-1">
                <li class="nav-item">
                    <a class="nav-link active" id="home" asp-area="" asp-page="/home/Index">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="declarations" asp-area="" asp-page="/declarations/Index">Declarations</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="topics" asp-area="" asp-page="/topics/Index">List of Topics</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="contacts" asp-area="" asp-page="/contacts/Index">Contacts</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="faq" asp-area="" asp-page="/faq/Index">FAQ</a>
                </li>
            </ul>
        </div>

jQuery

  $("#navigation .navbar-nav a").click(function() {
    $("#navigation .navbar-nav").find("a.active").removeClass("active");
    $(this).addClass("active");
    localStorage.className = "active";
});

$(document).ready(function() {
    stayActive();
});

function stayActive() {
    $(this).children().addClass(localStorage.className);
}

Answer 1

由于您使用的是 Razor 页面，每次用户单击选项卡时，页面都会在服务器上再次呈现，然后发回。所以我建议我们在服务器端根据当前路由设置 active class

添加一个新的HtmlHelperclass

public static class HtmlHelperExtensions
{
    public static string ActiveClass(this IHtmlHelper htmlHelper, string route)
    {
        var routeData = htmlHelper.ViewContext.RouteData;

        var pageRoute = routeData.Values["page"].ToString();

        return route == pageRoute ? "active" : "";
    }
}

转到您的 _ViewImports.cshtml 并添加此导入。否则，它将无法识别我们将要在步骤 3 中添加的助手。

@using <Namespace of the class you wrote in step 1, if not already here>

那么你的 cshtml 将是

<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse" id="navigation">
    <ul class="navbar-nav flex-grow-1">
        <li class="nav-item">
            <a class="nav-link @Html.ActiveClass("/home/Index")" id="home" asp-area="" asp-page="/home/Index">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link @Html.ActiveClass("/declarations/Index")" id="declarations" asp-area="" asp-page="/declarations/Index">Declarations</a>
        </li>

        ...Same for 3 other tabs, make sure that the route you pass in ActiveClass method
        ...must be the same as the route in asp-page
        ...If you're afraid of duplication, make some static class to store these routes as constants
    </ul>
</div>

Answer 2

除了@Nam Le 的回答，我建议完整的解决方案。

我找到了正确使用异常的方法。

首先，当我们根据当前路由在服务器端设置 active class 时，我们必须在我们使用的 cshtml 中添加 asp-route-routeId="{routeId:int}"。

其次，使用此 jQuery 代码：

jQuery

   $("#navigation .navbar-nav a").click(function() {
    $("#navigation .navbar-nav").find("a.active").removeClass("active");
    $(this).addClass("active");
    localStorage.className = "active";
});

$(document).ready(function() {
    stayActive();
});

function stayActive() {
    $(this).addClass(localStorage.className);
}

最后一步是将 launchSetting.json 文件中的 "launchUrl": "route/routeId" 设置为运行具有特定路由的应用程序。此操作使我们的 HtmlHelper 扩展做出反应并将 active 状态添加到我们想要的选项卡。

希望我建议的解决方案没有任何严重错误:)

UPD：不要忘记在 cshtml @page "/route/routeId"

中添加路由

如何保持选项卡处于活动状态？ ASP.NET 核心剃刀页面

How to keep the tab active? ASP.NET Core Razor Pages

navbar

asp.net-core

razor-pages

HTML

jQuery

jQuery