将两个视图模型传递给操作

Question

我在电子商务推车上工作。 我有两个视图模型。

首先是客户信息：

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中的购物车，我应该将它从localStorage传递给客户信息，通过jquery到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获取null值（截图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，然后将其发送到服务器。 从文档中 。

JSON.stringify（）方法将JavaScript值转换为JSON字符串，如果指定了replacer函数，则可选地替换值，或者如果指定了replacer数组，则可选地仅包括指定的属性。

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

Answer 2

经过多次尝试，我最终找到了解决方案。 对我来说这是这个javascript代码：

function ConfirmOrder() {

    var serverCart = LocalCartToSercerCart();   
    var customerData = $('#cartForm').serialize();

    var paramObj = {};
    $.each($('#cartForm').serializeArray(), function (_, kv) {
        paramObj[kv.name] = kv.value;
    });

    var Data = {
        model: paramObj,
        cart: serverCart
    }


    $.ajax({
        method: "POST",
        url: "/Cart/ConfirmOrder",
        contentType: 'application/json',
        data: JSON.stringify(Data)

    })
    .done(function () {

    });

}

而MVC中的这个动作：

 [HttpPost]
  public ActionResult ConfirmOrder(CartViewModel model, IEnumerable<ProductsCart> cart)
    {
    // operations with data
    }

kye是正确的转换形式数据到javacript对象。 据我所知，Serialize（）方法将表单转换为WebForm数据，无法作为一个参数发送。 Serialize（）必须是整个对象...也许我错了，你可以在评论中写下你的建议，我很乐意阅读它。

特别感谢Igor和StephenMuecke