Bootstrap 4+ASP.NET Core导航栏active类页面加载后重置问题

问题原因 #

你遇到的这个问题很典型——当你点击导航链接时，客户端JS确实临时修改了active类，但页面会立即发起新的服务器请求，重新渲染整个_Layout.cshtml。而你在_Layout里默认给Home的<li>标记了active类，所以服务器返回新页面后，DOM会重置为初始状态，高亮自然回到Home项。

简单说：客户端JS的修改在页面刷新/跳转后不会保留，服务器渲染的初始HTML才是最终显示的内容。

解决方案（两种方式，推荐第一种给新手） #

方式1：服务器端判断（最可靠，无需依赖JS）

ASP.NET Core可以在视图中直接获取当前路由的控制器名称，动态给对应的导航项加上active类。修改你的_Layout.cshtml导航部分代码：

<ul class="nav navbar-nav mr-auto mt-2 mt-lg-0">
  <li class="nav-item @(ViewContext.RouteData.Values["Controller"].ToString() == "Home" ? "active" : "")">
    <a class="nav-link" asp-action="Index" asp-controller="Home">Home<span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item @(ViewContext.RouteData.Values["Controller"].ToString() == "aaaa" ? "active" : "")">
    <a class="nav-link" asp-action="Index" asp-controller="aaaa">Aaaa</a>
  </li>
  <li class="nav-item @(ViewContext.RouteData.Values["Controller"].ToString() == "bbbb" ? "active" : "")">
    <a class="nav-link" asp-action="Index" asp-controller="bbbb">Bbbb</a>
  </li>
  <li class="nav-item @(ViewContext.RouteData.Values["Controller"].ToString() == "cccc" ? "active" : "")">
    <a class="nav-link" asp-action="Index" asp-controller="cccc">Cccc</a>
  </li>
  <li class="nav-item @(ViewContext.RouteData.Values["Controller"].ToString() == "dddd" ? "active" : "")">
    <a class="nav-link" asp-action="Index" asp-controller="dddd">Dddd</a>
  </li>
</ul>

原理：ViewContext.RouteData.Values["Controller"]会获取当前请求的控制器名称，通过三元运算符判断，匹配的话就给<li>加上active类。这样服务器渲染页面时直接输出正确的高亮状态，完全不需要客户端JS干预。

方式2：客户端页面加载后修正（依赖JS）

如果你更倾向用JS解决，需要在页面加载完成后，根据当前URL判断控制器，再设置active类，而不是点击时修改（因为点击会触发页面跳转）。

步骤1：先把_Layout里Home项默认的active去掉：

<li class="nav-item">
  <a class="nav-link" asp-action="Index" asp-controller="Home">Home<span class="sr-only">(current)</span></a>
</li>

步骤2：修改你的JS代码，替换成页面加载时执行的逻辑：

$(document).ready(function() {
  // 从URL中提取控制器名称（假设URL格式为 /控制器/方法）
  var pathParts = window.location.pathname.split('/');
  // 如果根路径（/），默认是Home控制器
  var currentController = pathParts[1] || 'Home';
  
  // 找到对应控制器的导航链接，给父元素添加active类，移除其他项的active
  $('.navbar-nav a[asp-controller="' + currentController + '"]')
    .parent('li')
    .addClass('active')
    .siblings()
    .removeClass('active');
});

原理：页面加载完成后，JS读取当前URL的路径部分，识别出控制器名称，再找到对应的导航项设置active类，这样就能覆盖服务器渲染的初始状态。

小提示 #

• 服务器端方法更稳定，尤其是在禁用JS的浏览器环境下也能正常高亮；
• 如果你的项目有更复杂的路由（比如区域Area），服务器端方法只需要在判断时加上ViewContext.RouteData.Values["Area"]即可适配。

内容的提问来源于stack exchange，提问作者cjens19