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

Question

嗨，

我的导航栏标签有问题

我希望的结果：

1. 默认情况下，请参阅"主页"选项卡类active
2. 单击另一个选项卡必须从已激活的<a>中删除active类(起点为"主页"选项卡(
3. 将相同的类active添加到我单击的选项卡中(这也意味着应用程序会重定向我(
4. 保留单击的选项卡active

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

1. 我看到"主页"选项卡默认设置为active
2. 单击任何选项卡都会删除类active，正如我上面提到的，并将相同的类添加到单击的选项卡中
3. 重定向发生，"主页"选项卡返回其默认状态(再次变为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类。

1. 添加新的HtmlHelper类

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" : "";
}
}

2. 转到您的_ViewImports.cshtml并添加此导入。如果没有这一点，它将无法识别我们将在步骤3中添加的帮助程序

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

3. 然后您的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类时，我们必须在使用的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">中添加路由