Need advice on the flow of my AJAX form in MVC

I need some help/guidance in how to write the AJAX piece of my application.

I have a button that when clicked will pop up a modal dialog. On the dialog I have an Ajax开发者_开发问答 form which has a text box and a button to Save the values:

@using( Ajax.BeginForm("SaveText", new AjaxOptions{ OnSuccess = "ajaxSuccess" }) )
{
    @Html.TextBoxFor(m => m.Text)

    <p>
        <input type="submit" value="Save" />
    </p> 
}

When the AJAX completes successfully I want to close the dialog and refresh a grid on my main page:

function ajaxSuccess() {
    closeDialog();
    refreshGrid();
}

I ran into problems when I tried to implement validation. I'm not really sure how to accomplish what I want. Here is my controller:

public ActionResult SaveText(SaveTextViewModel model)
{
    if( ModelState.IsValid )
    {
        return PartialView("SaveTextPartial", model);
    }

    repository.SaveText(...);

    return PartialView("SaveTextPartial");
}

Here is where I'm having difficulty: when I submit the form and there are validation errors, the controller returns a partial view but the AJAX OnSuccess method completes. I don't know how to distinguish between a success with errors and a success without errors. When I have validation errors my form closes and my grid refreshes, which is not what I want.

Does anyone have any ideas? Do I need to restructure the entire flow of my AJAX call or do it completely different?

It appears like you don't need this form to work without Javascript (since you're always passing back a partial view), so why not, on success, pass back a simple JSON object?

return Json(new { success = true })

And if there's an error, return the partial view so you can replace the HTML.

Then test for it in your callback...

if (result.success) { }

That way, on success, you can close the dialog safely but on a validation error, you swap out the dialog's HTML with the HTML you received on the AJAX request.

I don't know what parameters are available for your onSuccess callback but I'm sure the response body is one of them.

You could add a custom HTTP header in case of error:

public ActionResult SaveText(SaveTextViewModel model)
{
    if( !ModelState.IsValid )
    {
        // a validation error occurred
        Response.AppendHeader("X-Error", "true");
        return PartialView("SaveTextPartial", model);
    }

    repository.SaveText(...);

    return PartialView("SaveTextPartial");
}

and on the client:

function ajaxSuccess(e, status, xhr) {
    if (xhr.getResponseHeader('X-ERROR')) {
        alert('failure');
    } else {
        alert('success');
    }
}