I am trying to post multiple arrays to my controller using Ajax post. First I have a model like this:
public class EnrollmentOptionsVM
{
public virtual string OptionID{ set;get;}
public virtual string UserChoice { set;get;}
public virtual string TchOptionID { set; get; }
public virtual string TeacherChoice { set; get; }
}
Then my script:
<script type="text/javascript">
var $checkboxes = $('input[type="checkbox"]');
var $strInstructors = $('input[name="instructorString"]');
$(document).ready(function () {
$('#saveBtn').click(function () {
var teacherOptions = [];
var options = [];
$.each($checkboxes, function () {
if ($(this).is(':checked')) {
var item = { "UserChoice": "checked", "OptionID": "YouCanSetIDHere" };
}
else {
var item = { "UserChoice": "unchecked", "OptionID": "YouCanSetIDHere" };
}
options.push(item);
})
$.each($strInstructors, function () {
if ($(this).is(':selected')) {
var tchItem = { "TeacherChoice": "checked", "TchOptionID": "SetTchIDHere" };
}
else {
var tchItem = { "TeacherChoice": "unchecked", "TchOptionID": "SetTchIDHere" };
}
options.push(tchItem);
})
$.ajax({ type:
'POST', url: '@Url.Action("EnrollmentRefresh", "Student")',
contentType: 'application/json',
data: JSON.stringify({firstArray:options, secondArray:teacherOptions})
}).done(function (html) {
});
});
});
</script>
And in my controller here’s the action signature:
[HttpPost]
public ActionResult EnrollmentRefresh(List<EnrollmentOptionsVM> checkedOptions)
{}
When I send only options like this: data: JSON.stringify(options)… it works but when I try to send multiple arrays like the code above it returns null in the controller. How can post multiple arrays using JSON.stringify()?
UPDATE 1
<script type="text/javascript">
var $checkboxes = $('input[type="checkbox"]');
var $strInstructors = $('input[name="instructorString"]');
$(document).ready(function () {
$('#saveBtn').click(function () {
var teacherOptions = [];
var options = [];
$.each($checkboxes, function () {
if ($(this).is(':checked')) {
var item = { "UserChoice": "checked", "OptionID": "YouCanSetIDHere" };
}
else {
var item = { "UserChoice": "unchecked", "OptionID": "YouCanSetIDHere" };
}
options.push(item);
})
$.each($strInstructors, function () {
if ($(this).is(':selected')) {
var tchItem = { "TeacherChoice": "checked", "TchOptionID": "SetTchIDHere" };
}
else {
var tchItem = { "TeacherChoice": "unchecked", "TchOptionID": "SetTchIDHere" };
}
teacherOptions.push(tchItem);
})
$.ajax({ type:
'POST', url: '@Url.Action("EnrollmentRefresh", "Student")',
contentType: 'application/json',
data: JSON.stringify({checkedOptions:options,selectedTeacher:teacherOptions})
}).done(function (html) {
});
});
});
</script>
And in the controller:
[HttpPost]
public ActionResult EnrollmentRefresh( List<EnrollmentOptionsVM> checkedOptions, List<TeacherOptionMV> selectedTeachers)
{}
Two ViewModels public class TeacherOptionMV {
public virtual string TchOptionID { set; get; }
public virtual string TeacherChoice { set; get; }
}
And
public class EnrollmentOptionsVM
{
public virtual string OptionID{ set;get;}
public virtual string UserChoice { set;get;}
}
