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

Question

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

我试图使用jQuery的Ajax()函数将一个对象数组传递给MVC控制器方法。当我进入PassThing()C#控制器方法时，参数“Things”为NULL。我尝试过使用一种类型的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; }
    }}

Answer 1

使用NickW的建议，我可以用things = JSON.stringify({ 'things': things });这是完整的代码。$(document).ready(function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;things&nbsp;=&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;id:&nbsp;1,&nbsp;color:&nbsp;'yellow'&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;id:&nbsp;2,&nbsp;color:&nbsp;'blue'&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;id:&nbsp;3,&nbsp;color:&nbsp;'red'&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;];&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;things&nbsp;=&nbsp;JSON.stringify({&nbsp;'things':&nbsp;things&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;$.ajax({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contentType:&nbsp;'application/json;&nbsp;charset=utf-8', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataType:&nbsp;'json', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;'POST', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;'/Home/PassThings', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;things, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success:&nbsp;function&nbsp;()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#result').html('"PassThings()"&nbsp;successfully&nbsp;called.'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;failure:&nbsp;function&nbsp;(response)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#result').html(response); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;});public&nbsp;void&nbsp;PassThings(List<Thing>&nbsp;things){ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;t&nbsp;=&nbsp;things;}public&nbsp;class&nbsp;Thing{ &nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;int&nbsp;Id&nbsp;{&nbsp;get;&nbsp;set;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;string&nbsp;Color&nbsp;{&nbsp;get;&nbsp;set;&nbsp;}}我从中学到了两件事：在Ajax()函数中，contentType和dataType设置是绝对必要的。如果他们失踪了就没用了。经过多次反复试验，我发现了这一点。要将对象数组传递给MVC控制器方法，只需使用JSON.strgify({‘Things’：Things})格式即可。我希望这能帮到别人！

Answer 2

你就不能这么做吗？var&nbsp;things&nbsp;=&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;id:&nbsp;1,&nbsp;color:&nbsp;'yellow'&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;id:&nbsp;2,&nbsp;color:&nbsp;'blue'&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;id:&nbsp;3,&nbsp;color:&nbsp;'red'&nbsp;}];$.post('@Url.Action("PassThings")',&nbsp;{&nbsp;things:&nbsp;things&nbsp;}, &nbsp;&nbsp;&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#result').html('"PassThings()"&nbsp;successfully&nbsp;called.'); &nbsp;&nbsp;&nbsp;});.然后用[HttpPost]public&nbsp;void&nbsp;PassThings(IEnumerable<Thing>&nbsp;things){ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;do&nbsp;stuff&nbsp;with&nbsp;things&nbsp;here...}