asp.net mvc - MVC Bootstrap Tabs w/Partial Views & Multiple Models -

i having trouble setting view bootstrap tabs, , each tab have partial view containing grid view along other options.

i made view model contain models of both grids pass:

public class gridmodel {     public list<gridrecurringtemplate> gridrecurringtemplates { get; set; }     public list<gridspecialtemplate> gridspecialtemplates { get; set; } }     

now in index containing tabs load gridmodel:

@model business.viewmodels.gridmodel  @{ viewbag.title = "index"; layout = "~/views/shared/_mainlayout.cshtml"; }   <div class="panel panel-primary">     <ul class="nav nav-tabs" role="tabpanel">     <li class="active"><a href="#recurring" data-toggle="tab">recurring</a>              </li>     <li><a href="#special" data-toggle="tab">special</a></li> </ul>  <div id="tabcontent" class="tab-content">      @* recurring tab*@     <div class="tab-pane fade active in" id="recurring">         @html.partial("_recurringtab", model.gridrecurringtemplates)     </div>      @* special tab*@     <div class="tab-pane fade" id="special">         @html.partial("_specialtab", model.gridspecialtemplates)     </div>  </div> 

what adding top of view each partial view? , handling @html.partial view correctly above passing model.gridrecurringtemplates or model.gridspecialtemplates ?

i see references ajax when looking answers tabs multiple models , views, new mvc , web together, haven't used before.

here controller passing viewmodel index

    // get: scheduletemplate     public actionresult index()     {         var model = new gridmodel();         return view(model);      } 

to top of each partial view should add:

@model list<business.viewmodels.gridrecurringtemplate> - _recurringtab

@model list<business.viewmodels.gridspecialtemplate> - _specialtab

it follows viewmodel.

you find refferences ajax. may need if want load partial view when tab opens. should use ajax call on tab selected event.

but see pass full model main view , render on partial (this 1 shot server).