CODEWITHSUNDEEP
.netasp.net-mvcajaxjson
FSou1
FSou1

Reputation: 1941

ASP .NET MVC + Submit + JSON

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

Upvotes: 0

Views: 4973

Answers (1)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038760

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'
});

Upvotes: 5

Related Questions