Question

我在剑道ui网格中有一个多选剑道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);
    }

问题在于LaborCodeViewModel的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 []：高级项目经理

我想这样发送

LaborCode_Titles：[高级项目经理]

Answer 1

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

更改发送到服务器的内容类型HTTP标头，以指示有效负载为JSON
将数据序列化为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: {}
                }
            }
        },
    }
});

网格更新数据源中的Kendo ui multiselect

1 个答案: