将序列化的表单数据和其他数据发布到 MVC 控制器？

Question

我正在尝试在发送到我的服务器的 POST 请求中添加一些额外的数据。最初，我只发送了几种形式的信息：

$.ajax({
    url: 'SaveAllDetails',
    type: 'POST',
    data: $('form').serialize(),
    dataType: 'json'
});

和MVC控制器方法：

[HttpPost]
public ActionResult SaveAllDetails([Bind(Prefix = "order")]ExistingOrderDetailsModel existingOrderDetailsModel, 
    [Bind(Prefix = "task")]ExistingTaskDetailsModel existingTaskDetailsModel, [Bind(Prefix = "device")]DeviceDetailsModel deviceDetailsModel)
{
    ....
}

这很好用。 MVC 的模型绑定器能够正确反序列化 URL 编码的字符串。

现在，要求发生了变化。我需要连同我的三个表格一起发送一个额外的数据数组。此数据数组不保存在表单中，也没有绑定前缀。我需要在同一个 Controller 方法中完成这一切，因为所有验证都需要在单个事务中执行。

所以，我现在得到了：

var subcomponentsGridRows = JSON.stringify(subcomponentsDetailsView.getAllGridData());
var existingOrderDetailsFormData = $('form#existingOrderDetailsForm').serialize();
var existingTaskDetailsFormData = $('form#existingTaskDetailsForm').serialize();
var deviceDetailsFormData = $('form#existingDeviceDetailsForm').serialize()

$.ajax({
    url: 'SaveAllDetails',
    type: 'POST',
    data: {
        existingOrderDetailsModel: existingOrderDetailsFormData,
        existingTaskDetailsModel: existingTaskDetailsFormData,
        deviceDetailsModel: deviceDetailsFormData,
        subcomponentsGridRows: subcomponentsGridRows
    },
    dataType: 'json'
});

这不起作用至少有一个原因。每个表单都表示为 URL 编码的字符串。 subcomponentsGridRows 是一个 JSON 结构。据我所知，MVC 模型绑定器无法一次性破译这两种类型的信息。

解决这个问题的好方法是什么？

Answer 1

您可能会发现following plugin 很有用。

以下是它可能对您有用的方式。让我们通过定义一个视图模型来清理你的控制器动作：

public class MyViewModel
{
    public ExistingOrderDetailsModel Order { get; set; }
    public ExistingTaskDetailsModel Task  { get; set; }
    public DeviceDetailsModel Device  { get; set; }

    public AdditionalRowsViewModel[] AdditionalRows { get; set; }
}

在此示例中，AdditionalRowsViewModel 显然会保存您尝试传递给控制器​​操作的附加信息。

然后你的控制器动作会变成：

[HttpPost]
public ActionResult SaveAllDetails(MyViewModel model)
{
    ....
}

好的，这一步是绝对必要的，只是当我看到一个控制器动作需要超过 1 个参数时，我只是定义了一个视图模型。

最后让我们调整我们的 AJAX 调用：

$.ajax({
    url: 'SaveAllDetails',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({
        order: $('form#existingOrderDetailsForm').serializeObject(),
        task: $('form#existingTaskDetailsForm').serializeObject(),
        device: $('form#existingDeviceDetailsForm').serializeObject(),
        additionalRows: subcomponentsDetailsView.getAllGridData()
    }),
    success: function(result) {
        // do something with the result of the AJAX call here
    }
});

注意事项：

1. 在您的 AJAX 请求中去掉这个 dataType: 'json' 参数。您正在使用 ASP.NET MVC，希望您从控制器操作返回 Jsonresult，该操作成功地将 Content-Type 响应标头设置为正确的值。 jQuery 足够智能，可以使用此响应标头的值并预处理 result 变量，该变量将传递给 AJAX 请求的 success 回调。所以在这种情况下，你已经得到了一个 javascript 对象
2. 由于您在 AJAX 请求中将 JSON 发送到服务器，因此您需要正确指定 contentType: application/json 参数。否则，您如何期望 ASP.NET MVC 知道客户端正在发送 JSON 并应用正确的模型绑定器？顺便说一句，jQuery 将发送的默认 Content-Type 请求标头是 application/x-www-form-urlencoded，因此如果您在 POST 请求中发送 JSON 有效负载，这将是冲突和违反协议的。