在.NET MVC中为Bootstrap 5 nav-tabs的ActionLink生成a标签添加激活状态

方案一：视图内直接判断路由状态（无需自定义助手） #

直接在视图中通过ViewContext.RouteData获取当前控制器和动作方法，动态给@Html.ActionLink添加激活类和aria-current属性：

<ul class="nav nav-tabs">
    <li class="nav-item">
        @{
            // 判断当前是否为Home/Index页面
            bool isActive = ViewContext.RouteData.Values["Action"].ToString() == "Index" 
                          && ViewContext.RouteData.Values["Controller"].ToString() == "Home";
            // 构建HTML属性字典
            var linkAttrs = new Dictionary<string, object>
            {
                { "class", isActive ? "nav-link active" : "nav-link" }
            };
            if (isActive) linkAttrs.Add("aria-current", "page");
        }
        @Html.ActionLink("首页", "Index", "Home", null, linkAttrs)
    </li>
    <li class="nav-item">
        @{
            bool isAboutActive = ViewContext.RouteData.Values["Action"].ToString() == "About" 
                              && ViewContext.RouteData.Values["Controller"].ToString() == "Home";
            var aboutAttrs = new Dictionary<string, object>
            {
                { "class", isAboutActive ? "nav-link active" : "nav-link" }
            };
            if (isAboutActive) aboutAttrs.Add("aria-current", "page");
        }
        @Html.ActionLink("关于", "About", "Home", null, aboutAttrs)
    </li>
</ul>

方案二：自定义HTML助手（简化重复代码） #

如果标签页较多，自定义扩展方法可避免重复的路由判断逻辑：

1. 在项目中创建静态扩展类（比如HtmlHelperExtensions.cs）：

using System.Web.Mvc;
using System.Web.Routing;

public static class HtmlHelperExtensions
{
    public static MvcHtmlString TabActionLink(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName)
    {
        var routeData = htmlHelper.ViewContext.RouteData;
        string currentAction = routeData.Values["Action"].ToString();
        string currentController = routeData.Values["Controller"].ToString();

        // 初始化属性，默认添加nav-link类
        var htmlAttrs = new Dictionary<string, object>
        {
            { "class", "nav-link" }
        };

        // 判断是否为当前激活页
        if (actionName.Equals(currentAction, StringComparison.OrdinalIgnoreCase) 
            && controllerName.Equals(currentController, StringComparison.OrdinalIgnoreCase))
        {
            htmlAttrs["class"] = "nav-link active";
            htmlAttrs["aria-current"] = "page";
        }

        return htmlHelper.ActionLink(linkText, actionName, controllerName, null, htmlAttrs);
    }
}

2. 在视图中直接使用自定义助手：

<ul class="nav nav-tabs">
    <li class="nav-item">
        @Html.TabActionLink("首页", "Index", "Home")
    </li>
    <li class="nav-item">
        @Html.TabActionLink("关于", "About", "Home")
    </li>
    <li class="nav-item">
        @Html.TabActionLink("联系我们", "Contact", "Home")
    </li>
</ul>

补充说明 #

• 以上两种方案均为服务器端渲染时直接生成激活状态，Bootstrap 5原生JS会自动识别并管理标签页切换时的状态更新，无需额外编写JS代码。
• 若项目使用区域(Area)，可在扩展方法中加入routeData.Values["Area"]的判断，适配多区域场景。
• aria-current="page"是Bootstrap推荐的语义化属性，用于标识当前活跃的导航项，符合无障碍访问标准。

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