javascript: json object with arrays serialized for use in .NET MVC action

Question

simple question:

I want to post some data to an action like this:

        var data = {
            Prop1 : 'a',
            ListOfObjects: [{ PropertyA: 1, PropertyB: 2 }, { PropertyA: 3, PropertyB: 4}]
        };

When I send this data to my Action via JQuery AJAX, my model is partially filled:

public class MyObject{
    public int PropertyA {get;set;}
    public int PropertyB {get;set;}
}

public class MyModel{
    public string Prop1 {get;set;}
    public List<MyObject> ListOfObjects {get;set;}
}

public JsonResult Save(MyModel model)
.
.
.
model.Prop1 //Is okay!
model.ListOfObjects[0] // is okay too...List has 2 items
model.ListOfObjects[0].PropertyA; //Nope...no values inside this model...

I guess the reason is, that the serialized HTTP Data are wrong, they are like ListOfObjects[0][PropertyA] <- but it should be ListOfObjkects[0].PropertyA

Does anyone know what to do?!

EDIT: My JQuery AJAX code:

$.ajax({
                    type: 'POST',
                    url: saveURL,
                    dataType: 'json',
                    data: data,
                    complete: function () {
                        DeleteMainLoader();
                    },
                    success: function success(data, textStatus, jqXHR) {
                        if (data.success) {
                            alert('win!')
                        }
                        else {
                            alert('error');
                        }

                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert('errrrrooooorrrr');
                    }
                });

Yeah thanks, I missed a "," but not in my code :) I typed all this outta my mind, because I was at work at this time. I edited my first post and added my jquery ajax call i used — DoubleVoid
– DoubleVoid, Commented Nov 25, 2013 at 15:29
How is the data you are posting serialized? I'll try something like: $.ajax({ ... data: JSON.stringify(your_js_object)}); — user1047100
– user1047100, Commented Nov 25, 2013 at 15:39

Dave Ward · Accepted Answer · 2013-11-25 15:49:40Z

3

If you're using ASP.NET MVC 3 or later, the easiest thing to do there is to send JSON instead of URL encoded data. That makes complex, nested objects a lot easier to work with since jQuery doesn't need to understand any of ASP.NET MVC's conventions at that point.

To do that, just build up an object matching your server-side class, stringify it, and be sure to set a content type of application/json on the request:

var data = {
  Prop1 : 'a',
  ListOfObjects: [{ PropertyA: 1, PropertyB: 2 }, { PropertyA: 3, PropertyB: 4}]
};

$.ajax({
  type: 'POST',
  url: saveURL,
  // This is unnecessary; jQuery will detect the response's dataType based
  //  on its Content-Type header automatically.
  dataType: 'json',
  // This sets the request's Content-Type to let MVC know how to interpret the
  //  data parameter.
  contentType: 'application/json',
  // I can't remember if this is 100% necessary in this case, but some ASP.NET 
  //  endpoints only work if you match up the method's parameter name like this.
  data: JSON.stringify({ model: data })
});

answered Nov 25, 2013 at 15:49

Dave Ward

60.7k14 gold badges119 silver badges134 bronze badges

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

1 Comment

DoubleVoid Over a year ago

wow thanks! This works like a charm :D And yes I have to use model : data ... otherwise I get a server error.

score 0 · Accepted Answer · 2013-11-25 15:54:19Z

0

Try something like this, I guess your problem is because you are sending a js object, instead of a proper json.

var data = {
            Prop1 : 'a',
            ListOfObjects: [{ PropertyA: 1, PropertyB: 2 }, { PropertyA: 3, PropertyB: 4}]
           };

$.ajax({
         type: 'POST',
         url: saveURL,
         dataType: 'json',
         data: JSON.stringify(data),
         // rest of the code         
      });

edited Nov 25, 2013 at 15:54

answered Nov 25, 2013 at 15:40

user1047100

1 Comment

DoubleVoid Over a year ago

Hi thanks for your answer, but this didn't work. Dave Ward's answer works fine. The contentType was missing.

Collectives™ on Stack Overflow

javascript: json object with arrays serialized for use in .NET MVC action

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related