Post model to controller using ajax jquery in MVC3 - asp.net-mvc-3

Question

Can somebody help me how can I post model back to controller using jQuery and ajax.
When I post my form, my controller is receiving an empty model. Please corrent me where I am doing a mistake.
Model:
public class AllocateToStore
{
public IList<OrderLine> FailureAllocations { get; set; }
public IList<SelectListItem> AllocationStatus
{
get
{
// code to fetch list.
}
}
}
public class OrderLine
{
public long Id { get; set; }
public DateTime Date { get; set; }
public int Status { get; set; }
}
Controller:
public ActionResult AutoAllocate()
{
// This action will load the view with data.
// Get model data and send it to view.
return View("Allocated",model);
}
[HttpPost]
public ActionResult ResolveUnallocatedOrders(AllocateToStore coll)
{
// When user changes the selection in grid and post the page I need to get the selection // here. So that I can update that record.
return null;
}
And view is
#model AllocateToStore
#{
ViewBag.Title = "Orders";
}
#{
var grid = new WebGrid(Model.FailureAllocations, rowsPerPage: 100);
}
if (Model.FailureAllocations.Any())
{
<form>
<div>
#grid.GetHtml(
columns: grid.Columns(
grid.Column(columnName: "Order date", header: "Order Date", format: item => item.Order.Date),
grid.Column("dropdown", header: "Resolution", format:
#<span>
#{ var index = Guid.NewGuid().ToString(); }
#Html.Hidden("FailureAllocations.Index", index)
#Html.Hidden("FailureAllocations[" + index + "].Id", (long)item.Id)
#Html.DropDownList("FailureAllocations[" + index + "].Status", new SelectList(Model.AllocationStatus, "Value", "Text", item.Status))
</span>
)
),
tableStyle: "expandable-table",
htmlAttributes: new { id = "gridFailureAllocations" }
)
<br />
<input type="submit" value="Resolve" id="resolve-button" />
</div>
</form>
}
#section scripts
{
<script>
$("#resolve-button").click(function () {
debugger;
alert("here");
$.ajax({
url: '/OrderProcessing/ResolveUnallocatedOrders',
data: $('#form').serialize(),
type: 'POST'
});
});
</script>
}
Thanks,
Naresh

Answer 1

i did not test this answer .it is just suggestion . please try this way.
$.ajax({
url: o.url,
type: 'post',
contentType: "application/x-www-form-urlencoded",
data: {"FailureAllocations ":JSON.stringify(FailureAllocations), "AllocationStatus":JSON.stringify(AllocationStatus)}',
. . . .
});

Answer 2

I think you have a bug here data: $('#form').serialize(),
$('#form') will select all elements with the id "form". You form doesn't have an id, so your selector won't be working. Try changing that line to data: $('form').serialize(), and the selector should work.
Alternatively, give your form an id of "form" e.g. <form id="form"> and the original selector $('#form') should work.
See here for more details on the various jQuery selectors.