C# 使用 jQuery Ajax 将对象列表传递到 MVC 控制器方法中

Passing A List Of Objects Into An MVC Controller Method Using jQuery Ajax

提问by Halcyon

I'm trying to pass an array of objects into an MVC controller method using jQuery's ajax() function. When I get into the PassThing() C# controller method, the argument "things" is null. I've tried this using a type of List for the argument, but that doesn't work either. What am I doing wrong?

我正在尝试使用 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; }
    }
}

采纳答案by Halcyon

Using NickW's suggestion, I was able to get this working using things = JSON.stringify({ 'things': things });Here is the complete code.

使用 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; }
}

There are two things I learned from this:

我从中学到了两件事：

1. The contentType and dataType settings are absolutely necessary in the ajax() function. It won't work if they are missing. I found this out after much trial and error.

2. To pass in an array of objects to an MVC controller method, simply use the JSON.stringify({ 'things': things }) format.

1. ajax() 函数中的 contentType 和 dataType 设置是绝对必要的。如果它们丢失，它将无法工作。经过多次反复试验，我发现了这一点。

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

I hope this helps someone else!

我希望这对其他人有帮助！

回答by nick_w

Formatting your data that may be the problem. Try either of these:

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

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

Or (from How can I post an array of string to ASP.NET MVC Controller without a form?)

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

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

回答by lanternmarsh

Couldn't you just do this?

你不能这样做吗？

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.');
   });

...and mark your action with

...并标记您的操作

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

回答by Veera Induvasi

I have perfect answer for all this : I tried so many solution not able to get finally myself able to manage , please find detail answer below:

我对这一切都有完美的答案：我尝试了很多解决方案都无法最终让自己能够管理，请在下面找到详细答案：

       $.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);
            }
        });

Controler

控制器

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
  }

回答by FleGMan

If you are using ASP.NET Web API then you should just pass data: JSON.stringify(things).

如果您使用的是 ASP.NET Web API，那么您应该只通过 data: JSON.stringify(things).

And your controller should look something like this:

你的控制器应该是这样的：

public class PassThingsController : ApiController
{
    public HttpResponseMessage Post(List<Thing> things)
    {
        // code
    }
}

回答by Athul Nalupurakkal

     var List = @Html.Raw(Json.Encode(Model));
$.ajax({
    type: 'post',
    url: '/Controller/action',
    data:JSON.stringify({ 'item': List}),
    contentType: 'application/json; charset=utf-8',
    success: function (response) {
        //do your actions
    },
    error: function (response) {
        alert("error occured");
    }
});

回答by sach4all

This is working code for your query,you can use it.

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

Controler

控制器

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

javascript

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");
   }
   });

回答by Minhajul Islam

Modification from @veeresh i

来自@veeresh i 的修改

 var data=[

                        { id: 1, color: 'yellow' },
                        { id: 2, color: 'blue' },
                        { id: 3, color: 'red' }
                        ]; //parameter
        var para={};
        para.datav=data;   //datav from View


        $.ajax({
                    traditional: true,
                    url: "/Conroller/MethodTest",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    data:para,
                    success: function (data) {
                        $scope.DisplayError(data.requestStatus);
                    }
                });

In MVC



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
      }

回答by more urgent jest

The only way I could get this to work is to pass the JSON as a string and then deserialise it using JavaScriptSerializer.Deserialize<T>(string input), which is pretty strange if that's the default deserializer for MVC 4.

我可以让它工作的唯一方法是将 JSON 作为字符串传递，然后使用 反序列化它JavaScriptSerializer.Deserialize<T>(string input)，如果这是 MVC 4 的默认反序列化器，这很奇怪。

My model has nested lists of objects and the best I could get using JSON data is the uppermost list to have the correct number of items in it, but all the fields in the items were null.

我的模型具有嵌套的对象列表，我可以使用 JSON 数据获得的最佳结果是最上面的列表，其中包含正确数量的项目，但项目中的所有字段都为空。

This kind of thing should not be so hard.

这种事情不应该这么难。

    $.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);

回答by Hoodlum

Wrapping your list of objects with another object containing a property that matches the name of the parameter which is expected by the MVC controller works. The important bit being the wrapper around the object list.

用另一个包含与 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; }
}