Kendo ui 网格更新数据源中的多选

Question

我在 kendo ui 网格中有一个多选 kendo ui。它在从远程数据源读取值时完美运行，但在更新时出错，因为它以一种意想不到的方式 posting 多选值数组。

js代码如下。 GetEmployeeTitles 方法 returns 字符串列表。

    var sharedTitleDataSource = new kendo.data.DataSource({
        transport: {
            read: "./GetEmployeeTitles"
        }
    });

    $("#grid").kendoGrid({
        dataSource: {
            transport: {

                read: {
                    url: "./GetLaborCodes",

                },
                update:
                {
                    url: "./UpdateLaborCode",
                    type: "POST",
                },
                create:
                {
                    url: "./UpdateLaborCode",
                    type: "POST",
                },
                parameterMap: function (data, type) {
                    console.log(data);
                    console.log(type);
                    if (type != "read") {
                        return data;
                    }
                }
            },
            schema: {
                model: {
                    id: "LaborCode_ID",
                    fields: {
                        LaborCode_Name: { type: "string" },
                        LaborCode_Titles: {}
                    }
                }
            },
        },
        editable: true,
        filterable: true,
        sortable: true,
        batch: true,
        resizable: true,
        reorderable: true,
        columns: [{
                field: "LaborCode_Titles",
                template: function (dataItem) {
                    return dataItem.LaborCode_Titles.join(', ');
                },
                title: "Titles",
                editor: function (container, options) {
                    $('<select multiple="multiple" name="' + options.field+'"/>')
                        .appendTo(container)
                        .kendoMultiSelect({
                            suggest: true,
                            dataSource: sharedTitleDataSource,
                            valuePrimitive: true,
                            autoWidth: true
                        });
                }
            },
        {
            field: "LaborCode_Name",
            title: "Name",
            editor: function (container, options) {
                var input = $('<textarea maxlength="450" name="' + options.field + '"></textarea>');
                input.appendTo(container);
            },
            template: function (dataItem) {
                if (dataItem.LaborCode_Name != null) {
                    return '<span title="' + dataItem.LaborCode_Name + '">' + dataItem.LaborCode_Name.substring(0, 30) + '...' + '</span>';
                }
                return '';
            }
        }
        ]
    });

这是我的视图模型 class:

public class LaborCodeViewModel
{
    public string LaborCode_Name { get; set; }
    public long LaborCode_ID { get; set; }
    public string[] LaborCode_Titles { get; set; }
}

还有我在后端的更新方法，没什么特别的，它只是更新数据库：

    [HttpPost, ValidateInput(false)]
    public JsonResult UpdateLaborCode(LaborCodeViewModel UpdatedM)
    {
        UpdatedM.LaborCode_ID = RateSheetAppFactory.UpdateInsertNewLaborCode(UpdatedM);
        return Json(UpdatedM, JsonRequestBehavior.AllowGet);
    }

问题是 LaborCode_Titles 属性的 LaborCodeViewModel 为空。当我查看来自开发者工具的请求时，表单数据是这样的：

LaborCode_Name: Project Executive
LaborCode_Titles[]: Sr. Project Manager
LaborCode_Titles[]: Lead Designer

但必须是这样的：

LaborCode_Name: Project Executive
LaborCode_Titles: [Sr. Project Manager,Lead Designer]

当我将 parameterMap 函数中的数据写入控制台时，没有任何错误：

LaborCode_ID: 5
LaborCode_Name: "Project Executive"
LaborCode_Titles: (2) ["Sr. Project Manager", "Lead Designer"]

我如何 post LaborCode_Titles 作为数组请求？

欧洲工商管理学院

LaborCode_Titles[]: Sr. Project Manager

我想这样发

LaborCode_Titles: [Sr. Project Manager]

Answer 1

我假设您的服务可以处理 JSON 数据，在这种情况下，您最简单的解决方案是 post 该格式的数据。我已经修改了您的数据源以演示需要什么：

改变发送到服务器的 content-type HTTP header，以表明负载是 JSON
将数据序列化为 JSON 作为 parameterMap 函数的一部分

根据 kendo documentation，这是使用 parameterMap 函数的主要原因：

The function which converts the request parameters to a format suitable for the remote service. By default, the data source sends the parameters using jQuery conventions. The parameterMap method is often used to encode the parameters in JSON format.

$("#grid").kendoGrid({
    dataSource: {
        transport: {
            read: {
                url: "./GetLaborCodes",
            },
            update:
            {
                url: "./UpdateLaborCode",
                contentType: "application/json",
                type: "POST",
            },
            create:
            {
                url: "./UpdateLaborCode",
                contentType: "application/json",
                type: "POST",
            },
            parameterMap: function (data, type) {
                console.log(data);
                console.log(type);
                if (type != "read") {
                    return JSON.stringify(data);
                }
            }
        },
        schema: {
            model: {
                id: "LaborCode_ID",
                fields: {
                    LaborCode_Name: { type: "string" },
                    LaborCode_Titles: {}
                }
            }
        },
    }
});

Kendo ui 网格更新数据源中的多选

Kendo ui multiselect in grid update datasource

kendo-ui

kendo-grid

kendo-datasource

kendo-multiselect