使用 ajax 数据填充 kendo 多选

Question

我正在使用 kendo multiselect 小部件供用户通过 ajax 调用从数据库中提取 select 不同的值。 ajax 调用采用一个参数 searchValue，它将缩小返回数据的范围。这是我的控制器：

[HttpPost]
    public JsonResult ProfitabilitySearch(string searchValue)
    {
        return Json(InventoryDataAccess.ProfitabilitySearch(searchValue));
    }

1) 如何从文本框中获取值以用作搜索值？我在下面评论了相关区域。这是我的数据源：

    var searchDataSource = new kendo.data.DataSource({
    transport: {
        read: function () {
            $.ajax({
                type: 'POST',
                url: Firm.ProfitabilitySearchURL,
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                         //'SuperClient' is test data to see if it works, but what do i
                         //need to make searchValue = what I type?
                data: JSON.stringify({ searchValue:  'SuperClient'}),
                success: function (data) {
                    return data.RESULT;
                }
            });
        }
    },
    group: { field: 'category' },
    serverFiltering: true
});

这里是我创建 multiselect 小部件的地方：

var TKSearch = $("#TKSearch").kendoMultiSelect({
        dataSource: searchDataSource, 
        autoBind: false,
        minLength: 3,
        placeholder: 'Search Timekeepers...',
        dataTextField: 'label',
        dataTextValue: 'value',
        delay: 200
    }).data("kendoMultiSelect");

我不确定这是否有帮助，但这是从 ajax 调用返回的 json 的结构：

{"label":"SUNFLOWER REALTY CORP. (023932)","value":"023932","category":"RC"}

解决上面的第一个问题可能会回答我的第二个问题，所以我会等到之后再问。

Answer 1

请求参数可以使用函数

var searchDataSource = new kendo.data.DataSource({
    transport: {
        read: function (options) {
            $.ajax({
                type: 'POST',
                url: Firm.ProfitabilitySearchURL,
                contentType: 'application/json; charset=utf-8',
                data: {
                    searchValue: function () {
                        // better: use a model property instead of this
                        return $("#TKSearch").data('kendoMaskedTextBox').value();
                    }
                },
                success: function (data) {
                    options.success(data.RESULT);
                }
            });
        }
    },
    group: { field: 'category' },
    serverFiltering: true
});

备注

这个真的应该是一个GET请求。 POST 用于实际更改服务器上数据的请求，GET 用于仅从服务器检索数据的请求。
您不必 JSON.stringify() 自己。 jQuery 透明地做到这一点。
指定 dataType 完全多余，jQuery 将从响应 headers.
通过 jQuery 读取输入值不干净。请改用 data-bound 模型属性。
回调调用（options.success()）
此示例缺少 HTTP 错误处理，您必须添加它。

使用 ajax 数据填充 kendo 多选

Populating a kendo multiselect with ajax data

ajax

kendo-ui

kendo-multiselect