Asp.Net MVC Ajax.BeginForm is not submitting via Ajax

Question

I've got my form as follows

<div id="contact-form" class="hidden" title="Online Request Form">
    @Using (Ajax.BeginForm("Contact", "Main",
                          Nothing,
                          New AjaxOptions With {.UpdateTargetId = "status", .HttpMethod = "post"},
                          New With {.id = "contactUs"}))
        @<div>
            @Html.LabelFor(Function(m) m.Name)<br />
            @Html.TextBoxFor(Function(m) m.Name)<br />
            @Html.LabelFor(Function(m) m.Phone)<br />
            @Html.TextBoxFor(Function(m) m.Phone)<br />
            @Html.LabelFor(Function(m) m.Email)<br />
            @Html.TextBoxFor(Function(m) m.Email)<br />
            @Html.LabelFor(Function(m) m.Question)<br />
            @Html.TextAreaFor(Function(m) m.Question)<br />
            @Html.LabelFor(function(m) m.Security)<br />
            @Html.TextBoxFor(Function(m) m.Security)<br />
            <noscript>
                <input type="submit" name="submit" value="Ok" />
            </noscript>
            @Html.ValidationSummary("Oops, please correct the errors.")<span id="status">@TempData("status")</span>
        </div>
    End Using
</div>

And I'm opening it in a jQuery-UI Modal Window

<script>
    $(function () {

        // Open the modal dialog from the div.contact-us click event
        $('#contact-us').click(function () {
            $('#contact-form').dialog('open');
            return false;
        });

        // Manage the modal dialog behavior.
        $('#contact-form').dialog({
            modal: true,
            autoOpen: false,
            buttons: {
                Cancel: function () {
                    $(this).dialog('close');
                },
                Ok: function () {
                    $('form#contactUs').trigger('submit');
                }
            }
        });
    });

</script>

When I click the "OK" button, it is posting to the appropriate controller, however it is not posting via AJAX

    ''# fix the StackOverflow code coloring issue.
    <HttpPost()>
    Function Contact(ByVal contactForm As Models.ContactForm) As ActionResult
        ViewData("Testimonials") = Helpers.GetTestimonials

        If ModelState.IsValid Then
            ''# Submit the email
            TempData("status") = "Thank you, we will be in touch"
        Else
            ''# Return False
            TempData("status") = "Oops, please correct the errors."
        End If


        If Request.IsAjaxRequest Then
            Return Content(TempData("status").ToString)
        Else
            Return View("Index")
        End If
    End Function

What am I doing wrong? After I submit the form, my URL is http://example.com/Main/Contact which tells me that IsAjaxRequest = false

EDIT

Even when I don't use the jquery-ui "ok" button and simply add <input type="submit" name="submit" value="Ok" /> to the form, the form posts without Ajax

Answer 1

Do you have the jquery ajax script included? I've noticed this sort of behavior when I didn't include it:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

Answer 2

I haven't worked with the ASP.NET MVC AJAX helpers in awhile, but I believe Ajax.BeginForm adds an inline onsubmit handler in the generated (HTML) markup.

If this is the case, calling submit on this form programmatically (your jQuery that triggers the submit event) will not call the onsubmit function of the form, which most likely cancels the normal submit action and submits the form via AJAX.

For more information about why this happens, check out this related answer.

As an alternative, you can post the form via AJAX using

• The jQuery form plugin.
• jQuery's built-in AJAX function.

I've found either of these methods less of a hassle than using Microsoft's AJAX helpers.