ASP.NET中用Bootstrap 5按钮控件，回发/刷新后保留活动标签页的方法

由于你用<asp:Button>替代原生a标签实现Bootstrap 5标签页，要在回发或刷新后保留活动状态，核心思路是记录当前激活标签的ID，在页面加载时重新激活对应标签。以下是两种实用方案：

方案1：用ViewState保存（仅回发保留，刷新后重置） #

适合不需要跨页面刷新保留状态的场景，ViewState是ASP.NET内置的状态存储机制，仅在当前页面回发时有效。

步骤1：构建前端标签页结构 #

先写按钮组和标签内容，按钮需带上Bootstrap标签页的核心属性，同时添加隐藏字段存储当前激活标签ID：

<asp:HiddenField ID="hdnActiveTab" runat="server" />

<!-- 按钮组 -->
<div class="btn-group" role="group">
    <asp:Button ID="btnTab1" runat="server" CssClass="btn btn-primary active" Text="标签页1" 
        data-bs-target="#tab1" data-bs-toggle="tab" OnClick="btnTab1_Click" />
    <asp:Button ID="btnTab2" runat="server" CssClass="btn btn-secondary" Text="标签页2" 
        data-bs-target="#tab2" data-bs-toggle="tab" OnClick="btnTab2_Click" />
    <asp:Button ID="btnTab3" runat="server" CssClass="btn btn-secondary" Text="标签页3" 
        data-bs-target="#tab3" data-bs-toggle="tab" OnClick="btnTab3_Click" />
</div>

<!-- 标签内容区 -->
<div class="tab-content mt-3">
    <div class="tab-pane fade show active" id="tab1" role="tabpanel">
        标签页1内容
        <asp:Button ID="btnPostBack1" runat="server" Text="回发测试" OnClick="btnPostBack1_Click" />
    </div>
    <div class="tab-pane fade" id="tab2" role="tabpanel">
        标签页2内容
        <asp:Button ID="btnPostBack2" runat="server" Text="回发测试" OnClick="btnPostBack2_Click" />
    </div>
    <div class="tab-pane fade" id="tab3" role="tabpanel">
        标签页3内容
        <asp:Button ID="btnPostBack3" runat="server" Text="回发测试" OnClick="btnPostBack3_Click" />
    </div>
</div>

步骤2：监听标签切换，保存激活ID到隐藏字段 #

通过JS监听Bootstrap标签页的shown.bs.tab事件，把当前激活标签的ID存入隐藏字段：

<script>
document.addEventListener('DOMContentLoaded', function() {
    const tabs = document.querySelectorAll('[data-bs-toggle="tab"]');
    tabs.forEach(tab => {
        tab.addEventListener('shown.bs.tab', function(e) {
            // 提取标签ID（去掉开头的#）
            const activeTabId = e.target.getAttribute('data-bs-target').slice(1);
            document.getElementById('<%= hdnActiveTab.ClientID %>').value = activeTabId;
        });
    });
});
</script>

步骤3：后端回发时恢复状态 #

在Page_Load事件中读取隐藏字段的值，重新设置按钮样式和激活标签：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack) return;
    
    var activeTabId = hdnActiveTab.Value;
    if (string.IsNullOrEmpty(activeTabId)) activeTabId = "tab1";
    
    SetActiveTab(activeTabId);
}

private void SetActiveTab(string tabId)
{
    // 重置所有按钮样式
    btnTab1.CssClass = "btn btn-secondary";
    btnTab2.CssClass = "btn btn-secondary";
    btnTab3.CssClass = "btn btn-secondary";
    
    // 设置当前按钮为激活样式
    switch (tabId)
    {
        case "tab1": btnTab1.CssClass = "btn btn-primary active"; break;
        case "tab2": btnTab2.CssClass = "btn btn-primary active"; break;
        case "tab3": btnTab3.CssClass = "btn btn-primary active"; break;
    }
    
    // 通过JS强制激活对应标签（回发后页面重新渲染，需手动触发）
    Page.ClientScript.RegisterStartupScript(GetType(), "ActivateTab",
        $"new bootstrap.Tab(document.querySelector('[data-bs-target=\"#{tabId}\"]')).show();", true);
}

// 按钮点击事件（按需添加业务逻辑）
protected void btnTab1_Click(object sender, EventArgs e) { /* 自定义逻辑 */ }
protected void btnPostBack1_Click(object sender, EventArgs e) { /* 回发逻辑 */ }

方案2：用Cookie保存（回发+刷新均保留） #

如果需要刷新页面后仍保留状态，改用Cookie存储激活标签ID，Cookie会保存在客户端浏览器中。

修改后端Page_Load逻辑 #

仅需要调整后端状态读取和存储的部分，前端代码和方案1完全一致：

protected void Page_Load(object sender, EventArgs e)
{
    string activeTabId = "tab1"; // 默认激活第一个标签
    
    if (!IsPostBack)
    {
        // 首次加载时读取Cookie
        if (Request.Cookies["ActiveTab"] != null)
        {
            activeTabId = Request.Cookies["ActiveTab"].Value;
        }
    }
    else
    {
        // 回发时读取隐藏字段的值
        activeTabId = hdnActiveTab.Value;
        if (!string.IsNullOrEmpty(activeTabId))
        {
            // 更新Cookie，设置有效期为7天
            var cookie = new HttpCookie("ActiveTab", activeTabId)
            {
                Expires = DateTime.Now.AddDays(7),
                HttpOnly = true // 提升安全性
            };
            Response.Cookies.Add(cookie);
        }
    }
    
    SetActiveTab(activeTabId);
}

// SetActiveTab方法和方案1完全一致，无需修改
private void SetActiveTab(string tabId) { /* 同方案1代码 */ }

关键注意点 #

• 按钮必须保留data-bs-toggle="tab"和data-bs-target属性，这是Bootstrap 5标签页正常工作的核心。
• 回发后必须通过JS调用bootstrap.Tab.show()，因为页面重新渲染后，Bootstrap不会自动恢复之前的激活状态。
• 若需用户登录后跨页面保留状态，可把Cookie替换为Session，逻辑类似，仅存储位置不同。

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