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

• harsimranb: Check this out: stackoverflow.com/a/5410200/487940
• Ehsan Sajjad: why you dont use ajax.beginform for this
• Bill Greer: 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.

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.

• Bill Greer: 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: 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: 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: I think you may have forgotten to include the line that makes the circular structure error go away...

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!