How to pass a two dimensional Javascript array from view to controller - Asp.net Core 6 MVC

I could not pass the array until I changed my viewModel. I had to remove the string array type to string type.

 public class SalesFormDataViewModel
 {
     public string StoreId { get; set; }
     public string Total { get; set; }
     public string SalesItemList { get; set; }
 }

Then, I appended the array to formData after converting the array to json string.

formData.append("SalesItemList", JSON.stringify(SalesItemList));

After searching through how to send formData to controller, before sending the formData object directly via ajax, I had to do following.

let dataObj = {};
formData.forEach((value, key) => {
    dataObj[key] = value;
});

Then ajax call:

let jsonData = JSON.stringify(dataObj);
$.ajax({
    url: '/api/Sales/createSales',
    method: 'POST',
    contentType: 'application/json',
    data: jsonData,
    processData: false,
    cache: false,
    success: function (response) {
        alert("success");
    },
    error: function (response) {
        alert("error");
    }
});

This way I was able to paas two dimensional js array from view to controller. However with this I was unable to achieve save passed object to database since the SalesItemList array being received is a Json array, an exception Cannot deserialize the current JSON array, is thrown when trying to deserialze that array to object in sales controller. So, instead of passing an array of array, passing an array of object, same as above solved the issue.

let SalesItemList = [{},{}];

I am posting this answer thinking it would help those who face same problem and want to highlight that I am ended up with this solution thanks to those who reply to this question.

The 400 response is due to you not passing ValidateAntiForgeryToken.It is easy to forget about the anti-forgery token when crafting a POST request made with AJAX. If you omit the value from the request, the server will return a 400 Bad Request result. Please check if you are passing the correct Token.

Method one:

Add headers manually:

$.ajax({
   //...
   headers: { "RequestVerificationToken": yourtoken },
   //...
});

For more detail, you can refer to this link.

Method two:

Comment out ValidateAntiForgeryToken:

//[ValidateAntiForgeryToken]

Edit:

Let's troubleshoot your mistakes step by step:

View:

Assuming the formData you got is correct, it should be something like this(Pay attention to several properties of ajax):

<script>
    function Test()
    {
        let storeId = 1;
        let total = "Total";
        let salesItemList = [[1, "Name1", "quantity1", "subTotal1"], [2, "Name2", "quantity2", "subTotal2"]];

        var formData = new FormData();

        formData.append("StoreId", storeId);
        formData.append("Total", total);
        formData.append("salesItemList", salesItemList);

        $.ajax({
            url: '/createSales',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            cache: false,
            async: false,
            success: function (response) {
                alert('success');
            },
            error: function (response, error) {
                alert('error');
            }
        });
    }

</script>

Controller:

[HttpPost]
[Route("createSales")]
public async Task<IActionResult> createSales(SalesFormDataViewModel
            salesFormDataViewModel)
{
     return Ok(new { success = "Stock updated successfully" });
}