ASP.NET MVC - Map FormData containing array to model class

Question

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:

Update I am still trying to solve this issue, help is greatly appreciated! Update2 Just for clarity purposes, I am using Vuejs as my client-side framework

Client-side

  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");

Server-side (Controller)

    [HttpPost("verifyCart")]
    public async Task<IActionResult> verifyCart([FromForm] Product[] products)
    {
    }

Server-side (Model)

public class Product
    {
        public string ProductName { get; set; }
        public List<Option> Options { get; set; }        
    }


public class Options
    {
        public int Quantity { get; set; } 
    }

Answer 1

I can make it works by changing the form data from:

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");

to plural of "Product"

formData.append("Products[0].ProductName", "T-Shirt");
formData.append("Products[0].Options.Quantity", "1");
formData.append("Products[1].ProductName", "Shoe");
formData.append("Products[1].Options.Quantity", "2");

Because the parameter you are using in the post action is "products":

[HttpPost]
public IActionResult VerifyCart([FromForm] Product[] products)
{
}

The client-side code I used to test is:

const formData = new FormData();

    formData.append("Products[0].ProductName", "T-Shirt");
    formData.append("Products[0].Options.Quantity", "1");
    formData.append("Products[1].ProductName", "Shoe");
    formData.append("Products[1].Options.Quantity", "2");

    $.ajax({
            type: "POST",
            url: '/Home/VerifyCart',
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
            }
     });

Update

I changed the client-side code to fix issue with Quantity:

const formData = new FormData();

    formData.append("Products[0].ProductName", "T-Shirt");
    formData.append("Products[0].Options[0].Quantity", "1");
    formData.append("Products[1].ProductName", "Shoe");
    formData.append("Products[1].Options[0].Quantity", "2");

    $.ajax({
            type: "POST",
            url: '/Home/VerifyCart',
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
            }
     });