When I ajax post json data but also received null - ajax

Question

I try so many times to do below these code . but it still recive the value is null.
var cartViewModel = [];
$(":text").each(function (i) {
var quantity = parseInt($(this).val());
var id = parseInt($(this).data("id"));
cartViewModel.push({ id: id, quantity: quantity });
}
and next I use $.post to submit cartViewModel
the code such like:
var data= { data: JSON.stringify(cartViewModel) };
$.post(url,data,function(json){
//....
});
public class ShoppingCartViewModel
{
public int Id { get; set; }
public int Quantity { get; set; }
}
[HttpPost]
public ActionResult SubmitCart(List<ShoppingCartViewModel> models)
{
return Json(result);
}
but the arg 'models' also is null, I feel very confused. who can point out the right way. thx!

Answer 1

The model binder is expecting a property named models, but you're using the name data. What happens if you change
var data= { data: JSON.stringify(cartViewModel) };
to
var data= { models: JSON.stringify(cartViewModel) };
Edit:
The reason your models property is now empty is because you're calling JSON.stringify(cartViewModel). Instead of passing the action an array of objects, your passing it a string (that happens to be a representation of an array of objects).
Change your data definition to:
var data = { models: cartViewModel };
Edit again:
The above works fine for MVC5. It does not work in MVC4. To make it work in MVC4:
$.ajax({
type: 'POST',
url: '#Url.Action("Add", "Home")',
data: JSON.stringify({ models: cartViewModel }),
contentType: 'application/json',
});