如何通过Ajax将复杂的对象发布到MVC 4控制器

本文关键字:MVC 控制器 对象 Ajax 何通过 复杂 | 更新日期: 2023-09-27 17:57:33

我有一个名为DrawDie的对象,具有以下属性:

ID
PlantID : int
QtyOnHand : int
SizeUS : double
SizeMetric : double
CaseSize : string
Style : string

我有一个名为DieOrder的对象,具有以下属性:

ID : int
DrawDie : DrawDie
DrawDieID : int
PlantID : int
PurchaseOrder : string
Qty : int

我想通过Ajax请求将我的对象发布到MVC控制器。我宁愿不使用第三方图书馆。我试着把它贴成这样:

        var DieOrder = new Object();
        var DrawDie = new Object();
        DieOrder.Qty = $("#Qty").val();
        DieOrder.DrawDieID = $("#DrawDieID").val();

        DrawDie.CaseSize = $("#DrawDie_CaseSize").val();
        DrawDie.Qty = $("#Qty").val();          
        DrawDie.ID = dieID;
        DrawDie.QtyOnHand = 0;
        DrawDie.SizeUS = $("#DrawDie_SizeUS");
        DrawDie.SizeMetric = $("#DrawDie_SizeMetric");
        DrawDie.PlantID = $("#PlantID").val();
        DrawDie.IsTransfer = "N";
        DieOrder.PlantID = $("#PlantID").val();
        DieOrder.OrderedBy = $("#OrderedBy").val();
        DieOrder.PurchaseOrder = $("#PurchaseOrder").val();
        DieOrder.DrawDie = DrawDie;

        $.ajax({
            url: "Order/OrdDie",
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(DieOrder),
            success: handleData

        });
    });

我有两个问题。第一,我的方法还远吗?还是可以?我得到一个UncaughtType错误:将循环结构转换为JSON。我如何重组我的请求,这样我就不会出现这样的错误?我不确定为什么会出现这个错误。

感谢

更新:

 DrawDie.SizeUS = $("#DrawDie_SizeUS").val();
 DrawDie.SizeMetric = $("#DrawDie_SizeMetric").val();

我错过了.val()

如何通过Ajax将复杂的对象发布到MVC 4控制器

您真正遇到的问题是,控制器将DieOrder对象的所有内容解释为控制器操作的参数。

如果您的控制器操作看起来像这样。。。

[HttpPost]
public void OrdDie(OrderDieViewModel model)
{
    // Some operations
}

然后字符串化的数据应该是这样的:

{
    'model': DieOrder
}

所以,你真的只是错过了打$.ajax电话之前的一步:

var DrawDie = {
    // Properties...
};
var DieOrder = {
    // Properties...
    'DrawDie': DrawDie
};
var data = {
    'model': DieOrder
};
$.ajax({
    // Spec object here.
});

简而言之?数据对象的内容必须与正在调用的操作的参数列表匹配这意味着,如果只将一个模型传递给JSON操作,则数据对象必须只有一个成员:该模型对象的JavaScript表示。

尝试将dataType:'json'添加到您的ajax请求中:

$.ajax({
    url: "Order/OrdDie",
    type: 'POST',
    cache: false,
    data: JSON.stringify(_data),
    dataType: 'json',
    contentType: 'application/json',
    success: handleData
});

此外,您可以初始化JS对象,如下所示:

var DieOrder = {};
var DrawDie = {};

我希望这能有所帮助!