title: ASP.Net Core MVC FormForm method receives null values
body: <p>I have an application which simulates a clothing site.I try to build my C# object with the data that the user writes in the form and the products they bought on the site.The products are represented by a JSON object.I use 2 classes: one for the shopping cart and one for the product.</p>
  <pre><code>public class Product
      {
          [Key]
          public int id { get; set; }
          public string productName { get; set; }
          public string productPrice { get; set; }
  
          public string quantity { get; set; }
      }
  
  
  
  public class ShoppingCart
      {
          [Key]
          public int? id { get; set; }
  
          public 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 use a controller which has the method &quot;Save&quot; which uses the [FromForm] attribute.After the objects is binded from the client side I add it to my database.The problem is that I get &quot;null&quot; values for every property in my ShoppingCart object that is sent to the method.Moreover in my browser, the data is sent correctly to the server:
  <a href="https://i.stack.imgur.com/houII.png" rel="nofollow noreferrer">screenshot from network tab in chrome</a></p>
  <p>The controller that I use looks like this:</p>
  <pre><code>[Route(&quot;SendItems/Save&quot;)]
      [ApiController]
  
      public class SendItemsController : Controller
      {
          private AppDbContext _db;
  
        
          public SendItemsController(AppDbContext db)
          {
              _db = db;
          }
          [HttpPost]
          [Consumes(&quot;application/json&quot;)]
         
          public async Task&lt;IActionResult&gt; Save([FromForm] ShoppingCart s)
          {
  
             await _db.ShoppingCarts.AddAsync(s);
             await _db.SaveChangesAsync();
              return RedirectToAction(&quot;Index&quot;);
          }
          [HttpGet(&quot;~/ThankYou/Index&quot;)]
          public IActionResult Index()
          {
              return View();
          }
          
      }
  </code></pre>
  <p>My html for the form is written like this:</p>
  
  <pre><code>        @model ShoppingCart
  
  
          &lt;div class=&quot;form-group row&quot;&gt;
              &lt;div class=&quot;col-4&quot;&gt;
                  &lt;label id=&quot;clienId&quot;&gt;&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-6&quot;&gt;
                  &lt;input asp-for=&quot;id&quot; id=&quot;idClient&quot; type=&quot;hidden&quot; /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;form-group row&quot;&gt;
              &lt;div class=&quot;col-4&quot;&gt;
                  &lt;label id=&quot;clientProds&quot;&gt;&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-6&quot;&gt;
                  &lt;input asp-for=&quot;productList&quot; id=&quot;inputProducts&quot; type=&quot;hidden&quot; /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
  
          &lt;div class=&quot;form-group row&quot;&gt;
              &lt;div class=&quot;col-4&quot;&gt;
                  &lt;label id=&quot;clientName&quot;&gt;&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-6&quot;&gt;
                  &lt;input asp-for=&quot;clientName&quot; id=&quot;inputName&quot; type=&quot;text&quot; /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;form-group row&quot;&gt;
              &lt;div class=&quot;col-4&quot;&gt;
                  &lt;label id=&quot;clientAddress&quot;&gt;&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-6&quot;&gt;
                  &lt;input asp-for=&quot;clientAddress&quot; id=&quot;inputAddress&quot; type=&quot;text&quot; /&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div class=&quot;form-group row&quot;&gt;
              &lt;div class=&quot;col-4&quot;&gt;
                  &lt;label id=&quot;clientMail&quot;&gt;&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-6&quot;&gt;
                  &lt;input asp-for=&quot;clientMail&quot; id=&quot;inputMail&quot; type=&quot;text&quot; /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
  
          &lt;div class=&quot;form-group row&quot;&gt;
              &lt;div class=&quot;col-3 offset-4&quot;&gt;
                  &lt;button class=&quot;btn btn-primary&quot; id=&quot;orderB&quot; asp-controller=&quot;SendItems&quot; action=&quot;Save&quot; type=&quot;submit&quot;&gt;ORDER&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  <p>Also another issue is that if I don't use this piece of javascript the client is not redirected anymore to the &quot;ThankYou&quot; page :</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++) {
                  if (productsAux[i]!=&quot;&quot;) {
                  auxArray[i-1] = { &quot;productName&quot;: productsAux[i].titlu, &quot;productPrice&quot;: productsAux[i].pret, &quot;quantity&quot;: localStorage.getItem(productsAux[i].titlu) };
                  }
              }
  
  
              document.getElementById(&quot;inputProducts&quot;).value = JSON.stringify(auxArray);
  
              var shoppingCart = {
                  productList: auxArray,
                  clientName: inputName,
                  clientAddress: inputAddress,
                  clientMail: inputMail
              };
              
              $.ajax({
                  type: &quot;POST&quot;,
                  data: JSON.stringify(shoppingCart),
                  url: &quot;senditems/save&quot;,
                  contentType: &quot;application/json;charset=utf-8&quot;,
                  
              })
              
          })
  </code></pre>