ASP.NET MVC中根据Model值控制Tab标签页激活状态的实现方法

在ASP.NET MVC场景下，完全可以直接通过Razor语法在服务端渲染时动态控制标签页的激活状态，不需要额外编写JavaScript，这种方式更高效且逻辑直接。

修改后的Razor代码示例 #

<ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
    <li role="presentation" class="@(Model.CurrentId == 1 ? "active" : "")">
        <a href="#tab_content1" id="home-tab" role="tab" data-toggle="tab" aria-expanded="@(Model.CurrentId == 1 ? "true" : "false")">Step 01</a>
    </li>
    <li role="presentation" class="@(Model.CurrentId == 2 ? "active" : "")">
        <a href="#tab_content2" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="@(Model.CurrentId == 2 ? "true" : "false")">Step 02</a>
    </li>
</ul>

页面渲染完成后，对应CurrentId的标签页会直接处于激活状态，无需客户端脚本介入。

特殊场景下的JavaScript实现方案 #

如果因为业务需求必须用客户端脚本控制，可参考以下示例（依赖jQuery，因为Bootstrap Tab组件通常基于jQuery）：

$(function() {
    // 直接通过Razor注入Model的值
    const currentId = @Model.CurrentId;

    // 重置所有标签页状态
    $('#myTab li').removeClass('active');
    $('#myTab a').attr('aria-expanded', 'false');
    $('.tab-content .tab-pane').removeClass('active');

    // 根据CurrentId激活对应标签及内容面板
    if (currentId === 1) {
        $('#myTab li:first').addClass('active');
        $('#home-tab').attr('aria-expanded', 'true');
        $('#tab_content1').addClass('active');
    } else if (currentId === 2) {
        $('#myTab li:eq(1)').addClass('active');
        $('#profile-tab').attr('aria-expanded', 'true');
        $('#tab_content2').addClass('active');
    }
});

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