如何填充对 Kendo Dropdown 的 Json 数据响应？答案

【问题标题】：How to Populate Jason Data response to Kendo Dropdown?如何填充对 Kendo Dropdown 的 Json 数据响应？
【发布时间】：2021-04-27 18:09:53
【问题描述】：

我有一个剑道下拉菜单，我正在尝试使用 ajax jason 响应填充数据。不幸的是，下拉列表显示为空白。知道我错过了什么吗？你能帮忙吗？

DIV：

<div class="row form-group spacer">
                            <div class="col-md-12">
                                <div class="col-md-12">
                                    @Html.Label("Recipients")
                                    <div id="commentrecipients" class="dirtyignore" name="commentrecipients"></div>
                                </div>
                            </div>
                        </div>

这是我的 Ajax 调用

function DisplayCommentDialog(EntityOrganizationID) {

    $('#commentrecipients').kendoDropDownList({
        dataTextField: "Name",
        dataValueField: "UserID",
        autoBind: false
    });

        $.ajax({
            type: "GET",
            url: "/Submission/SecurityGroupsUsersAccessRight",
            async: false,
            dataType: "JSON",
            data: {
                id: EntityOrganizationID
            },
            success: function (data) {
                
                    var ddl = $('#commentrecipients').data("kendoDropDownList");
                    ddl.setDataSource(data);
                    ddl.refresh();
    
                    $('#commentrecipients').show();
                
            }
        }); 
    
    }

杰森回应：

data = "[{"SecurityGroupID":31,"SecurityGroupName":"Permission Testers","UserID":30,"Name":"Dawn Test'Neil"},{"SecurityGroupID":31,"SecurityGroupName":"Permission Testers","UserID":213,"Name":"Dawn 2 Bates"}]"

【问题讨论】：

标签： javascript jquery json ajax kendo-dropdown

【解决方案1】：

我稍微改变了方法并使用了数据源传输来解决这个问题。按预期工作。解决方案如下。

function DisplayCommentDialog(EntityOrganizationID) {
    var categories = $("#commentrecipients").kendoDropDownList({
        optionLabel: "Select Recipients...",
        dataTextField: "Name",
        dataValueField: "UserID",
        height: 310,
        Width: "900px",
        dataSource: {
            transport: {
                read: function (options) {
                    $.ajax({
                        url: "/Submission/SecurityGroupsUsersAccessRight",
                        dataType: "JSON", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
                        data: {
                            id: EntityOrganizationID
                        },
                        success: function (result) {
                            // notify the data source that the request succeeded
                            options.success(result);
                        },
                        error: function (result) {
                            // notify the data source that the request failed
                            options.error(result);
                        }
                    });
                }
            }
        }
    }).data("kendoDropDownList");
}

【讨论】：