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

Looking forward to the day when StackOverflow can appropriately color Razor syntax. — Chase Florell, Dec 18 '10 at 03:55

score 44 · Accepted Answer · answered Dec 18 '10 at 04:12

44

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>

answered Dec 18 '10 at 04:12

Jeff Ogata

52,923
17
108
124

9

I hope these comment upvotes are in fun, and that you're not all calling me retarded. haha – Chase Florell Mar 22 '11 at 17:12
@ChaseFlorell probably upvotes because we feel the same way ;) – gilles emmanuel May 21 '15 at 19:25
1

Worth noting, to install this script use Install-Package Microsoft.jQuery.Unobtrusive.Ajax – Zach Feb 17 '17 at 15:39

score 2 · Answer 2 · edited May 23 '17 at 12:25

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

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

edited May 23 '17 at 12:25

Community

1
1

answered Dec 18 '10 at 04:00

Andrew Whitaker

119,029
30
276
297

That's what I thought too, but [this SO question](http://stackoverflow.com/questions/1305601/how-to-post-asp-net-mvc-ajax-form-using-javascript-rather-than-submit-button) says to use the `trigger` method – Chase Florell Dec 18 '10 at 04:07
@rockinthesixstring: I'm not convinced. The docs (http://api.jquery.com/submit/) state that the `.submit()` method is a shortcut for `.trigger('submit')` – Andrew Whitaker Dec 18 '10 at 04:10

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

EDIT

2 Answers2

Linked