0

我有一个表单，我试图用 Ajax / 提交而不重新加载页面。

Ajax 调用正在访问服务器，但它似乎没有调用该函数。我都试过了$.post和$.ajax。两者似乎都不起作用。几周前我有一些非常相似的工作，但现在我无法复制它。（最终目标是将模型作为局部视图返回，以便查看验证。）

使用 Firefox，控制器方法立即被命中。使用 Chrome，浏览器选项卡似乎被锁定。它有时会在延迟后击中控制器。（模型信息准确地过来了。）

我在这里做错了什么？

我在这里有我的部分观点：

<% using (Ajax.BeginForm("CreateSimpleReport", "Main", new AjaxOptions { HttpMethod="POST" }, new { id="CreateSimpleReport" })){ %>
   <%: Html.ValidationSummary(false, "Report creation was unsuccessful. Please correct the errors and try again.", new { @class = "validation_summary" })%>
   <% Html.EnableClientValidation(); %>
   <div class="col">
<div class="row">
    <div class="label">
        <%: Html.LabelFor(m => m.Name)%>
    </div>
    <div class="field">
        <%: Html.TextBoxFor(m => m.Name, new { @class = "input texbox" })%>
        <%: Html.ValidationMessageFor(m => m.Name, "*")%>
    </div>
</div>
<div class="row">
    <div class="label">
        <%: Html.LabelFor(m => m.Description)%>
    </div>
    <div class="field">
        <%: Html.TextBoxFor(m => m.Description, new { @class = "input texbox" })%>
        <%: Html.ValidationMessageFor(m => m.Description, "*")%>
    </div>
</div>
<div class="row">
    <div class="label">
        <%: Html.LabelFor(m => m.Quantity)%>
    </div>
    <div class="field">
        <%: Html.TextBoxFor(m => m.Quantity, new { @class = "input texbox" })%>
        <%: Html.ValidationMessageFor(m => m.Quantity, "*")%>
    </div>
</div>
<div class="right"><input type="submit" class="button" value="Create Report" /></div>
</div>
<% } %>

控制器：

[HttpPost]
public string CreateSimpleReport(SimpleReportModel model)
{
    if (ModelState.IsValid)
    {
        // do something
        return "success";
    }
    else
    {
        return "failure";
    }
}

最后，jQuery：

        $('#CreateSimpleReport').on('submit', function (e) {
            var $this = $(this);
            $.post((this), (this), function(data) {
                alert('finish');
            });
//            $.ajax({
//                type: 'POST',
//                url: (this),
//                data: (this),
//                success: function () {
//                    alert('success');
//                },
//                error: function (jqXHR, textStatus, errorThrown) {
//                    alert('error');
//                }
//            }); // end ajax call
        });
4

4 回答 4

1

您不应该将Ajax.*助手与jQuery.ajax. 如果您使用 Ajax.BeginForm 帮助程序，则只需包含jquery.unobtrusive-ajax.js脚本 (ASP.NET MVC 3) 或MicrosoftAjax.js和MicrosoftMvcAjax.js脚本 (ASP.NET MVC 2) 并订阅AjaxOptions.

如果您决定手动使用 jQuery.ajax，则使用标准 Html.BeginForm：

<% using (Html.BeginForm("CreateSimpleReport", "Main", FormMethod.Post, new { id = "CreateSimpleReport" })) { %>

进而：

$(function() {
    $('#CreateSimpleReport').on('submit', function() {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function(result) {
                alert('AJAX success');
            }
        });

        // make sure you return false to cancel the default event
        return false;
    });
});
于 2012-04-26T06:01:14.330 回答
0 
$.post((this), (this)

这（没有双关语）没有意义。您也不能 POST 到参数为 DOM 元素的 DOM 元素。除此之外，您需要e.preventDefault();（或return false;）避免定期提交表单。因此，当您的回调触发时，页面已经重新加载。

通过 AJAX 提交表单的最简单方法是使用jQuery 表单插件。

于 2012-04-25T21:56:08.107 回答
0

你已经在使用了Ajax.BeginForm，为什么还需要 jQuery 脚本来做 ajax？

你包括了jquery.unobtrusive-ajax.js吗？

于 2012-04-25T22:03:52.177 回答
0

关于将 microsoft ajax 和验证与自定义 jquery ajax 混合，我在这里有一个类似的线程： Mixing Microsoft MVC ajax and validation helpers with native jquery ajax

于 2012-04-30T08:31:40.223 回答