How do I post a complex object to an MVC 4 controller via Ajax?

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()

Pathachiever11. I checked out the posting but it really did not clarify things for me. I do not know why I am getting the circular reference error. — Bill Greer
– Bill Greer, Commented Apr 9, 2014 at 16:43

Andrew Gray · Accepted Answer · 2014-04-09 19:07:28Z

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.

edited Apr 9, 2014 at 19:07

answered Apr 9, 2014 at 16:32

Andrew Gray

3,7903 gold badges43 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bill Greer Over a year ago

Andrew. Thanks for the info, but I am never getting to the controller. I am getting an UncaughtType error: Converting circular structure to JSON in my javascript code so the ajax request is never made.

Andrew Gray Over a year ago

Aah, my apologies! I don't see any circular reference, though. Are you showing us everything (that you can) about the JavaScript data structures that you're trying to send to the server?

Bill Greer Over a year ago

It turns out that when I remove the following line in my javascript the UncaughtType error: Converting circular structure to JSON error goes away. Any ideas why ?

Andrew Gray Over a year ago

I think you may have forgotten to include the line that makes the circular structure error go away...

Ragnar · Accepted Answer · 2014-04-09 16:26:10Z

0

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!

answered Apr 9, 2014 at 16:26

Ragnar

4,6281 gold badge33 silver badges42 bronze badges

Collectives™ on Stack Overflow

How do I post a complex object to an MVC 4 controller via Ajax?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related