0

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

Paul
  • 1,457
  • 1
  • 19
  • 36

1 Answers1

0

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

BizApps
  • 6,048
  • 9
  • 40
  • 62