title: Knockout.js & list of checkboxes: post to mvc controller
body: <p>I have an MVC view model that looks like this:</p>
  
  <pre><code>public class DirectorySearchModel
  {
      [Display(Name = "First name contains")]
      public string FirstName { get; set; }
  
      [Display(Name = "Last name contains")]
      public string LastName { get; set; }
  
      public CountriesCollection Countries { get; set; }
      public IEnumerable&lt;Country&gt; SelectedCountries { get; set; }
      public IEnumerable&lt;Country&gt; AllCountries { get; set; }
  }
  </code></pre>
  
  <p>The CountriesCollection object (line 9) looks like this:</p>
  
  <pre><code>public class CountriesCollection
  {
      [Display(Name = "Countries")]
      public int[] arrCountries { get; set; }
  }
  </code></pre>
  
  <p>Now, I'm creating a new, blank instance of CountriesCollection and then adding it to a blank instance of the DirectorySearchModel view model and then serialising it all into a javascript view model for Knockout.js:</p>
  
  <pre><code>{
  "FirstName":null,
  
  "LastName":null,
  
  "Countries":{"arrCountries":[]},
  
  "SelectedCountries":[{"RelationshipManager":{},"CountryId":1,"CountryName":"UK"},{"RelationshipManager":{},"CountryId":2,"CountryName":"France"},{"RelationshipManager":{},"CountryId":3,"CountryName":"Spain"}],
  
  "AllCountries":[{"RelationshipManager":{},"CountryId":1,"CountryName":"UK"},{"RelationshipManager":{},"CountryId":2,"CountryName":"France"},{"RelationshipManager":{},"CountryId":3,"CountryName":"Spain"}]
  }
  </code></pre>
  
  <p>My checkboxes are rendered as: <code>&lt;input checked="checked" data-bind="checked: Countries.arrCountries" id="Countries_arrCountries30" name="Countries.arrCountries" type="checkbox" value="1"&gt;</code>. Checking a couple means you end up with this Knockout.js view model:</p>
  
  <pre><code>{
  "FirstName":null,
  
  "LastName":null,
  
  "Countries":{"arrCountries":["1", "3"]},
  
  "SelectedCountries":[{"RelationshipManager":{},"CountryId":1,"CountryName":"UK"},{"RelationshipManager":{},"CountryId":2,"CountryName":"France"},{"RelationshipManager":{},"CountryId":3,"CountryName":"Spain"}],
  
  "AllCountries":[{"RelationshipManager":{},"CountryId":1,"CountryName":"UK"},{"RelationshipManager":{},"CountryId":2,"CountryName":"France"},{"RelationshipManager":{},"CountryId":3,"CountryName":"Spain"}]
  }
  </code></pre>
  
  <p>Submitting my view normally (i.e. via a submit button and not with Knockout.js) to an MVC action that expects a <code>DirectorySearchModel</code>, I'm able to ask for <code>model.Countries.arrCountries</code> to get a list of the checked items, but when I use...</p>
  
  <pre><code>$.post("/MyController/MyAction", ko.toJS(viewModel), function(returnData) {
      $("#resultCount").html(returnData);
  });
  </code></pre>
  
  <p>or...</p>
  
  <pre><code>$.post("/MyController/MyAction", viewModel, function(returnData) {
      $("#resultCount").html(returnData);
  });
  </code></pre>
  
  <p>to another action that expects the same <code>DirectorySearchModel</code>,  <code>model.Countries.arrCountries</code> is always <code>null</code>! I wondered if it's due to Knockout.js posting the <code>arrCountries</code> entries as <code>string[]</code>s when MVC is expecting <code>int[]</code>s, but changing my MVC code to expect <code>string[]</code>s doesn't seem to change much..! The <code>CountriesCollection</code> object within the <code>DirectorySearchModel</code> appears to exist, but it's the <code>arrCountries</code> within that's always <code>null</code>.</p>
  
  <p>Any ideas? Any help much appreciated!</p>
  
  <h2>Edit</h2>
  
  <p>The action that receives the Knockout.js viewModel:</p>
  
  <pre><code>public MvcHtmlString ResultCount(DirectorySearchModel model)
  {
      return new MvcHtmlString(getResultCount(model).ToString());
  }
  </code></pre>
  
  <p>The <code>getResultCount</code> method:</p>
  
  <pre><code>public int getResultCount(DirectorySearchModel model)
  {
      IUserRepository userRepository = new UserRepository();
      int count = userRepository.Search(model, null).Count();
      return count;
  }
  </code></pre>
  
  <h2>FIXED!</h2>
  
  <p>Thanks to Konstantin for pointing out that a simple switch from $.post to $.ajax to send my Knockout.js view model back to my mvc action was all that was needed! Here's the $.ajax code I'm using:</p>
  
  <pre><code>$.ajax({  
      type: "POST",
      url: "/MyController/MyAction",
      data: ko.toJSON(viewModel),
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function (data) {
          $("#resultCount").html(data);
      }
  });
  </code></pre>