ASP .NET MVC + Submit + JSON

时间:2011-01-22 11:28:48

标签: .net asp.net-mvc ajax json

我需要在一个请求中发送模型数据和JSON数据。这是什么意思:

如果我使用此功能发送JSON数据:

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

我有

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

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

但如果我发送请求<input type="submit">我有

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

如何在一个请求中发送jQuery数组(JSON数据)和SUPNew.Models.Order?


ResultArray- $ .toJSON(ResultArray)的内容,其中ResultArray是jQuery数组,如:

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

这是MVC 2

1 个答案:

答案 0 :(得分:5)

不要忘记设置请求内容类型:

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

现在在服务器端,您可能需要一个新的视图模型来聚合这两个对象:

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

并且:

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

同样在服务器端,除非您使用默认支持JSON的ASP.NET 3.0,否则需要编写custom handler capable of parsing it


更新:

您可以使用the following将表单序列化为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;
};

然后:

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