javascript - 将两个 View 模型传递给操作

Question

我处理电子商务的购物车。我有两个 View 模型。

首先是客户信息:

public class CartViewModel
    {
      public string FirstName{get;set;}
      public string Email{get;set;}
      //... other fields
}

第二个是客户购物车:

 public class ProductsCart
    {
        public Guid Id { get; set; }
        public decimal Price { get; set; }
        public int ItemsOrdered { get; set; }
     }

主要是购物车存储在用户 localStorage 中，我应该通过 jquery 将其与客户信息一起从 localStorage 传递到 MVC 的操作:

[HttpPost]
public ActionResult ConfirmOrder(CartViewModel model, IEnumerable<ProductsCart> cart)
    {
        // validate and save to database 
    }

我有 javascript 方法将数据发送到我的操作:

function ConfirmOrder() {
    var serverCart = LocalCartToSercerCart(); //see first screnshot 
    var customerData = $("#FORM_WITH_CUSTOMERS_VIEW_MODEL").serialize();   

    $.ajax({
        method: "POST",
        url: "/Cart/ConfirmOrder",
        data: {model: customerData, cart: serverCart  }
    })
    .done(function () {
      //do something
    });

}

但我的 CartViewModel 总是得到空值(屏幕截图 2)

我还附加了包含我的调试信息的文件。

如果我这样写 javascript 函数:

function ConfirmOrder() {    
  var customerData = $("#cartForm").serialize();

$.ajax({
   method: "POST",
   url: "/Cart/ConfirmOrder",
   data: customerData
  })
 .done(function () {   
   //some code
    });    
}

我只得到模型数据(见截图3)

编辑: 我使用 Igor 的答案编写了代码，但在操作参数中仍然得到 null

Answer 1

您收到空值的原因是数据在发送到服务器之前未转换为 JSON。 JQUERY ajax 调用不会自动为您执行此操作。您可以像这样使用 JSON.stringify 轻松转换它。

$.ajax({
    method: "POST",
    url: "/Cart/ConfirmOrder",
    data: JSON.stringify({model: customerData, cart: serverCart }),
    contentType: 'json' // added to tell the server the format of the data being sent
})
.done(function () {
  //do something
});

JSON.stringify将您的对象转换为格式正确的 JSON，然后将其发送到服务器。来自documentation .

The JSON.stringify() method converts a JavaScript value to a JSON string, optionally replacing values if a replacer function is specified, or optionally including only the specified properties if a replacer array is specified.

注意 此编辑基于下面的@StephenMuecke 评论。我之前的回答不正确，唯一需要更改的是您的 javascript ajax 调用，而不是您的 C# 代码。