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

【问题标题】：Pass two viewmodels to action将两个视图模型传递给操作
【发布时间】：2016-09-08 04:05:10
【问题描述】：

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

首先提供客户信息：

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 的答案编写了代码，但动作参数仍然为空

【问题讨论】：

标签： javascript c# jquery asp.net-mvc

【解决方案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。

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

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

【讨论】：

或者他可以使用tuples
我试过你写的，但仍然为空（这里是我的工作屏幕）drive.google.com/open?id=0B-dajRUS_6ynQUFLakQ3RTJ5NFU
@dantey89 - 不确定您要发送什么，但我通常不关注外部链接（安全浏览和所有）。如果您有其他问题或更新，请使用这些详细信息更新您的问题，我将非常乐意以这种方式回复。如果它只是一个问题，您也可以在评论中发布（您刚刚发布此链接的同一位置）。
对不起，像你说的那样
@dantey89，试试.serializeArray() 而不是.serialize()

【解决方案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() 必须是整个对象...也许我错了，您可以将您的建议写在 cmets 中，我很乐意阅读。

特别感谢 Igor 和 StephenMuecke

【讨论】：