使用jQuery Ajax将对象列表传递给MVC控制器方法

Question

我正在尝试使用jQuery的ajax()函数将对象数组传递到MVC控制器方法中。当我进入PassThing() C#控制器方法时，参数"things"为空。我已尝试使用List类型作为参数，但也不起作用。我做错了什么？

<script type="text/javascript">
    $(document).ready(function () {
        var things = [
            { id: 1, color: 'yellow' },
            { id: 2, color: 'blue' },
            { id: 3, color: 'red' }
        ];

        $.ajax({
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            type: 'POST',
            url: '/Xhr/ThingController/PassThing',
            data: JSON.stringify(things)
        });
    });
</script>

public class ThingController : Controller
{
    public void PassThing(Thing[] things)
    {
        // do stuff with things here...
    }

    public class Thing
    {
        public int id { get; set; }
        public string color { get; set; }
    }
}

- Halcyon

---

你可以尝试使用JavaScriptSerializer.Deserialize方法（String，Type）。 - jk.

你的数据是一个字符串，但你的方法接受一个数组。修改你的方法，使其接受一个字符串，然后在方法内部对其进行反序列化。 - Bob Horn

你的代码是正确的。我使用MVC 4进行了测试并且它可以工作。请提供更多数据以便解决问题。 - Diego

这是很棒的东西，但如果您不仅需要传递字符串列表，还需要包含与字符串列表相关联的单独ID怎么办？例如，组ID，组ID下的组列表。 - Nathan McKaskle

Answer 1

使用NickW的建议，我能够通过things = JSON.stringify({ 'things': things });使其正常工作。以下是完整代码。

$(document).ready(function () {
    var things = [
        { id: 1, color: 'yellow' },
        { id: 2, color: 'blue' },
        { id: 3, color: 'red' }
    ];      
    
    things = JSON.stringify({ 'things': things });

    $.ajax({
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        type: 'POST',
        url: '/Home/PassThings',
        data: things,
        success: function () {          
            $('#result').html('"PassThings()" successfully called.');
        },
        failure: function (response) {          
            $('#result').html(response);
        }
    }); 
});


public void PassThings(List<Thing> things)
{
    var t = things;
}

public class Thing
{
    public int Id { get; set; }
    public string Color { get; set; }
}

我从中学到了两件事：

1. 在ajax()函数中，设置contentType和dataType是绝对必要的。如果缺少它们，它将无法正常工作。经过多次尝试，我发现了这一点。

2. 要将对象数组传递给MVC控制器方法，只需使用JSON.stringify({'things': things})格式即可。

- Halcyon

---

我遇到了同样的问题，添加 contentType 解决了它。谢谢！ - Rochelle C

注意两件事情：JSON.stringify和指定“contentType”。 - dinesh ygv

无论出于何种原因，我只能使用 data: JSON.stringify(things)。 - Rob Scott

dataType 不是必需的。如果省略它，ajax 函数将根据返回数据自动处理。 - user3559349

对于aspnetcore 2，请记得在您的控制器函数中添加[FromBody]，否则它将无法工作。 - Hoan Dang

Answer 2

你不能只是这样做吗？

var things = [
    { id: 1, color: 'yellow' },
    { id: 2, color: 'blue' },
    { id: 3, color: 'red' }
];
$.post('@Url.Action("PassThings")', { things: things },
   function () {
        $('#result').html('"PassThings()" successfully called.');
   });

...并使用

标记您的操作。

[HttpPost]
public void PassThings(IEnumerable<Thing> things)
{
    // do stuff with things here...
}

- lanternmarsh

---

这应该是最好的答案。在这种情况下不应使用JSON.stringify。 - user1021364

这对我不起作用..我正在使用 [HttpPost] public int SaveResults(List<ShortDetail> model) {} 和 $.post("@Url.Action("SaveResults", "Maps")", {model: dataItems}, function (result) { }); - Samra

它对我起作用了。绝对是最好的答案。 我不知道为什么Halcyon实现没有起作用。 PassThings函数被调用，但'things'输入变量为空，即使在调用之前在javascript中填充了它。 - Leonardo Daga

我们可以给它添加文件上传吗？ - Heemanshu Bhalla

Answer 3

我正在使用 .Net Core 2.1 Web 应用程序，但无法得到任何答案。如果方法被调用，我要么得到一个空参数，要么得到 500 服务器错误。我开始尝试各种可能的答案组合，最终获得了一个可行的结果。

在我的情况下，解决方案如下:

脚本 - 将原始数组转换为字符串（不使用命名属性）

    $.ajax({
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        url: mycontrolleraction,
        data: JSON.stringify(things)
    });

在控制器方法中，使用 [FromBody]。

    [HttpPost]
    public IActionResult NewBranch([FromBody]IEnumerable<Thing> things)
    {
        return Ok();
    }

错误包括：

• 命名内容

  数据：{ content: nodes }，// 服务器错误 500

• 没有设置contentType = 服务器错误 500

注释

• dataType不是必需的，尽管一些答案可能会说需要，因为它用于响应解码（所以对这里的请求示例不相关）。
• List<Thing>在控制器方法中也可以使用。

- Gone Coding

Answer 4

格式化您的数据可能是问题所在。请尝试以下任一方法：

data: '{ "things":' + JSON.stringify(things) + '}',

或者（来自如何在没有表单的情况下将字符串数组发布到ASP.NET MVC控制器？）

var postData = { things: things };
...
data = postData

- nick_w

---

你的代码很接近，但是它不能工作。由于你的建议，我已经成功让代码运行了。请参见我上面的答案。 - Halcyon

Answer 5

我有完美的答案：我尝试了很多解决方案，最终自己能够成功管理。请查看以下详细答案：

我有完美的答案：我尝试了很多解决方案，最终自己能够成功管理。请查看以下详细答案：

       $.ajax({
            traditional: true,
            url: "/Conroller/MethodTest",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data:JSON.stringify( 
               [
                { id: 1, color: 'yellow' },
                { id: 2, color: 'blue' },
                { id: 3, color: 'red' }
                ]),
            success: function (data) {
                $scope.DisplayError(data.requestStatus);
            }
        });

控制器

public class Thing
{
    public int id { get; set; }
    public string color { get; set; }
}

public JsonResult MethodTest(IEnumerable<Thing> datav)
    {
   //now  datav is having all your values
  }

- Veera Induvasi

---

你应该有更多的赞：在Jquery网站上，traditional: true是推荐的方式。 - DFTR

Answer 6

我唯一能让它工作的方法是将JSON作为字符串传递，然后使用JavaScriptSerializer.Deserialize<T>(string input)进行反序列化，如果这是MVC 4的默认反序列化程序，那就相当奇怪了。

我的模型有嵌套对象列表，使用JSON数据时，我能得到的最好结果是最上层的列表中有正确数量的项，但所有项的字段都为空。

这种事情不应该那么难。

    $.ajax({
        type: 'POST',
        url: '/Agri/Map/SaveSelfValuation',
        data: { json: JSON.stringify(model) },
        dataType: 'text',
        success: function (data) {

    [HttpPost]
    public JsonResult DoSomething(string json)
    {
        var model = new JavaScriptSerializer().Deserialize<Valuation>(json);

- more urgent jest

---

为了使其正常工作，请严格按照Ajax调用的格式进行操作。 - Graham Laight

Answer 7

以下是如何让它对我正常工作的方法：

var things = [
    { id: 1, color: 'yellow' },
    { id: 2, color: 'blue' },
    { id: 3, color: 'red' }
];

$.ajax({
    ContentType: 'application/json; charset=utf-8',
    dataType: 'json',
    type: 'POST',
    url: '/Controller/action',
    data: { "things": things },
    success: function () {
        $('#result').html('"PassThings()" successfully called.');
    },
    error: function (response) {
        $('#result').html(response);
    }
});

使用大写字母"C"来表示"ContentType"。

- Myxomatosis

---

你救了我的一天。 - Ngọc Anh

Answer 8

这是您查询的可用代码，您可以使用它。

控制器

    [HttpPost]
    public ActionResult save(List<ListName> listObject)
    {
    //operation return
    Json(new { istObject }, JsonRequestBehavior.AllowGet); }
    }

javascript

  $("#btnSubmit").click(function () {
    var myColumnDefs = [];
    $('input[type=checkbox]').each(function () {
        if (this.checked) {
            myColumnDefs.push({ 'Status': true, 'ID': $(this).data('id') })
        } else {
            myColumnDefs.push({ 'Status': false, 'ID': $(this).data('id') })
        }
    });
   var data1 = { 'listObject': myColumnDefs};
   var data = JSON.stringify(data1)
   $.ajax({
   type: 'post',
   url: '/Controller/action',
   data:data ,
   contentType: 'application/json; charset=utf-8',
   success: function (response) {
    //do your actions
   },
   error: function (response) {
    alert("error occured");
   }
   });

- sach4all

Answer 9

我可以确认，在asp.net core 2.1上，删除内容类型使我的ajax调用起作用。

function PostData() {
    var answer = [];

    for (let i = 0; i < @questionCount; i++) {
        answer[i] = $(`#FeedbackAnswer${i}`).dxForm("instance").option("formData");
    }

    var answerList = { answers: answer }

    $.ajax({
        type: "POST",
        url: "/FeedbackUserAnswer/SubmitForm",
        data: answerList ,
        dataType: 'json',
        error: function (xhr, status, error) { },
        success: function (response) { }
    });
}

[HttpPost]
public IActionResult SubmitForm(List<Feedback_Question> answers)
{}

- MrSpyretos

Answer 10

将对象列表用另一个包含与MVC控制器所期望的参数名称相匹配的属性的对象包装起来是可行的。 重要的部分是对象列表周围的包装器。

$(document).ready(function () {
    var employeeList = [
        { id: 1, name: 'Bob' },
        { id: 2, name: 'John' },
        { id: 3, name: 'Tom' }
    ];      

    var Employees = {
      EmployeeList: employeeList
    }

    $.ajax({
        dataType: 'json',
        type: 'POST',
        url: '/Employees/Process',
        data: Employees,
        success: function () {          
            $('#InfoPanel').html('It worked!');
        },
        failure: function (response) {          
            $('#InfoPanel').html(response);
        }
    }); 
});


public void Process(List<Employee> EmployeeList)
{
    var emps = EmployeeList;
}

public class Employee
{
    public int Id { get; set; }
    public string Name { get; set; }
}

- Hoodlum