This is very frustrating I have looked at a number of examples yet I am still unable to receive any data on the server. I have the following JS
var checkoutModel = { };
$('form#card input').each(function () {
var id = $(this).attr("id")
var value = $(this).val();
checkoutModel[id] = value;
});
$.ajax({
url: "/checkout",
type: 'post',
dataType: 'json',
data: JSON.stringify(checkoutModel),
contenttype: 'application/json; charset=utf-8',
error: function (xhr) {
alert("error: " + xhr);
},
success: function (data) {
alert(data);
}
});
The CheckoutController's action looks like this (where /checkout maps to Checkout/OrderInfo)
[HttpPost]
[Authorize]
public virtual JsonResult OrderInfo(CheckoutModel checkoutModel)
But on the server my checkoutModel's properties are always NULL.
Any ideas where I have gone wrong??
Thanks
I use something like this below:
Supposed your CheckoutModel has Id and Value property something like
public Int32 Id {get;set}
public string Value {get;set}
on your ajax
var checkoutModel = { };
checkoutModel.Id = 1234;
checkoutModel.Value = "This is a Value";
$.ajax({
type: "POST",
url: "Your Controller URL",
data: checkoutModel ,
traditional: true,
success: function (data) {
alert(data);
},
error: function (xhr) {
alert("error: " + xhr);
},
dataType: 'json'
});
then your Controller
public JsonResult OrderInfo(CheckoutModel checkoutModel)
{
// int id = checkoutModel.Id; result : 1234
// string value = checkoutModel.Value; result : "This is a Value"
}
Best Regards