how to read jquery.ajax() data in mvc 2 controller - asp.net-mvc-2

Question

I'm using mvc2 and jqueries to post the data from view to controller.
This is my view
$('#btnSaveAcademicInfo').click(function() {
var recordsToSave = [];
var curRecord = null;
$.each($("#academics tr"), function(i, v) {
curRecord = {};
curRecord.Institution = $(this).find('.tdName').text();
curRecord.PassoutYear = $(this).find('.tdPassOutYear').text();
curRecord.Percentage = $(this).find('.tdPercentage').text();
curRecord.Specialization = $(this).find('.tdspecialization').text();
recordsToSave.push(curRecord);
});
$.ajax({
type: 'POST',
url: '/EmployeeMaster/SaveAcademicInfo',
data: recordsToSave,
success: function(result) { success(result); },
datatype: "json"
});
});
and my controller is
[HttpPost]
public ActionResult SaveAcademicInfo(List<AcademicModel> data)
{
//Here data is always null
return View("GetPersonalDataById");
}
Here im not getting the data to controller. But when i use, data: JSON.stringify(recordsToSave), I'm able to see the data in firebug.
How do i read the data in controller.
Please help.

Answer 1

JSON.stringify converts a javascript object into a JSON string. If you want to send JSON requests in ASP.NET MVC 2 you need a JSON value provider as this is not built-in. See this blog post for more details. In ASP.NET MVC 3 this works out of the box thanks to the built-in JsonValueProviderFactory.
Also if you want to send a JSON request you need to specify the content type as well:
$.ajax({
type: 'POST',
url: '/EmployeeMaster/SaveAcademicInfo',
data: JSON.stringify(recordsToSave),
contentType: 'application/json',
dataType: 'json', // <!-- notice the capital T
success: function(result) {
success(result);
},
});
and if you don't want to use JSON you will need to format the request in a way that the default model binder can understand. Try like this:
var recordsToSave = [];
$.each($('#academics tr'), function (index, value) {
recordsToSave.push({
'name': '[' + index + '].Institution',
'value': $(this).find('.tdName').text()
});
recordsToSave.push({
'name': '[' + index + '].PassoutYear',
'value': $(this).find('.tdPassOutYear').text()
});
recordsToSave.push({
'name': '[' + index + '].Percentage',
'value': $(this).find('.tdPercentage').text()
});
recordsToSave.push({
'name': '[' + index + '].Specialization',
'value': $(this).find('.tdspecialization').text()
});
});
$.ajax({
type: 'POST',
url: '/EmployeeMaster/SaveAcademicInfo',
data: recordsToSave,
success: function (result) {
success(result);
}
});