2

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

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

4

1 回答 1

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>
于 2015-03-15T19:08:00.523 回答