How can I use Html.ValidationSummary with Ajax.BeginForm?

Question

I have an AJAX form that I am creating in my MVC project. If the form is submitted using normal browser function and a page refresh occurs I get validation information rendered in the form (the built in MVC validation based on ViewData.ModelState).

Is there a similiar validation mechanism for AJAX forms?

<% using (Ajax.BeginForm("Create", "GraphAdministration", new AjaxOptions()
    {
        OnSuccess = "newGraphSuccess",
        OnFailure = "newGraphFailure",
        HttpMethod = "POST"
    }))
{ %>
    <!-- some form stuff in here !-->
<% } //end form %>

Answer 1

It really depends on where you are getting the content from to display once the form has been posted. The Validation summary is performed created on the server so that is where you have to do the work.

As an example I was using some partial content in an .ascx file to render a form. You get the form in the page the first time round by calling the action directly with Html.RenderAction

You would have your Ajax.BeginForm etc. in the .ascx file. Then call it directly in an action.

When the Ajax call is made from the browser you get it to post to the same action. That way you can do all of the server side validation that you would normally. You should set up the Ajax call to replace the original form with the new html that is returned by the action.

One thing that you have to be aware of is that the replace JavaScript will replace the content of an element not the element itself so remember to us the id of a surrounding element.

Apologies if that is a little convoluted, if you want more details just comment and I'll flesh out the relevant bits.

Extra Detail:

All of this assumes that you are doing all of the validation on the server.

You are going to have a View that has all of the page stuff in it and then some partial content in a .ascx file, this is where your ajax form lives, it needs to be set to replace content by id. Its easiest if it has the same name as the action your ajax is going to call.

You can use Html.RenderAction to get it into the View. You can also pass in data with other versions of the same method. Your essentially calling it in the same way your ajax code will.

You will need to wrap it all in a div with an id set. Use this id in the partial as the content to replace.

When you render the page the html for the form and all of the ajax stuff will get put in.

When the ajax action is called the partial content will be returned with any validation performed. It will replace the content of the div that you gave the id to.

You can have different versions of the action by using [AcceptVerbs(HttpVerbs.Get)] and [AcceptVerbs(HttpVerbs.Post)] attributes

The main problem with this method is that its not self contained, the div with the id is external to the partial.