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?
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...
- ASP.Net MVC partial views keeping their model state?
- http://craftycodeblog.com/2010/05/15/asp-net-mvc-render-partial-view-to-string/
- Render a view as a string
My very simple Model
public class TEST_AjaxFormViewModel
{
[Required]
[StringLength(10)]
public string Name { get; set; }
}
My View looks like this:
<% using (Ajax.BeginForm("TEST_AjaxForm", new AjaxOptions { UpdateTargetId = "formResults" }))
{%>
<%:Html.ValidationSummary(true, "Please correct errors:")%>
<div class="editor-label">
<%:Html.LabelFor(model => model.Name)%>
</div>
<div class="editor-field">
<%:Html.TextBoxFor(model => model.Name)%>
<%:Html.ValidationMessageFor(model => model.Name)%>
</div>
<br />
<div class="editor-label"></div>
<div class="editor-field">
<button name="button" type="submit" value="Submit">
Submit
</button>
</div>
<br />
<% }%>
<div id="formResults" style="border: 1px dotted red; margin: 2.0em; padding: 1.0em;">
<p>This is where my partial view will go</p>
</div>
And my PartialView just spits back the output:
<div class="editor-label"></div>
<div class="editor-field">
<%: Model.Name %>
</div>
<br />
And my Controller Action method like this
[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?
}
The issue is how do I return back the View with the ModelState errors?
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.
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?
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.
http://jvance.com/blog/2010/02/20/MakingAnAjaxFormWithJQueryInASPdotNETMVC.xhtml
e.g. My Controller looks like this, where my PartialViews now contain my "form" code in both Success and Error versions.
[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);
}
Thanks