Asp.Net MVC的Ajax.BeginForm无法通过Ajax提交

Question

我有一个如下的表单

<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的“ok”按钮，只需向表单添加<input type="submit" name="submit" value="Ok" />，表单也会提交而不使用Ajax

- Chase Florell

---

期待 StackOverflow 能够正确地给 Razor 语法着色的那一天。 - Chase Florell

Answer 1

您是否已经引入了jQuery的ajax脚本？我注意到如果没有引入该脚本，会出现这种行为：

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

- Jeff Ogata

---

我希望这些评论点赞只是出于好玩，而不是在嘲笑我。哈哈 - Chase Florell

@ChaseFlorell 可能会点赞，因为我们有相同的感觉 ;) - gilles emmanuel

值得注意的是，要安装此脚本，请使用Install-Package Microsoft.jQuery.Unobtrusive.Ajax。 - Zach

Answer 2

我已经有一段时间没有使用ASP.NET MVC AJAX助手了，但我相信Ajax.BeginForm会在生成的（HTML）标记中添加一个内联的onsubmit处理程序。

如果是这种情况，通过编程方式调用此表单的提交（触发submit事件的jQuery），将不会调用表单的onsubmit函数，这很可能会取消正常的提交操作并通过AJAX提交表单。

要了解更多信息，请查看相关答案。

作为替代方案，您可以使用以下方法之一通过AJAX发布表单

• jQuery表单插件。
• jQuery的内置AJAX函数。

我发现使用这些方法比使用Microsoft的AJAX助手更少麻烦。

- Andrew Whitaker

---

这也是我想的，但是这个SO问题建议使用trigger方法。 - Chase Florell

@rockinthesixstring：我还不确定。文档（http://api.jquery.com/submit/）指出`.submit()`方法是`.trigger('submit')`的快捷方式。 - Andrew Whitaker