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

【问题标题】：What is the correct way of posting a form with jquery ajax and MVC3?使用 jquery ajax 和 MVC3 发布表单的正确方法是什么？
【发布时间】：2011-08-08 13:06:06
【问题描述】：

我已经看到了一些关于如何做到这一点的方法。我自己喜欢的方法，除了一个部分，如下：

劫持表单的提交事件
收集数据并构建json 对象
```
var objToSend = { Property : $('#propertyField').val(), Property2 : ... };
```
这是我不喜欢的部分，因为收集 25 个这样的值很乏味
调用$.ajax({}) 并指定URL 以指向某处启用[HttpPost] 的操作
在成功：ajax 查询的一部分，收集返回的数据（我将其作为字符串返回）并在适当的地方写出来。我在这里也处理错误，检查第一个单词是否是“错误：”，然后采取适当的措施。

除了收集阶段，我喜欢这种方法。我确信有更好的方法来做到这一点，但我一头扎进了来自ASP.NET WebForms-background 的jquery，所以整个“拥抱网络”部分对我来说完全陌生。

【问题讨论】：

标签： c# jquery asp.net asp.net-mvc-3

【解决方案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 form plugin：

$('#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 脚本，该脚本不显眼地 AJAX 化 Ajax 助手发出的 HTML 5 data-* 属性。

【讨论】：

我将如何在控制器操作中处理 .serialize 创建的对象？是否会将输入的 ids、名称和设置作为对象中输入字段值的名称？
@Phil，与您提交任何标准表单的方式相同：您将定义一个包含映射到输入字段的属性的视图模型，并且您将让 POST 控制器操作将此视图模型作为参数。默认模型绑定器将负责正确填充它。

【解决方案2】：

允许 jQuery 为您构建您的 json。您可以序列化一个表单，该表单将创建一个数据集供您提交。

$.post("myUrl", 
       $("form").serialize(), 
       function(callback) { ... } 
     );

【讨论】：

【解决方案3】：

我就是这样做的！

如果您正在处理表单，您还可以选择使用 MVC 帮助程序为您创建邮政编码处理代码，例如

<% using (html.BeginForm()) {%>

    // html for the form


    <input type='submit' value='post' />

<% } %>

从 WebForms 到 MVC 的过渡对于人们来说可能是一个棘手的问题，你是否真的在处理 Web 编程的原始方面，即 http、html 和 javascript...顺便说一句，我相信这是一件好事，因为我是不喜欢 WebForms 的伪单进程事件模型。

MVC 万岁！ :)

【讨论】：

【解决方案4】：

我倾向于使用“jQuery 表单插件”。它允许您轻松地将标准表单抽象为 AJAX 表单：

http://jquery.malsup.com/form/

它还允许您轻松捕获各种事件、失败条件、验证等，并且可以根据需要将表单转换为 JSON 请求或 XML。也处理文件上传。

【讨论】：