title: ASP .NET MVC 4 View containing two partial Views with a form in each
body: <p>In my MVC 4 application I have an Index View. In this View I have two div tags where a Partial view is rendered. There are two buttons that when clicked toggles between these two divs using jQuery. The Partial Views are strongly typed with its model each.</p>
  
  <p>Question:</p>
  
  <p>How do I pass the models to the partial views?
  How do I handle POST requests from the Partial views?
  In the POST action method(s) if ModelState is invalid how do I re-render the view that is aware of the ModelStae?</p>
  
  <p>Is Partial views the way to go in this scenario?
  Are there better ways to achieve this with MVC 4?</p>
  
  <p>Any help is appreciated.</p>
  
  <p>Here is what I've tried without any success:</p>
  
  <p><strong>Index.cshtml</strong></p>
  
  <pre><code>&lt;div id="token"&gt;
     &lt;!-- insert Token based PartialView --&gt;
  @{
      //Html.RenderPartial("_TokenPartial");
      Html.RenderAction("TokenBased");
  }
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;div id="credentials"&gt;
    &lt;!-- insert Credentials based PartialView --&gt;
  @{
     //Html.RenderPartial("_CredentialPartial");
     Html.RenderAction("CredentialsBased");
  }
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried with <code>HTML.RenderPartial("_partial")</code> but couldn't specify the the model the partial View is based on. Then I tried with <code>Html.RenderAction("TokenBased")</code> and in this action returns the partial view with an instance of the model for this View:</p>
  
  <p><strong>CredentialController.cs</strong></p>
  
  <pre><code>    public ActionResult TokenBased(string token)
      {
          ...
  
          return View("_TokenPartial", new TokenModel);
      }
  </code></pre>
  
  <p>And here is the partial View:</p>
  
  <p><strong>TokenPartial.cshtml</strong></p>
  
  <pre><code>    @model TokenModel
  
      @using (Html.BeginForm("CreateAgreementToken", "Credential"))
      {
          &lt;div class="formscontent"&gt;
              @Html.LabelFor(x =&gt; x.Token) &lt;br /&gt;
              @Html.TextBoxFor(x =&gt; x.Token, new {size = "44" })
              @Html.ValidationMessageFor(x =&gt; x.Token)
              &lt;br /&gt;
              &lt;br /&gt;
  
              @Html.LabelFor(x =&gt; x.Email) &lt;br /&gt;
              @Html.TextBoxFor(x =&gt; x.Email, new {size = "30" })
              @Html.ValidationMessageFor(x =&gt; x.Email)
              &lt;br /&gt;
              &lt;br /&gt;
  
              @Html.CheckBoxFor(x =&gt; x.AcceptSubsTerms, new { value = "SubsTerms"})
              @Html.LabelFor(x =&gt; x.AcceptSubsTerms)
              @Html.ValidationMessageFor(x =&gt; x.AcceptSubsTerms)
              @Html.ActionLink("SubsTermsLinkText", "Subscription", null, new {target = "_blank"})
              &lt;br /&gt;
              &lt;br /&gt;
          &lt;/div&gt;
          &lt;br /&gt;
  
          &lt;input class="mainbutton" type="submit" value="CreateAgreement_btn_txt"/&gt;&lt;br /&gt;
  
      }
  </code></pre>
  
  <p>And here is the POST action method:</p>
  
  <pre><code>    [HttpPost]
      public ActionResult CreateAgreementToken(TokenModel model)
      {
  
          if (ModelState.IsValid)
          {
              // Create Agreement
              //
              //
  
              return RedirectToAction("Welcome");
          }
  
          // If we got this far, something failed, redisplay form
          ModelState.AddModelError("", "The user credentials provided are incorrect.");
  
          // Where to redirect to.
          // How to re-render the Index view that's aware of the ModelState errors
  
          return RedirectToAction("Index");
      }
  </code></pre>
  
  <p>How to handle the interactions between the Controller action methods, the Index View and the Partial View like in the 'normal' case where you have an Index action method rendering an Index View passing it a model instance. And then in the Index POST action method if validation fails, you redisplay the form by calling the Index view passing it the invalid model.</p>
  
  <p>Thank you </p>