提交不同的表单引导选项卡

Question

我想使用引导选项卡提交不同的表单。我为每个选项卡提供部分视图。

<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

把你的表单放在divs里面，而不是外面：

<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>