title: Ajax json to MVC5 controller: Passing object containing a collection
body: <p>Folks, I've attempted this on MVC4 and MVC5.</p>
  
  <p>I need to pass an object with a few properties and a collection from the client to the controller.</p>
  
  <p>I've defined the model in C# as:</p>
  
  <pre><code>public enum RequestMode { ReadOnly = 0, Edit = 1}
  
  public class DataRequest
  {
      public int ProjectId { get; set; }
      public RequestMode Mode { get; set; }
      public List&lt;PageRequest&gt; PageRequests { get; set; }
  
      public DataRequest()
      {
          PageRequests = new List&lt;PageRequest&gt;();
      }
  }
  
  public class PageRequest
  {
      public int Id { get; set; }
      public int PageCurrent { get; set; }
      public int RowCountPerPage { get; set; }
  }
  </code></pre>
  
  <p>The MVC Controller is defined as (just using it to set a breakpoint to check the request values):</p>
  
  <pre><code>[HttpPost]
  public JsonResult Test(DataRequest request)
  {
      return new JsonResult();
  }
  </code></pre>
  
  <p>The Index.cshtml client contains the ajax call:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var RequestMode = { ReadOnly: 0, Edit: 1 };
  
      var dataRequest = { ProjectId: 17, Mode: RequestMode.Edit, PageRequests: new Array() };
      var pageRequest = { TableId: 3165, PageCurrent: 4, RowCountPerPage: 30 };
      dataRequest.PageRequests.push(pageRequest);
  
      $(document).ready(function () {
          $.ajax({
              data: dataRequest,
              type: 'POST',
              cache: false,
              url: '/Home/Test',
              success: function (data) {
              },
              fail: function (data) {
  
              }
          });
  
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I start debugging, the page loads and my breakpoint in the controller Test method gets hit.</p>
  
  <p>In the debugger, the request object shows up as:
      Mode: Edit
      PageRequests: Count = 1
      ProjectId: 17</p>
  
  <p>When I expand the PageRequests collection property, I see:
      {Mvc5WebTest.Controllers.PageRequest}
          Id: 0
          PageCurrent: 0
          RowsPerPage: 0</p>
  
  <p>I would expect the PageRequest object to be populated with the values I've set (i.e. 3165, 4, 30)</p>
  
  <p>Using Fiddler, I see that the complete DataRequest object is getting turned into Json correctly, but it seems that the MVC controller can't turn it back into the C# object.</p>
  
  <p>As a workaround, I can modify the ajax call on the client to
      var cdr = JSON.stringify(dataRequest);</p>
  
  <pre><code>$.ajax({
      dataType: 'json',
      type: 'GET',
      data: { jsonRequest: cdr },
      ...
  </code></pre>
  
  <p>And then in the controller</p>
  
  <pre><code>[HttpGet]
  public ActionResult Test(string jsonRequest)
  {
      var request = JsonConvert.DeserializeObject&lt;DataRequest&gt;(jsonRequest);
      return new JsonResult();
  }
  </code></pre>
  
  <p>This works, but I'd rather not pass the data as a string.</p>
  
  <p>Can anyone shed some light as to what is going on and what I need to do to get the collection populated?</p>