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

Question

I have an object called DrawDie with the following properties:

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

I have an object called DieOrder with the following properties:

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

I would like to post my object to an MVC controller via an Ajax request. I would prefer not to use a 3rd party library. I am trying to post it like this:

        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


        });

    });

I have two questions. One, is my approach way off or is it okay ? I am getting an UncaughtType error: Converting circular structure to JSON. How do I restructure my request so I do not get such an error? I am unsure of why I am getting this error.

Thanks

Update:

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

I was missing the .val()

Answer 1

The problem you're really having is that your controller is interpreting all of the contents of your DieOrder object as arguments to your controller action.

If your controller action looks like this...

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

...Then the data that your stringifying should look like this:

{
    'model': DieOrder
}

...so, you're really just missing a step prior to making your $.ajax call:

var DrawDie = {
    // Properties...
};

var DieOrder = {
    // Properties...
    'DrawDie': DrawDie
};

var data = {
    'model': DieOrder
};

$.ajax({
    // Spec object here.
});

In short? Your data object's contents must match the argument list of the action you are calling. This means that if you pass only a model to your JSON action, your data object must have only one member: the JavaScript representation of that model object.

Answer 2

Try adding dataType: 'json' to your ajax request:

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

In addition you can initialize JS objects like this:

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

I hope this help!