ASP.NET Core MVC Layout页导航选中状态持久化方案咨询

核心逻辑：页面刷新后状态重置的本质原因是前端DOM修改不会持久化到服务端渲染的模板中，直接在服务端渲染阶段为匹配当前请求的导航项追加active类即可从根源解决问题，以下是可直接落地的实现方式：

方案1：布局页直接基于路由数据判断（零额外成本，首选） #

• 直接在共用layout中通过ViewContext.RouteData获取当前请求的控制器、Action、区域等路由信息，和导航项的目标路由做比对，匹配成功则输出active类，不需要写任何前端JS逻辑。
• 代码示例：

<!-- 侧边导航栏代码，直接写入共用布局页 -->
<ul class="side-nav">
    <li class="nav-item">
        <a class="nav-link @(ViewContext.RouteData.Values["Controller"]?.ToString() == "Dashboard" && ViewContext.RouteData.Values["Action"]?.ToString() == "Index" ? "active" : "")"
           asp-controller="Dashboard" asp-action="Index">
            Dashboard
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link @(ViewContext.RouteData.Values["Controller"]?.ToString() == "Layouts" ? "active" : "")"
           asp-controller="Layouts" asp-action="Index">
            Layouts
        </a>
    </li>
    <!-- 其余导航项按相同规则补充即可 -->
</ul>

• 适配规则：如果某个导航项对应整个控制器下的所有页面，仅判断控制器名匹配即可；如果是Area划分的模块，追加ViewContext.RouteData.Values["Area"]的匹配逻辑。

方案2：自定义Tag Helper封装（适合导航项多的中大型项目） #

• 把路由匹配、追加active类的逻辑封装为可复用的Tag Helper，避免每个导航项重复写三目判断代码，后续维护只需要改一处逻辑。
• 实现流程：
  • 新建自定义导航标签类，继承内置AnchorTagHelper，重写渲染方法，判断当前锚点目标路由和请求路由匹配时，自动给class属性追加active值
  • 在_ViewImports.cshtml中注册自定义Tag Helper
  • 布局页中直接使用封装后的导航标签即可，框架渲染时会自动处理高亮状态，不需要手动写判断逻辑

方案3：ViewData/ViewBag传值标记（适合特殊路由映射场景） #

• 如果存在跨控制器、跨区域的页面需要归属到同一个导航项下高亮，路由判断逻辑会比较复杂，可以在每个Action返回视图前，通过ViewBag传入当前需要高亮的导航项标识，布局页读取标识比对即可。
• 代码示例：
  控制器Action中赋值：

public IActionResult CustomPage()
{
    ViewBag.ActiveNav = "Layouts";
    return View();
}

布局页中判断：

<a class="nav-link @(ViewBag.ActiveNav?.ToString() == "Layouts" ? "active" : "")" 
   asp-controller="Layouts" asp-action="Index">
    Layouts
</a>

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