title: MVC Tabs and Partial Views
body: <p>Im quite new to MVC and have this huge application which requires using tabs and partial views . I have a ViewModel whose fields are lists of my EF classes. Im passing this view model class (ProjInfoVM) into my ProjInfo View. The view has 3 tabs which are form representing each of the EF Classes- they all require to be posted back for submission. <strong>My first challenge</strong> is getting the forms to display{ I already created the 3 strongly typed partial views} but dont know how to display them as i keep getting the error :
  The model item passed into the dictionary is of type 'SMS2.Models.ProjectInfoVM', but this dictionary requires a model item of type 'SMS2.Models.ProjResc' 
  <strong>My Second Challenge</strong> is how to post the individual forms back to the controller - here i have no idea on how to achieve this... I need help</p>
  
  <p>Below is my code :</p>
  
  <p>ProjInfoVM.cs</p>
  
  <pre><code>public partial class ProjectInfoVM
      {
          public ProjCourse ProjCourse { get; set; }
          public ProjDocument ProjDocuments { get; set; }
          public ProjResc ProjRescs { get; set; }
      }
  </code></pre>
  
  <p>ProjResc Partial View</p>
  
  <pre><code>@model SMS2.Models.ProjResc
  
      @using (Html.BeginForm()) {
          @Html.AntiForgeryToken()
          @Html.ValidationSummary(true)
  
          &lt;fieldset&gt;
              &lt;legend&gt;ProjResc&lt;/legend&gt;
  
              &lt;div class="editor-label"&gt;
                  @Html.LabelFor(model =&gt; model.RescId)
              &lt;/div&gt;
              &lt;div class="editor-field"&gt;
                  @Html.EditorFor(model =&gt; model.RescId)
                  @Html.ValidationMessageFor(model =&gt; model.RescId)
              &lt;/div&gt;
      .....
              &lt;p&gt;
                  &lt;input type="submit" value="Create" /&gt;
              &lt;/p&gt;
          &lt;/fieldset&gt;
      }
  
      &lt;div&gt;
          @Html.ActionLink("Back to List", "Index")
      &lt;/div&gt;
  </code></pre>
  
  <p>.... Same format applies to the remaining 2 Partial{_ProjDoc and _ProjCourses}</p>
  
  <p>ProjResc.cs {Same applies to the other two classes}</p>
  
  <pre><code> public partial class ProjResc
      {
          public int RescId { get; set; }
          public int ProjectId { get; set; }
          public Nullable&lt;int&gt; SponsorId { get; set; }
          public decimal StipendAmt { get; set; }
          public string StipendFreq { get; set; }
      }
  </code></pre>
  
  <p>Now I have my ProjInfo Controller with Action ProjInfo as below :</p>
  
  <pre><code> public ActionResult ProjInfo()
          {
  
              ProjectInfoVM vm = new ProjectInfoVM();
             ...Populate vm contents here....           
  
              return PartialView(vm);
          }
  </code></pre>
  
  <p>and my ProjInfo View as below...</p>
  
  <pre><code>@model SMS2.Models.ProjectInfoVM
  
  @{
      ViewBag.Title = "ProjInfo";
  }
      &lt;div class="panel panel-default tabs"&gt;
                              &lt;ul class="nav nav-tabs" role="tablist"&gt;
                                  &lt;li class="active"&gt;&lt;a href="#tab-first" role="tab" data-toggle="tab"&gt;Project Resources&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#tab-second" role="tab" data-toggle="tab"&gt;Project Restrictions&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#tab-third" role="tab" data-toggle="tab"&gt;Project Documents&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#tab-four" role="tab" data-toggle="tab"&gt;Project Courses&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                              &lt;div class="panel-body tab-content"&gt;
                                  &lt;div class="tab-pane active" id="tab-first"&gt;
  
                                      &lt;h2&gt;Partial View content  : @Model.ProjCourse.CourseName&lt;/h2&gt;
  
                                     @Html.Partial("_ProjCourse", Model.ProjCourse)
                                                                  &lt;/div&gt;
                                  &lt;div class="tab-pane" id="tab-second"&gt;
  
                                      @Html.Partial("_ProjResc", Model.ProjResc)
  
                                  &lt;/div&gt;.......
  </code></pre>
  
  <p>I keep getting this error..</p>
  
  <pre><code>The model item passed into the dictionary is of type 'SMS2.Models.ProjectInfoVM', but this dictionary requires a model item of type 'SMS2.Models.ProjResc'
  </code></pre>
  
  <p>Can someone shed light into where im missing it alltogether...Please</p>