提交不同的表格 bootstrap 选项卡

Question

我想使用 bootstrap 选项卡提交不同的表单。我对每个选项卡都有部分视图。

<div role="tabpanel">
        <ul class="nav nav-tabs" role="tablist" id="myTab">             
            <li role="presentation" class="active"><a href="#staff" aria-controls="staff" role="tab" data-toggle="tab">Staff</a></li>
            <li role="presentation"><a href="#experience" aria-controls="experience" role="tab" data-toggle="tab">Experience</a></li>
        </ul>

            <div class="tab-content">
             @using (Ajax.BeginForm("SaveStaff", "StaffInformation", new AjaxOptions { UpdateTargetId = "staff" }, new { id = "form-staff" }))
             {
                <div role="tabpanel" class="tab-pane fade in active" id="staff">@Html.Partial("_SaveStaff")</div>
             }
             @using (Ajax.BeginForm("SaveExperience", "StaffInformation", new AjaxOptions { UpdateTargetId = "experience"}, new { id = " form-experience" }))
             {
                <div role="tabpanel" class="tab-pane fade" id="experience">@Html.Partial("_SaveExperience")</div>
             }
            </div>
    </div>

现在，当页面加载时，它会正确呈现 SaveStaff 部分视图。但是，当单击“体验”选项卡时，它不会将 SaveExperience 部分视图显示为选项卡式视图，而是显示在 SaveStaff 下方。

Answer 1

将表单放在 div 中而不是外部：

<div role="tabpanel">
        <ul class="nav nav-tabs" role="tablist" id="myTab">             
            <li role="presentation" class="active"><a href="#staff" aria-controls="staff" role="tab" data-toggle="tab">Staff</a></li>
            <li role="presentation"><a href="#experience" aria-controls="experience" role="tab" data-toggle="tab">Experience</a></li>
        </ul>

        <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade in active" id="staff">
               @using (Ajax.BeginForm("SaveStaff", "StaffInformation", new AjaxOptions{ UpdateTargetId = "staff" }, new { id = "form-staff" }))
               {
                  Html.Partial("_SaveStaff")
               }
            </div>
            <div role="tabpanel" class="tab-pane fade" id="experience"> 
                @using (Ajax.BeginForm("SaveExperience", "StaffInformation", new AjaxOptions { UpdateTargetId = "experience"}, new { id = " form-experience" }))
                {
                   Html.Partial("_SaveExperience")
                }
            </div>                 
        </div>
</div>

提交不同的表格 bootstrap 选项卡

Submit different forms bootstrap tab

asp.net-mvc

bootstrap-tabs