Submit a list of objects from JS to MVC

Question

I need to submit a list of users. I have a MVC controller

[HttpPost]
public JsonResult Handler(List<User> users) {
   ...
}

where User is

public class User {
    public string name { get; set; }
    public string email { get; set; }
}

in JavaScript I send the array by jquery

    var users = {};
    for (var i = 0; i < 3; i++) {
        users [i] = {
            name: "User " + i, 
            email: "user" + i + "@test.net"
        }
    }

   $.ajax({
        type: "POST",
        data: {
                users: users
        },
        url: "http://test.net/order/handler",
        success: callback
    });

I get the list with 3 items, but parameters name and email are NULL.

Where am I wrong?

How are you trying to access the data in the resulting `users` variable? — Cerbrus, Aug 19 '14 at 09:44
Your class name is 'User', but the type in your list is List (ie. with an s). — routeburn, Aug 19 '14 at 09:45
@Exception: Eh, no. You don't need to (or rather, shouldn't) do that when using jQuery's ajax. — Cerbrus, Aug 19 '14 at 09:47

score 0 · Answer 1 · edited May 23 '17 at 10:26

Have you tried adding [FromBody] to the parameter? Example:

[HttpPost]
public JsonResult Handler([FromBody] List<User> users) {
   ...
}

Also it's important to set the ContentType of your ajax POST so that the ModelBinder knows what to use:

$.ajax({
    type: "POST",
    data: {
            users: users
    },
    url: "http://test.net/order/handler",
    success: callback,
    contentType: 'application/json'
});

Another thing: You may be doing a Cross-domain ajax post which has several implications. You can consider using Fiddler to see what is really happening to your request and post an update so we can help you further.

score 0 · Answer 2 · answered Aug 19 '14 at 09:59

0

Isn't it because you should be creating an array and then add objects to it:

    var users = [];
    for (var i = 0; i < 3; i++) {
        var user = {
            name: "User " + i, 
            email: "user" + i + "@test.net"
        }

        users[i] = user;
    }

   $.ajax({
        type: "POST",
        data: {
                users: users
        },
        url: "http://test.net/order/handler",
        success: callback
    });

answered Aug 19 '14 at 09:59

Praval 'Shaun' Tirubeni

670
4
10

1

No, it gives the same result. :-/ – podeig Aug 19 '14 at 10:02
He is doing an array, in his example, he reduces 2 lines doing exactly the same. – Yogurtu May 11 '15 at 20:54

score 0 · Answer 3 · answered Aug 19 '14 at 10:07

First of all you need to set valid json data:

var users = Array(), i;
for (i = 0; i < 3; i++) {
    users[i] =
    {
        name: "User " + i,
        email: "user" + i + "@test.net"
    };
}

Then send ajax request with dataType json:

$(document).ready(function() {
    $.ajax({
        type: "POST",
        dataType: 'json',
        data: {
            users: users
        },
        url: "http://test.net/order/handler",
        success: callback
    });
});

Submit a list of objects from JS to MVC

3 Answers3