Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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"}}]}

share|improve this question
Any errors in browser console? – Floradu88 Apr 7 at 18:00

1 Answer

up vote 1 down vote accepted

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.

share|improve this answer
   
Thank you! That's it!!! – ekenman Apr 7 at 19:06
@ekenman Glad I could help. – Floradu88 Apr 8 at 5:13

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.