Asp.Net MVC Ajax.BeginForm 未通过 Ajax 提交
我的表单如下
<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>
我在 jQuery-UI 模态窗口中打开它
<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>
当我单击“确定”按钮时,它会发布到适当的控制器,但它不是通过 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
我做错了什么?提交表单后,我的 URL 为 http://example.com/Main/Contact 这告诉我IsAjaxRequest = false
编辑
即使我不使用 jquery-ui“确定”按钮,只需添加 到表单,表单不使用 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.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
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
你有jquery ajax脚本吗?当我不包含它时,我注意到这种行为:
Do you have the jquery ajax script included? I've noticed this sort of behavior when I didn't include it:
我已经有一段时间没有使用 ASP.NET MVC AJAX 帮助程序了,但我相信
Ajax.BeginForm
在生成的 (HTML) 标记中添加了一个内联onsubmit
处理程序。如果是这种情况,以编程方式调用此表单上的提交(触发
submit
事件的 jQuery)将不会调用该表单的onsubmit
函数。 form,这很可能会取消正常的提交操作并通过 AJAX 提交表单。有关发生这种情况的原因的更多信息,请查看 这个相关答案。
通过 AJAX 发布表单
我发现这些方法中的任何一种都比使用 Microsoft 的 AJAX 帮助程序更麻烦。
I haven't worked with the ASP.NET MVC AJAX helpers in awhile, but I believe
Ajax.BeginForm
adds an inlineonsubmit
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 theonsubmit
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.