Ajax отправляет вложенный массив, неопределенный

Question

Я использую var form = $("#AAAForm").serializeArray() для сериализации всех значений из AAAForm.Затем я помещаю все значения из корзины в форму, используя следующий код:

var CartPush = [{name: "OrderDetails", value: Cart}]
form.push(CartPush);

Затем я использую следующую функцию Ajax для отправки запроса на сервер.

$.ajax({
            type: "POST",
            url: "/Update/Inventory",
            data: form,
            success: function (data) {
                alert(data); // show response
            }
        });

Я ожидаю, что он отправит следующее: (это вывод из console.log(form))

0: {name: "FirstName", value: "a"}
1: {name: "LastName", value: "a"}
2: {name: "PostalCode", value: "a"}
3: {name: "HouseNumber", value: "a"}
4: {name: "Street", value: "a"}
5: {name: "City", value: "a"}
6: {name: "State", value: "a"}
7: {name: "Country", value: "a"}
8: {name: "Email", value: "a"}
9: Array(1)
   0:
      name: "OrderDetails"
      value: Array(3)
         0: {ProductId: "760", Name: "Test ", ImageUrl: "258", Price: "0.10", Grade: "Rare", …}
         1: {ProductId: "873", Name: "Test2 ", ImageUrl: "371", Price: "0.20", Grade: "Holo", …}
         2: {ProductId: "744", Name: "Test3 ", ImageUrl: "242", Price: "0.35", Grade: "Rare", …}

Однако на самом деле на сервер отправляется следующее:

FirstName: a
LastName: a
PostalCode: a
HouseNumber: a
Street: a
City: a
State: a
Country: a
Email: a
undefined: 

ПочемуМассив я добавляю как неопределенный?И как мне это решить?Я создал следующий JSFiddle с примерами данных.https://jsfiddle.net/s03uLvpy/

Не думаю, что это проблема, но для полной картины.Я отправляю данные в следующую функцию в ядре dotnet, я получаю данные формы просто отлично, однако данные, которые я получаю для OrderDetails, просто пустые, я думаю, потому что опубликованные данные не определены.

 [HttpPost]
 public async Task<IActionResult> AccountAndAddress(OrderViewModel values, List<ProductsShopCartViewModel> OrderDetails)
        {
        return Ok();
        }

Answer 1

Чтобы привязка модели работала, структура отправляемых данных должна соответствовать параметру метода действия.

Вы не поделились тем, как выглядят ваши классы моделей серверного вида. В любом случае, чтобы справиться с такой ситуацией, я бы создал модель с одним представлением, в которой ваши классы имели бы свойства

public class AccountAndAddressVm
{
    public List<AddressVm> Address { set; get; }
    public List<ProductsShopCartViewModel> OrderDetails { set; get; }
}
public class AddressVm
{
    public string Name { set; get; }
    public string Value { set; get; }
}
public class ProductsShopCartViewModel
{
    public int ProductId { set; get; }
    public string Name { set; get; }
    public int Quantity { set; get; }
}

и используйте этот новый класс AccountAndAddressVm в качестве параметра моего метода действия, одновременно используя FromBody атрибут декоратора вместе с ним. Атрибут FromBody указывает связующему модели считывать данные из тела запроса и отображать их для привязки модели (сопоставления с этим параметром).

[HttpPost]
public ActionResult AccountAndAddress([FromBody] AccountAndAddressVm OrderDetails)
{
    // Here I am simply returning what we received fore debugging.
    return Ok(OrderDetails );
}

Теперь все, что нам нужно сделать, это отправить объект JS с такой же структурой.

var form = [{ name: "FirstName", value: "Shyju" },
            { name: "PostalCode", value: "98052" },
            { name: "City", value: "Redmond" }];


var cart = [{ "ProductId": "760", "Name": "Test ",Amount": 1 },
            { "ProductId": "360", "Name": "Xox ",Amount": 4 }
           ];

var d = { Address: form, OrderDetails: cart };
// the "d" object has similar structure like our AccountAndAddressVm class

$.ajax({
         type: "POST",
         url: "/Home/AccountAndAddress",
         data: JSON.stringify(d),
         contentType:"application/json",
         success: function (data) {
               console.log('response',data);
         }
});

Метод JSON.stringify преобразует объект JavaScript и создает его строковое представление. Свойство contentType:"application/json" сообщит jQuery об отправке application/json в качестве заголовка запроса Content-Type.