ASP.net MVC 和 jQuery 将多个表单序列化为对象列表并提交答案

【问题标题】：ASP.net MVC and jQuery serialize multiple forms to list of objects and submitASP.net MVC 和 jQuery 将多个表单序列化为对象列表并提交
【发布时间】：2011-03-31 15:53:46
【问题描述】：

使用 asp.net mvc3 和 jquery

我在一个页面上有 x 个表单，每个表单都是在用户添加新项目时创建的。每个表单都代表 C# 中的一个模型。每个表单都有一个字符串列表作为属性之一。我想要一个保存所有表单的按钮来提交所有表单，但我想在这样做之前将它们序列化为一个对象列表，然后在后端对其进行排序。如何使用 jQuery 做到这一点？

<form>
    <input name="ListThing" value="one" />
    <input name="ListThing" value="two" />
    <input name="ListThing" value="three" />
    <input name="Name" value="Bob" />
</form>

<form>
    <input name="ListThing" value="one" />
    <input name="ListThing" value="two" />
    <input name="ListThing" value="three" />
    <input name="Name" value="Pat" />
</form>

public class myModel{
    public List<string> ListThing {get; set;}
    public string Name {get; set;}
}

控制器 - UploadController -动作

[HttpPost]
public ActionResult SaveAll( List<myModel> myModels )
{
    // do stuff
    return View();
}

【问题讨论】：

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

【解决方案1】：

您不能有多个具有相同 id 的元素。所以首先修复你的标记：

<form>
    <input name="ListThing" value="one" />
    <input name="ListThing" value="two" />
    <input name="ListThing" value="three" />
    <input name="Name" value="Bob" />
</form>

<form>
    <input name="ListThing" value="one" />
    <input name="ListThing" value="two" />
    <input name="ListThing" value="three" />
    <input name="Name" value="Pat" />
</form>

然后假设您有一些链接来触发操作：

@Html.ActionLink("Save all", "SaveAll", "Home", null, new { id = "saveall" })

您可以简单地对其进行 AJAXify：

$('#saveall').click(function () {
    var data = $('form').map(function () {
        var $form = $(this);
        return {
            name: $form.find(':input[name=Name]').val(),
            listThing: $form.find(':input[name=ListThing]').map(function () {
                return $(this).val();
            }).toArray()
        };
    }).toArray();

    $.ajax({
        url: this.href,
        type: 'post',
        contentType: 'application/json',
        data: JSON.stringify({ myModels: data }),
        success: function (result) {
            alert('done');
        }
    });

    return false;
});

【讨论】：

哎呀，快速输入。编辑了那个。感谢您的快速响应，现在就试试看。

【解决方案2】：

Darin 的解决方案有效，但我个人会使用 http://www.malsup.com/jquery/form/ 来 Ajaxify 表单，而无需手动进行映射。 ASP.Net MVC 的 Default Binder 会将多个同名的元素（或同名的“[X]”索引器）绑定为一个 List。

【讨论】：