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

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#控制器方法时，参数“东西”为空。我已经尝试过使用列表类型的参数，但这也不起作用。我做错了什么?

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

11 个解决方案

#1

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({“东西”:事情});这是完整的代码。

$(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.

   在ajax()函数中，内容类型和数据类型设置是绝对必要的。如果他们失踪了，那就没用了。经过反复试验，我发现了这一点。

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

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

I hope this helps someone else!

我希望这能帮助别人!

#2

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...
}

#3

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)。没有表单的MVC控制器?)

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

#4

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
  }

#5

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

#6

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反序列化它。反序列化 (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);

#7

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

#8

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

如果您正在使用ASP。那么您应该只传递数据:JSON.stringify(things)。

And your controller should look something like this:

控制器应该是这样的

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

#9

Modification from @veeresh i

修改从@veeresh我

 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
      }

#10

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

#11

I am using a .Net Core 2.1 Web Application and could not get a single answer here to work. I either got a blank parameter (if the method was called at all) or a 500 server error. I started playing with every possible combination of answers and finally got a working result.

我正在使用。net Core 2.1 Web应用程序，在这里我无法得到一个有效的答案。我要么得到一个空参数(如果调用了该方法)，要么得到一个500服务器错误。我开始尝试各种可能的答案组合，最终得到了一个有效的结果。

In my case the solution was as follows:

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

Script - stringify the original array (without using a named property)

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

And in the controller method, use [FromBody]

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

Failures include:

• Naming the content

  命名的内容

  data: { content: nodes }, // Server error 500

  数据:{内容:节点}，//服务器错误500

• Not having the contentType = Server error 500

  没有contentType = Server error 500

Notes

• dataType is not needed, despite what some answers say, as that is used for the response decoding (so not relevant to the request examples here).
• 不需要数据类型，尽管有些答案是这样说的，因为它用于响应解码(因此与这里的请求示例不相关)。
• List<Thing> also works in the controller method
• List 也在controller方法中工作