Posting array of JSON objects to MVC3 action method via jQuery ajax

Question

Does the model binder not suport arrays of JSON objects? The code below works when sending a single JSON domain object as part of the ajax post. However, when sending an array of JSON domain objects, the action parameter is null.

     var domains = [{
                        DomainName: 'testt1',
                        Price: '19.99',
                        Available: true
                    }, {
                        DomainName: 'testt2',
                        Price: '15.99',
                        Available: false
                    }];

                $.ajax({
                    type: 'POST',
                    url: Url.BasketAddDomain,
                    dataType: "json",
                    data: domains,
                    success: function (basketHtml) {

                    },
                    error: function (a, b, c) {
                        alert('A problem ocurred');
                    }
            });

This is the action method:

public ActionResult AddDomain(IEnumerable<DomainBasketItemModel> domain)
{
    ...

Any ideas if it is possible to do this?

EDIT

@Milimetric

Your solution works! However, this is my fault, but the code I demonstrated isn't the real code of my problem, I was trying to show equivalent code that is easier to understand.

I am actually creating an array, then interating some DOM elements and pushing a JSON object onto the array, then posting this array as the data...

var domains = [];

                $(this).parents('table').find('input:checked').each(function () {
                    var domain = {
                        DomainName: $(this).parent().parent().find('.name').html(),
                        Price: $(this).parent().parent().find('.price span').html(),
                        Available: $(this).parent().parent().find('.available').html() == "Available"
                    }

                    domains.push(domain);
                });

                $.ajax({
                    type: 'POST',
                    url: Url.BasketAddDomain,
                    dataType: "json",
                    data: { domain: domains },
                    success: function (basketHtml) {

                    },
                    error: function (a, b, c) {
                        alert('A problem ocurred');
                    }
                });

Related - http://stackoverflow.com/questions/2515773/ajax-post-of-javascript-string-array-to-jsonresult-as-liststring-always-returns — ChrisF, May 09 '13 at 20:36

Milimetric · Accepted Answer · 2012-10-01T13:01:29.257

32

You need:

var domains = { domains: [... your elements ...]};

            $.ajax({
                type: 'post',
                url: 'Your-URI',
                data: JSON.stringify(domains),
                contentType: "application/json; charset=utf-8",
                traditional: true,
                success: function (data) {
                    ...
                }
            });

In general, check out the Request object in the debugger, you'll see what's being passed and get an idea of how to "speak" HTTP.

NOTE: Just found this out. The model binder chokes on nullable decimal properties like:

public decimal? latitude { get; set; }

So it won't bind that if you're posting to it with a json string that looks like this:

{"latitude":12.0}

But it WILL work if you post something like this:

{"latitude":"12.0"}

See: http://syper-blogger.blogspot.com/2011/07/hello-world.html

edited Oct 01 '12 at 13:01

answered May 17 '11 at 13:11

Milimetric

13,411
4
44
56

2

thanks for the reply - and correct solution, but I have updated my question – jcvandan May 17 '11 at 13:21
2

K, edited my answer, I think the key is JSON.stringify and contentType: "application/json ..." – Milimetric May 17 '11 at 13:38
1

The model binder's really smart actually. It can bind as complex of an object as you can throw at it. Lists within lists of complex entities? No problem. I'm quite happy with it. With a little elbow grease you can even make a hierarchical form that allows editing and adding entities all down through the hierarchy. – Milimetric May 17 '11 at 19:29
2

+1 Nice solution (although you don't need the `traditional: true` since your data is just a `string` after `JSON.stringify(...)` and the `traditional` option is just for how it serializes complex objects). – Alconja Jun 12 '11 at 03:36

Steve Mallory · Answer 2 · 2011-05-17T13:30:00.883

I had a similar problem. To solve it, I took a slightly different approach. Instead of a JSON object, I used arrays of hidden form variables. As long as the variable names matched up, model binding worked like a charm.

function AddDomainBasket(domainName, price, available) {

    if ( typeof AddDomainBasket.counter == 'undefined' ) {
        AddDomainBasket.counter = 0;
    }

    $("#some_form").append('<input type="hidden" name="[' + AddDomainBasket.counter + '].DomainName" value="' + domainName_index + '" />');
    $("#some_form").append('<input type="hidden" name="[' + AddDomainBasket.counter + '].Price" value="' + price + '" />');
    $("#some_form").append('<input type="hidden" name="[' + AddDomainBasket.counter + '].Available" value="' + available + '" />');

    ++AddDomainBasket.counter;
}

And then submit the serlialized form

$(this).parents('table').find('input:checked').each(function () {
    AddDomainBasket($(this).parent().parent().find('.name').html(),
                    $(this).parent().parent().find('.price span').html(),
                    $(this).parent().parent().find('.available').html() ==   "Available");
                }
            });

$.ajax({
    type: 'POST',
    url: Url.BasketAddDomain,
    data: $('#some_form').serialize(),
    success: function (basketHtml) {
        },
        error: function (a, b, c) {
            alert('A problem ocurred');
    }
});

+1 This is especially useful when one doesn't want to set the content type to 'application/json' — yoel halb, Aug 16 '12 at 15:28

Posting array of JSON objects to MVC3 action method via jQuery ajax

2 Answers2

Linked