Отправить различные формы вкладки начальной загрузки

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

Поместите ваши формы внутри 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>