title: How to ModelBind JSON to an object and nested List?
body: <p>I'm looking to bind a JSON object to a List nested in an object.</p>
  
  <p><strong>Background</strong></p>
  
  <p>I have a <code>Category</code> class that contains a list of <code>ConfigurationFunds</code>:</p>
  
  <pre><code>public class Category
  {
      public int Id { get; set; }
      public string CountryId { get; set; }
      public string Name { get; set; }
  
      public List&lt;ConfigurationFund&gt; Funds { get; set; }
  
      public Category()
      {
          Funds = new List&lt;ConfigurationFund&gt;();
      }
  }
  
  public class ConfigurationFund 
  {
      public int Id { get; set; }
      public string CountryId { get; set; }
      public string Name { get; set; }
  
      public ConfigurationFund()
      {
  
      }
  }
  </code></pre>
  
  <p>The user can select a number of Funds per Category, and then I want to POST a JSON string back to my Controller and have the ModelBinder bind the JSON to the object model. </p>
  
  <p>This is my Action method:</p>
  
  <pre><code>[AcceptVerbs(HttpVerbs.Post)]
  public ActionResult Edit(Category category) 
  {
      // Categoy.Id &amp; Categoy.CountryID is populated, but not Funds is null
      return Json(true); // 
  }
  </code></pre>
  
  <p>So far, I have this jQuery:</p>
  
  <pre><code>$('#Save').click(function (e) {
      e.preventDefault();
  
      var data = {};
  
      data["category.Id"] = $('#CategorySelector').find(":selected").val();
      data["category.countryId"] = $('#CategorySelector').find(":selected").attr("countryId");
  
      var funds = {};
      $('#ConfiguredFunds option').each(function (i) {
          funds["funds[" + i + "].Id"] = $(this).val();
          funds["funds[" + i + "].countryId"] = $(this).attr("countryId");
      });
  
      data["category.funds"] = funds;
  
      $.post($(this).attr("action"), data, function (result) {
          // do stuff with response
      }, "json");
  });
  </code></pre>
  
  <p>But this isn't working. The properties of Category are populated, but the <code>List&lt;ConfigurationFund&gt;()</code> isn't being populated. </p>
  
  <p><strong>Question</strong></p>
  
  <p>How do I need to modify this to get it to work?</p>
  
  <p><strong>Supplementary Info</strong></p>
  
  <p>Just to note, I've also tried to post the Category &amp; ConfiguredFunds separately, and it works, with something similar to the following:</p>
  
  <pre><code>$('#Save').click(function (e) {
      e.preventDefault();
  
      var data = {};
  
      data["category.Id"] = $('#CategorySelector').find(":selected").val();
      data["category.countryId"] = $('#CategorySelector').find(":selected").attr("countryId");
  
      $('#ConfiguredFunds option').each(function (i) {
          data["configuredFunds[" + i + "].Id"] = $(this).val();
          data["configuredFunds[" + i + "].countryId"] = $(this).attr("countryId");
      });
  
       $.post($(this).attr("action"), data, function (result) {
          // do stuff with response
      }, "json");
  });
  </code></pre>
  
  <p>In the following Action method, the ConfiguredFunds are populated, and the Category is also populated. However, the Category's List <em>isn't</em> populated. I need the Category &amp; its List to be populated.</p>
  
  <pre><code>public ActionResult Edit(List&lt;ConfigurationFund&gt; configuredFunds, Category category)
  {
      return Json(true);
  }
  </code></pre>