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

要使模型绑定起作用，要发送的数据结构应与操作方法参数匹配。

您尚未共享服务器侧视图模型类的外观。无论如何，为了处理这样的情况，我将创建一个将您的2个类作为属性的单视图模型

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请求标头。

Ajax发布发送嵌套数组，未定义

1 个答案: