How can post multiple arrays using JSON.stringify()?

Question

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;}


       }

Answer 1

You are not posting multiple arrays with {firstArray:options, secondArray:teacherOptions}. You are posting a single object with two properties: firstArray and secondArray. Your controller is designed to get only one array of EnrollmentOptionsVM. The best thing to do, I guess, is to change EnrollmentRefresh method to take some object with fields firstArray and secondArray (or something like that) as an argument.