Ajax post to ASP.net MVC controller - object properties are null

Question

I've got an ajax post being constructed like this:

var myData = [
    {
        id: "a",
        name: "Name 1"
    },
    {
        id: "b",
        name: "Name 2"
    }
];

$.ajax({
    type: 'POST',
    url: '/myurl/myAction',
    data: { items: myData },
    dataType: 'json',
    error: function (err) {
        alert("error - " + err);
    }
});

And an MVC controller:

[HttpPost]
public JsonResult MyAction(MyClass[] items)
{

}

MyClass is just a simple representation of the data:

public class MyClass {
    public string Name {get; set; }
    public string Id {get; set; }
}

When the javascript makes the post request, the controller action does indeed receive 2 items, however the properties (id, name) in these items are null.

Checking the request in fiddler, the body looks like this:

Name                 | Value
items[0][Name]       | Name 1
items[0][Id]         | a
items[1][Name]       | Name 2
items[1][Id]         | b

Have I missed something?

Just a guess, maybe it's because the properties are lowercase in javascript and uppercase in C#. — Tallmaris
– Tallmaris, Commented May 14, 2013 at 15:47
No, it's not that. The JSON serializer is not case sensitive. — Darin Dimitrov
– Darin Dimitrov, Commented May 14, 2013 at 15:52
Another scenario where properties are null - stackoverflow.com/questions/18124405/… — LCJ
– LCJ, Commented Jan 20, 2014 at 13:11

Hannele · Accepted Answer · 2013-11-12 20:14:00Z

65

Have I missed something?

Yes, take a look at the following article to understand the correct wire format that the default model binder expects for binding collections. In other words, for this to work, instead of:

items[0][Name]       | Name 1
items[0][Id]         | a
items[1][Name]       | Name 2
items[1][Id]         | b

your payload should have looked like this:

items[0].Name       | Name 1
items[0].Id         | a
items[1].Name       | Name 2
items[1].Id         | b

Unfortunately with jQuery it can be quite frustrating to achieve this payload. For this reason I would recommend that you use a JSON payload if you want to send complex objects/arrays to your server with AJAX:

$.ajax({
    type: 'POST',
    url: '/myurl/myAction',
    data: JSON.stringify({ items: myData }),
    contentType: 'application/json',
    error: function (err) {
        alert("error - " + err);
    }
});

Things to notice:

data: JSON.stringify({ items: myData }) instead of data: { items: myData }
Added contentType: 'application/json'
Gotten rid of dataType: 'json'

Now your payload looks like this:

{"items":[{"id":"a","name":"Name 1"},{"id":"b","name":"Name 2"}]}

edited Nov 12, 2013 at 20:14

Hannele

9,6977 gold badges51 silver badges70 bronze badges

answered May 14, 2013 at 15:46

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

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

5 Comments

Sanchitos Over a year ago

Took two hours of my time trying to figure out what was wrong with my code. Thanks dude!

lhan Over a year ago

This is probably obvious but also note that the { get; set; } on your properties server side will also make or break this! That is all I was missing but this pointed me in the right direction. Thanks!

BadFeelingAboutThis Over a year ago

@Ihan - you just saved what little sanity I had left.

ziaprog Over a year ago

i missed content type

Misam Over a year ago

how would you pass request verification token along with this request, AFAIK adding 'content-type' doesn't pass the token correctly.

HamidReza · Accepted Answer · 2016-02-20 11:56:48Z

-4

you can use this code to solve the problem :

$.ajax({
    url: '/myurl/myAction',
    data: { '': items },
    method: "POST",
    dataType: 'json',
    success: function (xhr, status, response) {
    },
    error: function (xhr, status, response) {
    }
});

[HttpPost]
public JsonResult MyAction(IEnumerable<MyClass> items)
{

}

answered Feb 20, 2016 at 11:56

HamidReza

1,95421 silver badges17 bronze badges

Collectives™ on Stack Overflow

Ajax post to ASP.net MVC controller - object properties are null

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related