使用 jquery.load 将对象数组传递给 MVC 3答案

【问题标题】：Pass an array of objects using jquery.load to MVC 3使用 jquery.load 将对象数组传递给 MVC 3
【发布时间】：2013-03-19 09:19:55
【问题描述】：

我在尝试将对象数组传递给 MVC3 控制器/动作时遇到了问题。我在网上找到了几个讨论（包括在 SO 上），但没有一个能解决我的问题。这是我正在使用的：

public class Person
{
   public Guid TempId { get; set; }
   public bool ReadOnly { get; set; }
   [Required(ErrorMessage = "Required")]
   public string Name { get; set; }
}

这是我的控制器操作（目前，我尝试了许多变体）的样子：

[HttpGet]
public ActionResult AddPerson(List<Person> people)
{
    if (null != people)
    {
        foreach (var person in people)
        {
           Debug.WriteLine(person );
        }
     }
    return View();
}

为了号召性用语，我尝试了多种构建 jquery 的方法，但到目前为止，我唯一能做的就是将对象数组手动编码为 URL 字符串，如下所示：

var url = "AddPerson?people%5B0%5D.TempId=9FBC6EF8-67DB-4AB4-8FCE-5DFC0F2A69F9&people%5B0%5D.ReadOnly=true&people%5B0%5D.Name=Bob+Jones&people%5B1%5D.TempId=9FBC6EF8-67DB-4AB4-8FCE-5DFC0F2A6333&people%5B1%5D.ReadOnly=false&people%5B1%5D.Name=Mary+Jones #peopleDiv";
$("#peopleDiv").load(url, updatePeopleDiv);

people%5B1%5D.ReadOnly=false 是people[1].ReadOnly=false 的编码版本

我尝试过其他方法，例如：

var url = "AddPerson #peopleDiv";
var people = [];
people.push({'[0].TempId': '<valid guid>', '[0].ReadOnly': true, '[0].Name': 'Bob Jones' });
$("#peopleDiv").load(url, people, updatePeopleDiv); // nope
$("#peopleDiv").load(url, $.param(people, false), updatePeopleDiv); // nada
$("#peopleDiv").load(url, $.param(people, true), updatePeopleDiv); // nyet

我还尝试通过将 people[] 包装在一个对象中来修改上述内容：var data = { arr: people }，然后尝试以各种方式发送该data 对象。所有方式（除了我通过手动编码工作的方式）都会导致以下三种结果之一：

未调用控制器操作（定义方式与我调用方式不匹配）
已调用控制器操作，但参数为空
调用了控制器操作，并且数组中的对象元素数量正确，但是这些对象的实际值都没有被传输（所以我有一个对象数组，所有对象都具有默认值）。

有什么建议吗？

【问题讨论】：

您不想通过查询字符串传递复杂的对象。你想发布这些参数。
Dave - 我同意，但正如我解释的（可能很糟糕），我无法让它工作，我不得不求助于通过查询字符串传递。你能告诉我一个工作的例子吗？
@DaveA 说的是正确的，请尝试在帖子中传递它。我的建议是创建一个 JSON 数组并将其作为字符串发布到控制器，然后在控制器中对其进行反序列化。如果控制器动作没有被击中，那么你可能称它是错误的。例如，您的网址包含 #peopleDiv。
这篇 SO 帖子 link 有一个很好的问题和解决方案示例......请密切注意示例中 JSON.Stringify 的特殊用法，因为我相信您需要它来解决您的问题.

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

【解决方案1】：

只需将 contentType 设置为 'application/json' 并使用 JSON.stringify()。

$.ajax({
            contentType: 'application/json',
            type: 'POST',
            url: '/Controller/AddPerson',
            data: JSON.stringify({
                people: [
                    {
                      ReadOnly: false,
                      Name: 'Cristi'
                    },
                    {
                      ReadOnly: true,
                      Name: 'Matt'
                    }
                ]
            }),
            success: function (data) {
                $("#peopleDiv").html(data);
            },
            error: function () {
                console.trace();
            }
        });

此外，添加/编辑/删除请求应通过 POST 完成。

[HttpPost]
public ActionResult AddPerson(List<Person> people)
{
    if (null != people)
    {
        foreach (var person in people)
        {
           Debug.WriteLine(person );
        }
     }
    return PartialView("viewname");
}

【讨论】：