ASP .NET MVC + Submit + JSON

Question

I need to send Model data and JSON data in one request. What does it mean:

If i send JSON data with this function:

    $("#SaveOrder").click(function () {
        $.ajax({
            url: '/Manager/AddOrder',
            type: 'POST',
            dataType: 'json',
            data: $.toJSON(ResultArray),
            contentType: 'application/json; charset=utf-8'
        });
    });

i have

public ActionResult AddOrder(SUPNew.Models.Order newOrder, List<OrderList> ResultArray)

SUPNew.Models.Order newOrder = null  
List<OrderList> ResultArray = not null

but if i send request with <input type="submit"> i have

SUPNew.Models.Order newOrder = not null  
List<OrderList> ResultArray = null

How can i send jQuery array (JSON data) and SUPNew.Models.Order in one request?

Content of ResultArray- $.toJSON(ResultArray), where ResultArray is jQuery array like:

var CurrentOrder =
            [{
                'ProviderAn': $("#DdlProviders").val(),
                'ItemAn': $("#DdlItems").val()
            }];

And this is MVC 2

What is the content of ResultArray? And is this MVC 3? – Filip Ekberg Jan 22 '11 at 11:36 — Filip Ekberg, Jan 22 '11 at 11:36

score 5 · Accepted Answer · edited May 23 '17 at 12:18

Don't forget to set the request content type:

$('#SaveOrder').click(function () {
    $.ajax({
        url: '/Manager/AddOrder',
        type: 'POST',
        dataType: 'json',
        data: JSON.stringify({
            newOrder: { orderProp1: 'value1', orderProp2: 'value2' },
            resultArray: [
                { orderListProp1: 'value1', orderListProp2: 'value2' },
                { orderListProp1: 'value3', orderListProp2: 'value4' },
                { orderListProp1: 'value5', orderListProp2: 'value6' }
            ]
        }),
        contentType: 'application/json; charset=utf-8',
        success: function(result) {
            // the request succeeded
        }
    });

    // Don't forget to cancel the default action or if SaveOrder
    // is some link you might get redirected before the 
    // AJAX call ever had time to execute
    return false;
});

Now on the server side you might need a new view model which will aggregate those two objects:

public class MyViewModel
{
    public Order NewOrder { get; set; }
    public List<OrderList> ResultArray { get; set; }
}

and have:

[HttpPost]
public ActionResult AddOrder(MyViewModel model)
{
    ...
}

Also on the server side unless you are using ASP.NET 3.0 which supports JSON by default you need to write a custom handler capable of parsing it.

UPDATE:

You could use the following to serialize the form as JSON:

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

and then:

$.ajax({
    url: '/Manager/AddOrder',
    contentType: 'application/json',
    type: 'POST',
    dataType: 'json',
    data: JSON.stringify({
        newOrder: $('#SaveOrder').serializeObject(),
        resultArray: [
            { orderListProp1: 'value1', orderListProp2: 'value2' },
            { orderListProp1: 'value3', orderListProp2: 'value4' },
            { orderListProp1: 'value5', orderListProp2: 'value6' }
        ]
    }),
    contentType: 'application/json; charset=utf-8'
});

@user568262, in my answer I suggested using a view model (`MyViewModel`) which will aggregate both `NewOrder` and `ResultArray` properties and send them as a single JSON object. You could assign the `NewOrder` property using `form.serialize()` and leave the `ResultArray` property as in my example. Isn't this working for you? — Darin Dimitrov, Jan 22 '11 at 21:33
I tried for fake value like { ClientFIO : 'Hello' } and it works for form values and bind into "Order NewOrder". Now just need to find nice plugin for form->json data serialize and it should work. I hope :) — FSou1, Jan 22 '11 at 22:34
@user568262, please see if the proposed technique in my update works for you. — Darin Dimitrov, Jan 22 '11 at 22:38
Yeah, i found this serialize 5 min ago and was tring to make it work, but ur example didn't give any chance for mistake. It's awsome, u r my Guru :) Everything work perfect. Sorry, didn't watch very careful at ur first post. — FSou1, Jan 22 '11 at 22:47
Just one little problem. It isn't work RedirectToAction("Index") in AddOrder Action =\ — FSou1, Jan 22 '11 at 23:31
Is it any way without complete: function (data) { window.location.replace("/Manager"); } ? — FSou1, Jan 23 '11 at 03:57

ASP .NET MVC + Submit + JSON

1 Answers1