title: POSTing complex JSON to ASP.NET Core Controller
body: <p>I have the following models in my ASP.NET Core code:</p>
  
  <pre><code>public class TestItem
  {
      public string Id { get; set; }
      public string Name { get; set; }
      public List&lt;TestSubItem&gt; SubItems { get; set; }
  }
  
  public class TestSubItem
  {
      public string Id { get; set; }
  }
  </code></pre>
  
  <p>and the following method in my Controllers/TestController.cs: </p>
  
  <pre><code>    // POST: Test/Create
      [HttpPost]
      [ValidateAntiForgeryToken]
      public IActionResult Create([FromBody]TestItem item)
      {
          // Use item here...
          return View(item);
      }
  </code></pre>
  
  <p>I have the following JavaScript in my page:</p>
  
  <pre><code>var mySubItems = [{"Id": "1"}];
  
  function submitForm() {
      // myForm contains an Id textbox and a Name textbox
      $("#myForm").submit();
  };
  
  function doPost() {
  
      var testItem = {
          Id: "2",
          Name: "testName",
          SubItems: mySubItems
      };
  
      $.ajax({
          url: '@Url.Action("Create" ,"Test")',
          type: "POST",
          contentType: "application/json",
          data: JSON.stringify(testItem),
          success: function (data) {
              alert(data);
          },
          error: function (error) {
              var x = error; //break here for debugging.
          }
      });
  };
  </code></pre>
  
  <p>When I use <code>doPost</code>, I always get <code>400 Bad Request</code> back from the server. <code>submitForm</code> on the other hand works fine, but I don't know how to include <code>mySubItems</code> in the data sent to the server.</p>
  
  <p>What's the quickest way out of this?</p>