Kendo ui multiselect in grid update datasource

Question

我在kendo ui网格中有一个多选的kendo ui。它在从远程数据源读取值时非常有效，但在更新时出错，因为它以意外方式发布了多选值数组。

js代码如下。 GetEmployeeTitles方法返回一个字符串列表。

    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 '';
            }
        }
        ]
    });

这是我的viewmodel类：

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

问题是人工代码ViewModel的LaborCode_Titles属性为null。当我检查开发人员工具的请求时，表单数据是这样的：

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"]

如何将请求中的“人工代码标题”作为数组发布？代替

LaborCode_Titles []：高级项目经理

我想像这样发送它

LaborCode_Titles：[Sr.专案经理]

Answer 1

我假设您的服务可以处理JSON数据，在这种情况下，您最简单的解决方案是以该格式发布您的数据。我已修改您的数据源以演示所需内容：

1. 更改发送到服务器的内容类型HTTP标头，以指示有效内容是JSON
2. 将数据序列化为JSON，作为parameterMap函数的一部分

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

将请求参数转换为适合远程服务的格式的功能。默认情况下，数据源使用jQuery约定发送参数。 parameterMap方法通常用于以JSON格式编码参数。

$("#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: {}
                }
            }
        },
    }
});