如何实现Bootstrap选项卡中PartialView表单提交后停留当前选项卡

• 现有代码未遵循Bootstrap Tabs的标准DOM规范：缺少选项卡导航栏、内容面板未配置对应ID与关联属性、没有激活态类名，Tabs组件本身无法正常工作
• 分部视图内的表单默认触发整页回发，回发后没有记录当前激活的选项卡标识，Bootstrap Tabs默认加载第一个选项卡，自然无法停留在操作页

1. 修正Tabs基础DOM结构 #

将Tabpenl.cshtml替换为符合Bootstrap 5规范的Tabs结构，给每个选项卡导航、内容面板配置唯一ID与关联属性（如果用Bootstrap 4，把所有data-bs-前缀替换为data-即可）：

@* Tabpenl.cshtml *@
<div class="container">
    <div class="row">
        <div class="col-xl-12">
            @* 选项卡导航栏 *@
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="tab1-tab" data-bs-toggle="tab" data-bs-target="#tab1" type="button" role="tab">First tab</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab2-tab" data-bs-toggle="tab" data-bs-target="#tab2" type="button" role="tab">Second tab</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab3-tab" data-bs-toggle="tab" data-bs-target="#tab3" type="button" role="tab">Third tab</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab4-tab" data-bs-toggle="tab" data-bs-target="#tab4" type="button" role="tab">Fourth tab</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab5-tab" data-bs-toggle="tab" data-bs-target="#tab5" type="button" role="tab">Firth tab</button>
                </li>
            </ul>

            @* 选项卡内容区 *@
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="tab1" role="tabpanel">
                    @Html.Partial("_Example1")
                </div>
                <div class="tab-pane fade" id="tab2" role="tabpanel">
                    @Html.Partial("_Example2")
                </div>
                <div class="tab-pane fade" id="tab3" role="tabpanel">
                    @Html.Partial("_Example3")
                </div>
                <div class="tab-pane fade" id="tab4" role="tabpanel">
                    @Html.Partial("_Example4")
                </div>
                <div class="tab-pane fade" id="tab5" role="tabpanel">
                    @Html.Partial("_Example5")
                </div>
            </div>
        </div>
    </div>
</div>

2. 增加选项卡状态持久化逻辑 #

在Tabpenl.cshtml底部添加如下JS代码，通过URL Hash存储当前激活的选项卡，无论是整页回发、验证失败重载还是手动刷新页面，都能自动定位到之前操作的选项卡：

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 页面加载时读取URL hash，激活对应选项卡
    const activeTabHash = window.location.hash;
    if (activeTabHash) {
        const triggerEl = document.querySelector(`button[data-bs-target="${activeTabHash}"]`);
        if (triggerEl) bootstrap.Tab.getOrCreateInstance(triggerEl).show();
    }

    // 切换选项卡时自动更新URL hash
    const tabEls = document.querySelectorAll('button[data-bs-toggle="tab"]');
    tabEls.forEach(tabEl => {
        tabEl.addEventListener('shown.bs.tab', function (event) {
            window.location.hash = event.target.getAttribute('data-bs-target');
        });
    });

    // 表单提交时自动携带当前hash，适配普通整页提交/服务端验证场景
    document.querySelectorAll('form').forEach(form => {
        form.addEventListener('submit', function() {
            if (window.location.hash) this.action += window.location.hash;
        });
    });
});
</script>

3. 补全分部视图的表单结构 #

你当前提供的_Example2.cshtml缺少外层<form>标签，补全后即可正常工作，示例如下：

@* _Example2.cshtml *@
<form method="post">
    <div class="form-group">
        <div class="form-row">
           <div class="col-md-8">
                <input type="text" asp-for="City" class="form-control" maxlength="50" placeholder="Add City Name" required>
           </div>      
           <div class="col-md-4">
                  <button id="btnSubmit" class="btn btn-warning btn-rounded btn-block" data-ftrans="slide" type="submit" style="height:50px; font-size:20px;">Submit</button>
           </div>
        </div>
    </div>
</form>

如果需要更流畅的交互体验，可以将表单提交改为AJAX模式，提交后只替换当前选项卡内的分部视图内容，不需要整页重载，这种场景下不需要额外处理选项卡状态，提交完成后自然停留在当前页。

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