Asp.Net MVC Ajax.BeginForm is not submitting via Ajax
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.La开发者_Python百科belFor(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
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>
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.
精彩评论