jquery - How to use MVC ajax and PartialViews while maintaining ModelState errors

Question

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

Answer 1

你很亲密。这是您的控制器的外观：

[HttpPost]
public ActionResult TEST_AjaxForm(TEST_AjaxFormViewModel model)
{
    if (ModelState.IsValid)
    {
        // perhaps do some additional actions? Save data to DB?
        return PartialView("TEST_AjaxFormPartialView", model);
    }
    //else
    return PartialView("TEST_AjaxFormPartialView", model);
}

如您所见，无论您ModelState是否有效，您都会返回具有相同模型的相同视图。唯一的区别是，如果它有效，您可能需要执行一些额外的操作。

为了显示错误，您需要将一块添加到将显示错误的视图中。但是，Html.ValidationSummaryor Html.ValidationMessageorHtml.ValidationMessageFor需要在表单内部才能呈现。这是您的观点：

@model [namespace].TEST_AjaxFormViewModel

<%: Html.BeginForm() %>
<div><%: Html.ValidationSummary() %></div>
<div class="editor-label"></div>
<div class="editor-field">
    <%: Model.Name %>
</div>
<%: Html.EndForm() %>
<br />

Answer 2

我也遇到了这个问题，这里的解决方案完成了这项工作。它非常简单：诀窍是将表单本身包含在 AjaxOptions 中的 UpdateTargetId 中：http: //xhalent.wordpress.com/2011/02/05/using-unobtrusive-ajax-forms-in-asp-net-mvc3 /