ASP.NET Core MVC中为nav-link元素添加active类的实现方法

方案1：自定义Tag Helper（推荐，可复用） #

该方案一次配置后所有导航项自动适配，不需要重复写判断逻辑，适合侧边栏、顶部导航等多导航项场景。

• 首先在项目中新建Tag Helper类，命名为ActiveNavTagHelper.cs，代码如下：

using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.TagHelpers;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.AspNetCore.Razor.TagHelpers;

namespace YourProjectName.TagHelpers
{
    [HtmlTargetElement("a", Attributes = "asp-controller, asp-action")]
    public class ActiveNavTagHelper : TagHelper
    {
        [ViewContext]
        public ViewContext ViewContext { get; set; } = null!;

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            // 获取当前路由的area、controller、action值
            var currentArea = ViewContext.RouteData.Values["area"]?.ToString() ?? string.Empty;
            var currentController = ViewContext.RouteData.Values["controller"]?.ToString() ?? string.Empty;
            var currentAction = ViewContext.RouteData.Values["action"]?.ToString() ?? string.Empty;

            // 获取a标签上声明的目标路由值
            var targetArea = context.AllAttributes["asp-area"]?.Value?.ToString() ?? string.Empty;
            var targetController = context.AllAttributes["asp-controller"].Value.ToString();
            var targetAction = context.AllAttributes["asp-action"].Value.ToString();

            // 路由匹配校验
            if (currentArea.Equals(targetArea, StringComparison.OrdinalIgnoreCase)
                && currentController.Equals(targetController, StringComparison.OrdinalIgnoreCase)
                && currentAction.Equals(targetAction, StringComparison.OrdinalIgnoreCase))
            {
                // 追加active类，不覆盖原有class属性
                var existingClasses = output.Attributes["class"]?.Value?.ToString() ?? string.Empty;
                output.Attributes.SetAttribute("class", $"{existingClasses} active".Trim());
            }
        }
    }
}

• 注册Tag Helper：打开Views/_ViewImports.cshtml文件，添加如下配置，将YourProjectName替换为你自己的项目根命名空间即可：

@addTagHelper *, YourProjectName

• 原有导航代码不需要任何修改，Tag Helper会自动识别所有带asp-controller、asp-action属性的a标签，匹配当前路由后自动追加active类。

方案2：视图内联判断（适合导航项少的简单场景） #

如果不想额外编写Tag Helper，可以直接在a标签的class属性内通过三元表达式判断当前路由，手动追加active类，修改后的导航代码如下：

<ul class="sidebar-nav" id="sidebar-nav">
 <li class="nav-item">
  <a asp-area="DemoArea" 
     class="nav-link @(
         ViewContext.RouteData.Values["area"]?.ToString() == "DemoArea"
         && ViewContext.RouteData.Values["controller"]?.ToString() == "Dashboard"
         && ViewContext.RouteData.Values["action"]?.ToString() == "Index"
         ? "active" : "")" 
     asp-controller="Dashboard" 
     asp-action="Index">Dashboard</a>
 </li>
</ul>

注意事项 #

• 匹配逻辑可根据需求灵活调整：如果需要同一个控制器下的所有页面都高亮对应导航项，去掉action值的匹配判断即可；如果是一级导航对应多个子控制器，也可以调整规则只校验area参数
• 记得在全局样式中添加.nav-link.active的高亮样式，比如设置背景色、文字色、左侧标识边栏等，否则无法看到选中效果
• 判断路由值时统一做空值处理，避免无区域的路由匹配时出现空引用错误

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