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

Question

我有一个名为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控制器。 我宁愿不使用第3方库。 我正在尝试像这样发布它：

        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（）

Answer 1

您真正遇到的问题是，控制器将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表示形式。

Answer 2

尝试将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 = {};

希望对您有所帮助！