Submit different forms bootstrap tab

Question

I want to submit different forms using bootstrap tab. I have partial views for each tab.

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

Now, when the page loads, it correctly renders the SaveStaff partial view. But when Experience tab is clicked it doesn't show the SaveExperience partial view as tabbed view, but beneath the SaveStaff.

Answer 1

Put your forms inside divs and not outside:

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