使用jquery ajax和MVC3发布表单的正确方法是什么？

Question

我已经看到了几种关于如何做到这一点的方法.我喜欢自己的方法,除了一个部分,如下:

1. 劫持提交形式的事件

2. 收集数据并构建json对象

   var objToSend = { Property : $('#propertyField').val(), Property2 : ... };
   

   这是我不喜欢的部分,因为收集这样的25个值是很乏味的

3. 调用$.ajax({})并指定url以指向[HttpPost]某处的已启用操作

4. 在成功:ajax查询的一部分,收集返回的数据(我作为字符串返回)并在适当的时候写出来.我也在这里处理错误,检查第一个单词是否为"Error:"然后采取适当的措施.

除了收集阶段,我喜欢这种方法.我相信有这样做的更好的办法,但我心中已经抛出自己一头扎进了jquery来自未来ASP.NET的WebForms背景使整个"拥抱网络"的一部分是完全陌生.

Answer 1

您可以使用该serialize()方法来避免逐个传递所有字段.它将使用application/x-www-form-urlencoded内容类型将整个表单数据发送到服务器,就像它是标准表单提交一样:

$('#myform').submit(function() {
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function(result) {
            // TODO: handle the success case
        }     
    });
    return false;
});

另一种可能性是jQuery表单插件:

$('#myform').ajaxForm(function(result) { 
    // TODO: handle the success case
});

有些人发现使用Ajax.BeginForm帮助器渲染表单也很有用:

@using (Ajax.BeginForm(new AjaxOptions { OnSuccess = "success" }))
{
    ... some input fields
}

在ASP.NET MVC 3中,您需要包含一个jquery.unobtrusive-ajax.js脚本,该脚本不显眼地data-*AJAX化Ajax帮助程序发出的HTML 5 属性.