Asp mvc3, mail form with hidden input containing json array

I have a form like this:

<form id="orderForm">
    <input name="Customer" value="Mr.Test" />
    <input name="ProductLines" value='[{"Product":{"Name":"Orange","Price":"10"},"amount":"2","total":"20"}, {"Product":{"Name":"Apple","Price":"5"},"amount":"3","total":"15"}]' />


and a controller with viewmodels:

public ActionResult Save(OrderViewModel vm)

public class OrderViewModel
    public OrderViewModel() { ProductLines = new List<OrderProductViewModel>(); }
    public string Customer { get; set; }
    public IEnumerable<OrderProductViewModel> ProductLines { get; set; }

public class OrderProductViewModel
    public ProductViewModel Product { get; set; }
    public int Amount { get; set; }
    public int Total { get; set; }

public class ProductViewModel
    public string Name { get; set; }
    public int Price { get; set; }


it is possible to submit this form using jquery

      $.post('@Url.Action("Save")', $("#orderForm").serialize(), function (data) {//...}, "json");


and get a collection of ProductLines populated on the server side. (currently it is always empty)



source to share

1 answer

The publish object should be converted to a json object and sent with a json content type. Try the following that might help

var results = {};
$.each($("#orderForm").serializeArray(), function (index, item) {
    results[] = item.value;
results.ProductLines = $.parseJSON(results.ProductLines);
    url: '@Url.Action("Save")',
    type: 'post',
    data: JSON.stringify(results),
    contentType: "application/json; charset=utf-8",
    success: function (data) {




All Articles