title: How to use MVC ajax and PartialViews while maintaining ModelState errors
body: <p>I'm using MVC3. I have a form, that on submit, returns a PartialView that updates my page. The question/issue is -- how do I show ModelState errors and keep my form values in-tact when there is an error?</p>
  
  <p>It seems this question has been asked before (see my references below), but I haven't yet found a complete answer/solution, but I'm confused...</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/3080983/asp-net-mvc-partial-views-keeping-their-model-state">ASP.Net MVC partial views keeping their model state?</a> </li>
  <li><a href="http://craftycodeblog.com/2010/05/15/asp-net-mvc-render-partial-view-to-string/" rel="nofollow noreferrer">http://craftycodeblog.com/2010/05/15/asp-net-mvc-render-partial-view-to-string/</a> </li>
  <li><a href="https://stackoverflow.com/questions/483091/render-a-view-as-a-string/1241257#1241257">Render a view as a string</a></li>
  </ul>
  
  <p>My very simple Model</p>
  
  <pre><code>public class TEST_AjaxFormViewModel
  {
      [Required]
      [StringLength(10)]
      public string Name { get; set; }
  }
  </code></pre>
  
  <p>My View looks like this:</p>
  
  <pre><code>        &lt;% using (Ajax.BeginForm("TEST_AjaxForm", new AjaxOptions { UpdateTargetId = "formResults" }))
             {%&gt;
  
              &lt;%:Html.ValidationSummary(true, "Please correct errors:")%&gt;
  
              &lt;div class="editor-label"&gt;
                  &lt;%:Html.LabelFor(model =&gt; model.Name)%&gt;
              &lt;/div&gt;
              &lt;div class="editor-field"&gt;
                  &lt;%:Html.TextBoxFor(model =&gt; model.Name)%&gt;
                  &lt;%:Html.ValidationMessageFor(model =&gt; model.Name)%&gt;
              &lt;/div&gt;
              &lt;br /&gt;
  
              &lt;div class="editor-label"&gt;&lt;/div&gt;
              &lt;div class="editor-field"&gt;
                  &lt;button name="button" type="submit" value="Submit"&gt;
                      Submit
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;br /&gt;
  
          &lt;% }%&gt;
  
          &lt;div id="formResults" style="border: 1px dotted red; margin: 2.0em; padding: 1.0em;"&gt;
              &lt;p&gt;This is where my partial view will go&lt;/p&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>And my PartialView just spits back the output:</p>
  
  <pre><code>            &lt;div class="editor-label"&gt;&lt;/div&gt;
              &lt;div class="editor-field"&gt;
                  &lt;%: Model.Name %&gt;
              &lt;/div&gt;
              &lt;br /&gt;
  </code></pre>
  
  <p>And my Controller Action method like this</p>
  
  <pre><code>    [HttpPost]
      public ActionResult TEST_AjaxForm(TEST_AjaxFormViewModel model)
      {
          if (ModelState.IsValid)
          {   
              return PartialView("TEST_AjaxFormPartialView", model);
          }
          //else
          return View(model);  // this is wrong! what should I return instead?
      }
  </code></pre>
  
  <p>The issue is how do I return back the View with the ModelState errors? </p>
  
  <p>In the links I provided, there is talk about returning json with status codes so that the client-side can detect an error versus success condition (i.e. RenderPartialViewToString). But I don't really understand how this all gets hookedup / consumed. </p>
  
  <p>e.g. If success, just display the partial view? If error, do we just refresh the page with the updated ModelState? Can someone link together the pieces and show an end-to-end example, namely the View/jquery ajax calls?</p>
  
  <p>Aside: As an alternate implementation, I used something similar to this approach, and got it working, but I don't know... it just seems wrong and as I'm refreshing more of the page than I want to on a success scenario.</p>
  
  <p><a href="http://jvance.com/blog/2010/02/20/MakingAnAjaxFormWithJQueryInASPdotNETMVC.xhtml" rel="nofollow noreferrer">http://jvance.com/blog/2010/02/20/MakingAnAjaxFormWithJQueryInASPdotNETMVC.xhtml</a></p>
  
  <p>e.g. My Controller looks like this, where my PartialViews now contain my "form" code in both Success and Error versions.</p>
  
  <pre><code>    [HttpPost]
      public ActionResult TEST_AjaxFormSingleMasterDiv(TEST_AjaxFormViewModel model)
      {
          if (ModelState.IsValid)
          {   // no model state errors
              return PartialView("TEST_AjaxFormSingleMasterDivPartialView_Success", model);
          }
          // else, error
          return PartialView("TEST_AjaxFormSingleMasterDivPartialView_Error", model);
      }
  </code></pre>
  
  <p>Thanks </p>