How can I access a JavaScript array in my MVC controller?

Question

I've created an array inside a javascript. Now I want to use the array controller. Currently I'm using FormCollection to access data from the form. Is there a way to access my javascript array in FormCollection or as a parameter in the Html.BeginForm() ?

I've tried doing a JSON post using some examples I found on the forum but the array was null in the controller. Can you please help with the best approach to accessing my javascript array in the controller?

<script type="text/javascript">

  var $checkboxes = $('input[type="checkbox"]');

  $(document).ready(function () {
      $('#saveBtn').click(function () {
          var checkList = new Array();
          $.each($checkboxes, function () {
              if ($(this).is(':checked')) {

                  checkList.push('checked');
              }
              else
                  checkList.push('unchecked');
          });
          alert(checkList);

      });

  });             
</script>

UPDATE 1

        $(document).ready(function () {
            $('#saveBtn').click(function () {
               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);
}
   $.ajax({ type: "POST", url: '@Url.Action("Edit","Attendance")',
            contentType: "application/json",
            data: JSON.stringify(options)
  }).done(function (html) {
           //do something with the response.
         });


        });

        });

Answer 1

You can create items which is similar to your viewmodel and push that to your array and post it using jQuery post. In your controller action, you can use a collection of your viewmodel to accept it. MVC model binding will take care of the rest.

Assume you have a ViewModel like this

public class UserOptionVM
{
  public string OptionID{ set;get;}
  public string UserChoice { set;get;}
}

And in your Action method, you accept a collection of this

[HttpPost]
public ActionResult Save(List<UserOptionVM> model)
{
  // loop through collection and read and save 

}

Now change your Js file to send something which match with our viewmodel.

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

$.ajax({ type: "POST",
         url: "@Url.Action("Save","User")",
         contentType: "application/json",
         data: JSON.stringify(options)
      }).done(function (html) {
               //do something with the response.
             });