title: POST KnockoutJS data to mvc controller not binding
body: <p>I'm trying to do a post of the mapped <code>KnockoutJS</code> model. I can see when debugging it, the <code>JSON</code> is correct. But the server shows that <code>Product</code> is 0 (empty). While it does contain 1 item.</p>
  
  <p><code>MVC Controller</code>:</p>
  
  <pre><code>[HttpPost]
  public ActionResult Test(MyModel model, FormCollection fc)
  {
     return RedirectToAction("index");
  }
  </code></pre>
  
  <p>The <code>AJAX</code> submit:</p>
  
  <pre><code>$('#btnSubmit').click(function (event) {
          var theModel = ko.mapping.toJSON(viewModel);
          debugger;
          $.ajax({
              type: 'POST',
              url: "@Url.Action("Test", "Home")",
              data: theModel,
              contentType: 'application/json; charset=utf-8',
              success: function (result) {
                  if (!result.success) {
                      //alert(result.error);
                  }
                  else { }
              }
          });
      });
  </code></pre>
  
  <p>This is a partial <code>JSON</code> object:</p>
  
  <pre><code>"Products":[{"Id":2,"Name":"bread"}]
  </code></pre>
  
  <p>What am I doing wrong?</p>
  
  <p>EDIT:</p>
  
  <pre><code>public class MyModel
  {
     public int User { get; set; }
     public string Address { get; set; }
     public string ZipCode { get; set; }
     public List&lt;Product&gt; Products { get; set; }
  
  }
  
  public class Product
  {
     public int Id { get; set; }
     public string Name { get; set; } 
  }
  </code></pre>