MVC Ajax.BeginForm

Question

I have an ajax form like so:

    <% using (Ajax.BeginForm("Comments", "Comments", null, new AjaxOptions {UpdateTargetId="main", OnSuccess="createSuccess" }, new{ @id="main"})) {%>
    <%: Html.ValidationSummary(true, "errors") %>

    <fieldset>
        <legend>Fields</legend>

        <div class="editor-label">
            <%: Html.LabelFor(model => model.Body) %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.Body) %>
            <%: Html.ValidationMessageFor(model => model.Body) %>
        </div>

        <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>

        <p>
            <input type="submit" value="Submit" />
        </p>
    </fieldset>

<% } %>

<div id="Success" style="display:none;">
    New entry successfully entered
</div>

<script type="text/javascript">
function createSuccess(context)
{
    if ($(".validation-summary-errors").length > 0) {
        return;
    }

    $('#main').clearForm()
    $('#Success').show();
}

Is this the right way to check if the form was successfully submitted? What if the class name for validation-summary changes? is there a better way?

thanks

Answer 1

You are definitely on the right track. The important thing to know, is that in order for the server side validation messages to populate, you need the Comments action to return a partial which contains the form you have above, because when the ajax call returns it will replace whatever has id="main" (your form), with the result of the action.