如何映射具有列表屬性的 Mvc 視圖模型和 ajax 發布數據？

Question

我有一個帶有 inputModel 參數的 MVC 控制器操作，它具有列表類型屬性，並且我使用$('form').serialize()來序列化表單內容並將我的一些自定義數據附加到序列化字符串中，但在操作內部方法輸入模型對象列表屬性為空，誰能幫幫我，下面是代碼示例

我的控制器

[HttpPost]
public ActionResult Edit(ALDS.Web.Areas.Direct2M3.Models.ItemInputModel collection)
{   }

ItemInputModel 類

 public class ItemInputModel
    {
        //......Some property here..
        public List<FabricCompositionInputModel> FabricCompositions { get; set; }
    }

FabricCompositionInputModel 類

 public class FabricCompositionInputModel
    {
        public int ItemID { get; set; }
        public string CompositionCode { get; set; }
        public decimal Value { get; set; }

    }

Ajax 調用

function save() {

    var compositionData = generateCompositionForSave(); //Returns array
    var data = $('form').serialize();
    var d2 = JSON.stringify(compositionData);

    var data2 = data + '&FabricCompositions=' + d2;

    $.ajax({
        type: 'POST',
        dataType: 'json' ,
        cache: false,
        url: '/ItemMaster/Edit',
        data: data2,
        success: function (data, textStatus, jqXHR) {
            sucess(data);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            failed(jqXHR);
        }

    });

}

數組生成函數

function generateCompositionForSave() {
    var arr = [];
    var delClassList = $('#compositionContainer').find('.btnRemoveCompositions');
    for (var c = 0; c < delClassList.length; c++) {
        var row = $(delClassList[c]).closest('.row');
        var code = row.find('.compositionCode').val();
        var value = parseInt(row.find('.compositionValue').val());
        arr.push({ItemID:0, CompositionCode:code, Value:value});
    }

    return arr;
}

Answer 1

你沒有正確構建數據，它需要

var compositionData = generateCompositionForSave();
var data = $('form').serializeObject(); // see function below
data['FabricCompositions'] = compositionData; // add the array to the serialized data
var data2 = JSON.stringify({ collection: data }), // stringify it

$.ajax({
    type: 'POST',
    contentType: "application/json; charset=utf-8", // add contentType
    dataType: 'json' ,
    cache: false,
    url: '@Url.Action("Edit", "ItemMaster")', // don't hard code your url's
    data: data2,
    success: function (data, textStatus, jqXHR) {
        ....

並添加以下功能（警告：這對於<select multiple>元素將無法正常工作）

$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name] === undefined) {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

請注意，如果您使用for循環或自定義EditorTemplate for typeof FabricCompositionInputModel正確生成表單控件（請參閱Post an HTML Table to ADO.NET DataTable ），例如

for(int i = 0; i < Model.FabricCompositions.Count; i++)
{
    @Html.TextBoxFor(m => m.FabricCompositions[i].CompositionCode)
    @Html.TextBoxFor(m => m.FabricCompositions[i].Value)
}

那么所需要的就是

var data = $('form').serialize();
$.ajax({
    type: 'POST',
    dataType: 'json' ,
    cache: false,
    url: '@Url.Action("Edit", "ItemMaster")',
    data: data,
    success: function (data, textStatus, jqXHR) {