Passing JSON to a Controller with Multiple Models and/or Parameters via AJAX POST

Question

I wrote this Controller:

[HttpPost]
    public JsonResult CheckOut(List<POS_model> pos, double totalPayment)
    {
        try
        {
            var json = JsonConvert.SerializeObject(pos);
            DataTable posTable = (DataTable)JsonConvert.DeserializeObject(json, (typeof(DataTable)));
            posTable.Columns["discount_percent"].ColumnName = @"Discount %";

            POS m_pos = new POS();
            m_pos.Data = posTable;
            m_pos.totalPayment = totalPayment;
            m_pos.CheckOut();

            return Json(new
            {
                Status = "Success"
            });
        }
        catch
        {
            return Json(new
            {
                Status = "Fail"
            });
        }
    }

And i attempted wrote this AJAX script to call and submit the parameters to the Controller:(but it didn't work)

var totalPay = 1000;
var GatherPosItems = $('#tblPOS').tableToJSON();

$.ajax({
        type: 'POST',
        data: JSON.stringify(GatherPosItems)+"&totalPayment="+totalPay,
        url: '@Url.Action("CheckOut", "POS")',
        dataType: "json",
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            alert('Success');
        },
        error: function (req, status, errorObj) {
            alert(errorObj.toString());
        }
        });

The GatherPosItems is a JSON with multiple "Rows" or Objects, so it's an array.

I added a parameter totalPayment.

How can i pass Both GatherPosItems and totalPayment to the Controller?

my Model:

public class POS_model
{
        public string Qty { get; set; }
        public string description { get; set; }
        public string price { get; set; }
        public string discount_percent { get; set; }
        public string Discount_amount { get; set; }
        public string Discounted_price { get; set; }
        public string Line_total { get; set; }
        public string is_vat { get; set; }
        public string track_type { get; set; }
        public string item_line_id { get; set; }
        public string id { get; set; }
        public string sale_code { get; set; }
        public string reference { get; set; }
        public string unit_of_measure { get; set; }
        public string location { get; set; }
        public string item_code { get; set; }
}

My GatherPosItems's RESULT:

Answer 1

You concatenate a non-JSON string (&totalPayment="+totalPay) to the JSON returned from JSON.stringify function, which corrupts the format of data being sent to the server and makes the model binder unable to parse it.

The following should work:

$.ajax({
    type: 'POST',
    data: JSON.stringify({pos: GatherPosItems, totalPayment: totalPay}),
    url: '@Url.Action("CheckOut", "POS")',
    dataType: "json",
    contentType: 'application/json; charset=utf-8',
    success: function(data) {
        alert('Success');
    },
    error: function(req, status, errorObj) {
        alert(errorObj.toString());
    }
});