How do I Serialize a jQuery Object Array for JSON Post?

Question

I'm going bananas trying to figure out how to serialize this (in MVC 3):

// 1. I load the products array in the View:

var products = [];
if (quantity > 0) {                   
    products.push({ 'id': id, 'quantity': quantity });
}

// 2. Then I POST a bunch of values, along with products, like this:

$.ajax({
    type: "POST",
    url: '/Orders/Create/',
    data:
    {
        'ShipToPersonId': shipToPersonId,
        'ShipToPersonType': selectedPersonType,
        'ShippingAddressId': shipToAddressId,
        'ShippingInstructions': 'Not yet implemented',
        'LineItems': products,
        'OrderOwnerId': selectedOnBehalfOfPersonId
    },
    dataType: "json",
    success: function (data) {
        alert('Saved: ' + data);
    },
    error: function (data) {
        alert('failed:' + data);
    }
 });

// 3. My Controller looks like this:

 public JsonResult Create(
                           int ShipToPersonId, 
                           string ShipToPersonType, 
                           int ShippingAddressId, 
                           string ShippingInstructions, 
                           List<LineItem> LineItems, 
                           int OrderOwnerId)
    {...}

// 4. The LineItem class:

public class LineItem{
    public string id {get;set;}
    public string quantity { get; set; }
}

In the controller functions, all values are passed correctly, except for the LineItem list; it has the correct count of elements, however the id and quantity values are null.

I've put the call through Fiddler, and this is what I get:

[Fiddler WebForms View]

=================================
Body                    | Value
========================|========
LineItems[0][id]        | 50
LineItems[0][quantity]  | 10
LineItems[1][id]        | 46
LineItems[1][quantity]  | 20
LineItems[2][id]        | 48
LineItems[2][quantity]  | 30
LineItems[3][id]        | 30
LineItems[3][quantity]  | 50

[Fiddler QueryString View]

ShipToPersonId=533
&ShipToPersonType=Rep
&ShippingAddressId=517
&ShippingInstructions=Not+yet+implemented
&LineItems%5B0%5D%5Bid%5D=50&LineItems%5B0%5D%5Bquantity%5D=10
&LineItems%5B1%5D%5Bid%5D=46&LineItems%5B1%5D%5Bquantity%5D=20
&LineItems%5B2%5D%5Bid%5D=48&LineItems%5B2%5D%5Bquantity%5D=30
&LineItems%5B3%5D%5Bid%5D=30&LineItems%5B3%5D%5Bquantity%5D=50
&OrderOwnerId=533

Obviously, the serialized string and the controller parameter are not "compatible". Am I not formatting the products array correctly in the view, or is it the Line Items list and class in the controller that are not right, or both??

Can anybody shed some light on this? Thanks!

Anybody on this?

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

Here is your answer. It looks like you either need to use an attribute on top of your action or use a plugin which serializes your json into something the default model binder understands.

Also, have you tried JSON.stringify({'foo', 'bar'}) on your object when you set it as your data in your ajax request?

edited May 23 '17 at 11:52

Community

1
1

answered Jul 28 '11 at 16:22

John Kalberer

5,690
1
23
27

How do I Serialize a jQuery Object Array for JSON Post?

1 Answers1