title: Web.Api not deserializing properties of Child Array in Post
body: <p>I have a complex object that is correctly deserialized from json in the browser, but when I post the same data back with jQuery, the child objects of an array aren't getting deserialized - they are all set to default values.</p>
  
  <p>I've tried changing the collections types from List, to IEnumerables, but that has changed nothing.  It is interesting that the number of elements I get back is the correct amount.</p>
  
  <p>Also this is a CORS POST, but I haven't had any problems otherwise.</p>
  
  <p>Models</p>
  
  <pre><code>public class Document 
  {
      public int DocumentId { get; set; }
      public DocumentType DocumentType { get; set; }
      public string Name { get; set; }
      public string Path { get; set; }
      public IEnumerable&lt;DocumentField&gt; Fields { get; set; }
  }
  
  public class DocumentField
  {
      public int FieldId { get; set; }
      public string Path { get; set; }
      public IEnumerable&lt;FieldRelationship&gt; RelatedFields { get; set; }
  }
  
  public class FieldRelationship
  {
      public int RelationshipId { get; set; }
      public int FieldId { get; set; }
  }
  </code></pre>
  
  <p>Here is my controller method signature (notice I don't have <code>[FromBody]</code> attribute on the parameter, when I did I got a null result).</p>
  
  <pre><code>[HttpPost]
  public void Post(Web.Document webDoc)
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>var res = $.get('http://localhost:11786/api/documents/1');
  res.then(function (data) {   
    $.ajax({
       type: 'POST',
       url: 'http://localhost:11786/api/documents/',
       crossDomain: true,
       data: data,
       success: function (responseData, textStatus, jqXHR) {
         console.log('yes');
       },
       error: function (responseData, textStatus, errorThrown) {
         console.log('failed');
       }
     });
   });
  </code></pre>
  
  <p>What the Response Body looks like:</p>
  
  <pre><code>Fields[0][FieldId]=1410
  &amp;Fields[0][Path]=TestField
  &amp;Fields[0][RelatedFields][0][RelationshipId]=1
  &amp;Fields[0][RelatedFields][0][FieldId]=503
  &amp;Fields[0][RelatedFields][1][FieldId]=501
  &amp;Fields[1][Path]=cookies
  &amp;DocumentId=1
  &amp;DocumentType=2
  &amp;Name=Test Document
  &amp;Path=test.docx 
  </code></pre>
  
  <p>What the values are in the resulting C# Documents instance</p>
  
  <pre><code>DocumentId: 1
  DocumentType: 2
  Name: "Test Document"
  Path: "test.docx"
  Fields: [{
    FieldId: 0,             &lt;--- Bad
    Path: null,             &lt;--- Bad
    RelatedFields: null,    &lt;--- Bad
  }, {
    FieldId: 0,             &lt;--- Bad
    Path: null,             &lt;--- Bad
    RelatedFields: null
  }]
  </code></pre>
  
  <p><strong>Edit</strong></p>
  
  <p>Here are the results if I change how I send the data in the ajax call.  Remember data is the variable that holds the result from get.</p>
  
  <pre><code>ajax.data         [FromBody]  Result
  ---------         ----------  ------
  data                   false  Props set, array count correct, array object props null
  JSON.stringfy(data)    false  Object not null, but props null
  { "": data }           false  Object not null, but props null
  "=" + JSON.stringfy    false  Object not null, but props null
  data                    true  null
  JSON.stringfy(data)     true  null
  { "": data }            true  null
  "=" + JSON.stringfy     true  null
  </code></pre>
  
  <p>If I use angular's $http.post (<code>$http.post('http://localhost:11786/api/documents/', res.data);</code>) and add the <code>[FromBody]</code> attribute to the method parameter, I get the correct results.  It seems like somehow what I'm passing to data in $.ajax is not the right thing, even though I tried the four methods above.</p>