传递两个视图模型到操作

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; }
     }

重要的是将购物车存储在用户的本地存储中，并且我需要通过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 的空值（截图2）

我还附上了我的调试信息文件。

如果我编写以下JavaScript函数：

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

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

我只获取到模型数据（见截图3）

编辑：我按照Igor的回答编写了代码，但在操作参数中仍然获取到null值。

- dantey89

Answer 1

你收到 null 值的原因是数据在发送到服务器之前没有被转换为 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字符串，如果指定了替换函数，则可以选择替换值，如果指定了替换器数组，则可以选择仅包括指定的属性。

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

- Igor

---

或者他可以使用tuples。 - Manoz

@dantey89 - 不确定您要发送什么，但我通常不会跟随外部链接（安全浏览等）。如果您有其他问题或更新，请使用这些细节更新您的问题，我将非常乐意以此方式回复。如果只是一个问题，您也可以在评论中发布（您刚刚发布此链接的相同位置）。 - Igor

@StephenMuecke - 所以这不是MVC的限制，而是Web API的限制（一个方法中只允许一个FromBody）？ - Igor

@Manoz，你不能使用“元组” - “元组”没有无参构造函数，因此“DefaultModelBinder”无法初始化它。 - user3559349

@dantey89，尝试使用.serializeArray()而不是.serialize()。 - user3559349

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
    }

密钥是正确的转换表单数据为JavaScript对象的方式。据我所知，Serialize()方法将表单转换为WebForm数据，并且不能作为一个参数发送。 Serialize()必须是整个对象...也许我错了，您可以在评论中写下您的建议，我很乐意阅读。

特别感谢Igor和StephenMuecke。

- dantey89