title: ASP.NET MVC - Map FormData containing array to model class
body: <p>At my front-end, I am currently creating a FormData object that contains an array with the following property: "productName" and "productQuantity". I was able to send the FormData over to my server-side. However, I could not bind any value. How do I map the list of objects in the FormData to my ASP.NET MVC Model class at my controller correctly? Below is my current code:</p>
  
  <p><strong>Update</strong> I am still trying to solve this issue, help is greatly appreciated!
  <strong>Update2</strong> Just for clarity purposes, I am using Vuejs as my client-side framework</p>
  
  <p><strong>Client-side</strong></p>
  
  <pre><code>  const formData = new FormData();
  
    formData.append("Product[0].ProductName", "T-Shirt");
    formData.append("Product[0].Options.Quantity", "1");
    formData.append("Product[1].ProductName", "Shoe");
    formData.append("Product[1].Options.Quantity", "2");
  </code></pre>
  
  <p><strong>Server-side (Controller)</strong></p>
  
  <pre><code>    [HttpPost("verifyCart")]
      public async Task&lt;IActionResult&gt; verifyCart([FromForm] Product[] products)
      {
      }
  </code></pre>
  
  <p><strong>Server-side (Model)</strong></p>
  
  <pre><code>public class Product
      {
          public string ProductName { get; set; }
          public List&lt;Option&gt; Options { get; set; }        
      }
  
  
  public class Options
      {
          public int Quantity { get; set; } 
      }
  </code></pre>