title: Posting JSON object via AJAX to ASP.NET Core Web API
body: <p>I have tried different methods that have been posted on this site, but nothing seems to work.
  I want to create a clothing site (a personal project). The products on the site have their own class, that is built like this:</p>
  <pre><code> public class Product
   {
        public string ProductName { get; set; }
        public string ProductPrice { get; set; }
  
        public int Quantity { get; set; }
   }
  </code></pre>
  <p>The shopping cart is another class that will contain a list of <code>Product</code> objects and this one is built like this:</p>
  <pre><code>public class ShoppingCart
  {
      [Key]
      public int Id { get; set; }
      List&lt;Product&gt; ProductList { get; set; }
  
      public string ClientName { get; set; }
  
      public string ClientAddress { get; set; }
  
      public string ClientMail { get; set; }
  }
  </code></pre>
  <p>I created an API Controller class and thought that would solve the problem. It looks like this:</p>
  <pre><code>[Route(&quot;api/Shopping&quot;)]
  [ApiController]
  public class ShoppingCartController : ControllerBase
  {
      [HttpPost]
      public ShoppingCart Save([FromBody] ShoppingCart s)
      {
          return s;
      }
  }
  </code></pre>
  <p>In my JavaScript code I create my JSON object and try to post it like this:</p>
  <pre><code> var orderB = document.getElementById(&quot;orderB&quot;);
      orderB.addEventListener(&quot;click&quot;, function () {
          var inputName = document.getElementById(&quot;inputName&quot;).value;
          var inputAddress = document.getElementById(&quot;inputAddress&quot;).value;
          var inputMail = document.getElementById(&quot;inputMail&quot;).value;
          var auxArray = [];
  
          for (var i = 0; i &lt; productsAux.length; i++) {
              auxArray[i] = { &quot;productName&quot;: productsAux[i].titlu, &quot;productPrice&quot;: productsAux[i].pret, &quot;quantity&quot;: localStorage.getItem(productsAux[i].titlu)};
          }
  
          var shoppingCart = {
              productList: auxArray,
              clientName: inputName,
              clientAddress: inputAddress,
              clientMail: inputMail
          };
  
          $.ajax({
              type: &quot;POST&quot;,
              data: JSON.stringify(shoppingCart),
              url: &quot;api/shopping/save&quot;,
              contentType: &quot;application/json charset=utf-8&quot;,
               }).done(function (res) {
              alert(res);
          });
         
  </code></pre>
  <p>After I push the order button on my page I expect to see the alert pop-up with the callback result which I suppose is the <code>ShoppingCart</code> object that is created using the JSON that I send.</p>