Parsing Json array of object to c# array of class in MVC3

Question

I'm trying to pass an array of objects from my view to my Controller. However each object only contains null values. I'm stuck.

My c# class:

 public class CalendarColor
    {
        public string BackgroundColor { get; set; }
        public string BorderColor { get; set; }
        public string ItemType { get; set; }
        public string LocationId { get; set; }
        public string TextColor { get; set; }
    }

My method in the controller:

    [HttpPost]
    public ActionResult SaveColors(IEnumerable<CalendarColor> calendarColors)
    {
        do the stuff
    }

And this is the javascript:

        //The Array that will hold the CalendarColorObjects 
        var calendarColors = [];

        //Loop through the table with the settings 
        $('#tblColorSettings > tbody  > tr').each(function () {
            var calendarColor = {};
            calendarColor.ItemType = $(this).find('td:first').text().trim();
            calendarColor.LocationId = $(this).attr('data-location');
            calendarColor.BackgroundColor = $(this).find('td:nth(1)').find('input').val();
            calendarColor.BorderColor = $(this).find('td:nth(2)').find('input').val();
            calendarColor.TextColor = $(this).find('td:nth(3)').find('input').val();

            //Add to the Array
            calendarColors.push({ CalendarColor : calendarColor });
        });

        var urlSaveSettings = '/settings/savecolors';
        var calendarColorsToBeSaved = { calendarColors: calendarColors };

        $.ajax({
            type: 'POST',
            url: urlSaveSettings,
            contentType: 'application/json; charset=utf-8',
            traditional: true,
            data: JSON.stringify(calendarColorsToBeSaved),
            success: function (serverMessage) {
                if (serverMessage == "OK") {
                    alert('OK');
                }
            },

            error: function (msg) {
                alert(msg);
            }
        });

I get an array of empty objects in my controller method. I just cant seem to find out what is wrong.

The JSon looks like this:

{"calendarColors":[{"CalendarColor":{"ItemType":"Booking","LocationId":"1","BackgroundColor":"#464646","BorderColor":"#FFFFFF","TextColor":"#7c541b"}},{"CalendarColor":{"ItemType":"Booking","LocationId":"3","BackgroundColor":"#464646","BorderColor":"#FFFFFF"

...

","BackgroundColor":"#ff9b99","BorderColor":"#000000","TextColor":"#ff5a56"}}]}

Answer 1

The problem might be that you encapsulate the objects in the array:

//Loop through the table with the settings 
        $('#tblColorSettings > tbody  > tr').each(function () {
            var calendarColor = {};
            calendarColor.ItemType = $(this).find('td:first').text().trim();
            calendarColor.LocationId = $(this).attr('data-location');
            calendarColor.BackgroundColor = $(this).find('td:nth(1)').find('input').val();
            calendarColor.BorderColor = $(this).find('td:nth(2)').find('input').val();
            calendarColor.TextColor = $(this).find('td:nth(3)').find('input').val();

            //just add the objects to the array
            calendarColors.push(calendarColor);
        });

I posted only the code that needs to change.