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"}]' />
</form>
and a controller with viewmodels:
[HttpPost]
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)
Thank!
+3
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.name] = item.value;
});
results.ProductLines = $.parseJSON(results.ProductLines);
$.ajax({
url: '@Url.Action("Save")',
type: 'post',
data: JSON.stringify(results),
contentType: "application/json; charset=utf-8",
dataType:'json',
success: function (data) {
alert("hi");
}
});
+2
source to share