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

I've seen a couple of methods on how to do this. My own method that I like, except from one part, is the following:

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

Hijack submit-event of form
劫持提交形式的事件
Collect the data and build a json object

收集数据并构建一个json对象
```
var objToSend = { Property : $('#propertyField').val(), Property2 : ... };
```
This is the part I don't like since it's tedious to collect 25 values like this

这是我不喜欢的部分，因为收集这样的25个值是很乏味的
Call $.ajax({}) and specify the url to point to an [HttpPost] enabled action somewhere

调用$ .ajax（{}）并指定url指向某个地方启用[HttpPost]的操作
in the success: part of the ajax-query, collect the returned data (which I return as a string) and write it out where appropriate. I handle errors here as well, checking to see if the first word is "Error:" and then taking appropriate action.
在成功：ajax查询的一部分，收集返回的数据（我作为字符串返回）并在适当的时候写出来。我也在这里处理错误，检查第一个单词是否是“错误：”然后采取适当的措施。

I like this method apart from the collection stage. I am sure there is a better way of doing this but I'v thrown myself headlong into jquery coming from an ASP.NET WebForms-background so the whole "embrace the web" part is totally foreign to me.

除了收集阶段，我喜欢这种方法。我确信有一种更好的方法可以做到这一点，但是我从一个ASP.NET WebForms背景中悄悄地投入jquery，所以整个“拥抱网络”部分对我来说是完全陌生的。

4 个解决方案

#1

You could use the serialize() method to avoid passing all the fields one by one. It will send the entire form data to the server using application/x-www-form-urlencoded content type as if it was a standard form submission:

您可以使用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;
});

Another possibility is the jQuery form plugin:

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

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

Some people find it also useful to use the Ajax.BeginForm helpers to render the form:

有些人发现使用Ajax.BeginForm帮助器呈现表单也很有用：

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

In ASP.NET MVC 3 you need to include the jquery.unobtrusive-ajax.js script which unobtrusively AJAXifies the HTML 5 data-* attributes emitted by the Ajax helper.

在ASP.NET MVC 3中，您需要包含jquery.unobtrusive-ajax.js脚本，该脚本不引人注意地AJAX化Ajax助手发出的HTML 5 data- *属性。

#2

Allow jQuery to build your json for you. You can serialize a form which will create a data set for you to submit.

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

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

#3

That's how I'd do it!

我就是这样做的！

You also have the option of using the MVC helpers to create the post code handling code for you if you're dealing with a form e.g.

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

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

    // html for the form


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

<% } %>

The transition from WebForms to MVC can be a tricky one for people has you really are dealing with the raw aspects of web programming i.e. http, html and javascript... BTW I believe this to be a good thing as I'm not a fan of the pseudo single process event model of WebForms.

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

Long live MVC! :)

MVC万岁！ :)

#4

I tend to use the "jQuery form plugin". It allows you to cleanly abstract a standard form into an AJAX form with very little effort:

我倾向于使用“jQuery表单插件”。它允许您只需很少的努力即可将标准表单干净地抽象为AJAX表单：

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

It also allows you to easily trap various events, failure conditions, validations etc and can convert your form to a JSON request or XML if you desire. Handles file uploads too.

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

#1

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