將序列化表單數據和附加數據發布到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. 擺脫這個dataType: 'json' AJAX請求中的dataType: 'json'參數。 您正在使用ASP.NET MVC，並希望您從控制器操作返回Jsonresult，該操作成功將Content-Type響應標頭設置為正確的值。 jQuery足夠智能，可以使用此響應頭的值並預處理將傳遞給AJAX請求的success回調的result變量。 所以在這種情況下你將獲得一個javascript對象
2. 由於您要在AJAX請求中向服務器發送JSON，因此需要正確指定contentType: application/json參數。 否則，您如何期望ASP.NET MVC知道客戶端正在發送JSON並應用正確的模型綁定器？ 順便說一句，jQuery將發送的默認Content-Type請求標頭是application/x-www-form-urlencoded ，因此如果您在POST請求中發送JSON有效負載，那將是沖突並違反協議。