json object binding in MVC

Question

I seem to be having a problem passing a javascript object, which contains an array, to my MVC controller. I have an object which contains two strings, and a string array. The two strings bind correctly, but as soon as I add an array to the obect I get the following error:

Collection is read-only.

Here is my JS + Ajax code:

   $('.submit').on('click', function() {

        var viewModel = {
            FName: "John",
            LName: "Doe",
            DaysOfTheWeek: ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']
        };

        console.log(viewModel);

        $.ajax({
            url: "/Home/JsonMethod",
            type: "POST",
            data: JSON.stringify(viewModel),
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                console.log(data);
            }
        });

    });

Here is my MVC controller:

    public JsonResult JsonMethod(Person person)
    {
        return Json(person, JsonRequestBehavior.AllowGet);
    }

Here is the Person class:

    public class Person
    {
        public string FName { get; set; }
        public string LName { get; set; }
        public string[] DaysOfTheWeek { get; set; }

        public Person()
        {
            DaysOfTheWeek = new string[7];
        }
    }

I've had a look online, but I can't find anything that deals with the following issue. Any help with this matter would be great.

Have you tried using generics: List<string> instead of string[] in your Person class? — Adam Moszczyński
– Adam Moszczyński, Commented Sep 11, 2013 at 8:19
Changed it from an array to a list, and it worked! Thanks @Adam — CinnamonBun
– CinnamonBun, Commented Sep 11, 2013 at 8:21

Eugene Yastrebov · Accepted Answer · 2013-09-11 08:19:51Z

6

Problem might be because you've initialized array in your Person's constructor and when deserializer sees that there are already collection - it tries to add to it instead of create new one. Try to either remove initialization from constructor or change type to List.

answered Sep 11, 2013 at 8:19

Eugene Yastrebov

3992 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

joym8 Over a year ago

Couldn't have imagined that's where the problem lies.

MisterJames · Accepted Answer · 2013-09-11 16:29:27Z

List binding is simple and straightforward, but there are valid times (or uncontrollable times) to work with arrays as parameters on controller actions.

You can modify your $.ajax call to set the traditional parameter to true, which works with the expectations of the default model binder in the MVC Framework.

    $.ajax({
        url: "/Home/JsonMethod",
        traditional: true,
        type: "POST",
        data: JSON.stringify(viewModel),
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            console.log(data);
        }
    });

More details and examples here: http://theycallmemrjames.blogspot.ca/2010/05/aspnet-mvc-and-jquery-part-4-advanced.html

Cheers.

Marko · Accepted Answer · 2013-09-11 19:13:43Z

0

You need to change the property from:

public string[] DaysOfTheWeek { get; set; }

To:

public List<string> DaysOfTheWeek { get; set; }

answered Sep 11, 2013 at 19:13

Marko

13.4k12 gold badges52 silver badges64 bronze badges

Collectives™ on Stack Overflow

json object binding in MVC

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related