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

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

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

I hope this helps someone else!