Okay, using the bootstrap tabs, as described in
http://getbootstrap.com/javascript/#tabs[
^], You can put a different form with a different target controller/action on each form. That way each form will target a different model. Your easiest route is to create a partial view for each edit model action, and use that. Please bear with me, it's been awhile since I've done razor:
<div>
<!--
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#first" aria-controls="first" role="tab" data-toggle="tab">First</a></li>
<li role="presentation"><a href="#second" aria-controls="second" role="tab" data-toggle="tab">Second</a></li>
</ul>
<!--
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="first">
@Html.RenderAction("GetMyFirstForm","MyController)
</div>
<div role="tabpanel" class="tab-pane" id="second">
@Html.RenderAction("GetMySecondForm","MyController)
</div>
</div>
</div>
Form page, form section example:
@model MyNamespace.FirstModel
<div>
@using(Html.BeginForm("EditMyFirstModel", "MyController", FormMethod.Post,
new { enctype = "multipart/form-data" }))
{
<!--
<input class="btn btn-default" type="submit" value="Submit" />
}
</div>