剑道下拉列表服务器过滤与 WebAPI



我正在尝试实现具有服务器过滤功能的剑道下拉列表我用这个例子作为起点http://demos.telerik.com/kendo-ui/dropdownlist/serverfiltering

我的客户端有以下代码

 <div class="demo-section k-content">
        <h4>Products</h4>
        <input id="products" style="width: 100%" />
      </div>
      <script>
                $(document).ready(function() {
                    $("#products").kendoDropDownList({
                        filter: "startswith",
                        dataTextField: "Value",
                        dataValueField: "Key",
                        dataSource: {
                             pageSize               : 5,
                             serverPaging       : true,
                            serverFiltering : true,
                            serverSorting       : true,
                            transport: {
                                read: {
                                    dataType        : "json",
                                    type                : 'GET',
                                    url                 : "http://localhost:7340/DKAPI/FK/1004",
                                }
                            },
                            schema: {
                                data                    : "Data"
                            },
                        }
                    });
                });
                </script>

Web 服务 http://localhost:7340/DKAPI/FK/1004 以以下形式返回 json

{
"Data": [22]
0:  {
"Key": 1
"Value": "JohnsdParker"
}-
1:  {
"Key": 2
"Value": "ClaireBennett"
}-
2:  {
"Key": 3
"Value": "Molly Jones"
}-
3:  {
"Key": 4
"Value": "PeterPetrelli"
}-
4:  {
"Key": 5
"Value": "DiarmuidO Reilly"
}-
5:  {
"Key": 10
"Value": "Mary Collins"
}-
6:  {
"Key": 17
"Value": "Paul O Neil"
}-
7:  {
"Key": 24
"Value": "LouiseO Herlihy"
}-
8:  {
"Key": 25
"Value": "NeilO Brien"
}-
9:  {
"Key": 26
"Value": "SeanFitzpatrick"
}-
10:  {
"Key": 27
"Value": "OliverSmith"
}-
11:  {
"Key": 28
"Value": "DG"
}-
12:  {
"Key": 29
"Value": "Josdfsfsdfss"
}-
13:  {
"Key": 30
"Value": null
}-
14:  {
"Key": 31
"Value": null
}-
15:  {
"Key": 32
"Value": "ougamouga"
}-
16:  {
"Key": 33
"Value": "hkkjhkhkhjk"
}-
17:  {
"Key": 34
"Value": ",khjkhkjlkjlkj"
}-
18:  {
"Key": 35
"Value": "trytrytutu"
}-
19:  {
"Key": 36
"Value": "sdfgsdgf"
}-
20:  {
"Key": 37
"Value": "testtest"
}-
21:  {
"Key": 38
"Value": "pablosdfsd"
}-
-
"Total": 22
"AggregateResults": null
"Errors": null
}

我的控制器采用以下形式

[HttpGet]
[Route("DKAPI/FK/{fkcolid}")]
public HttpResponseMessage Index([System.Web.Http.ModelBinding.ModelBinder(typeof(WebApiDataSourceRequestModelBinder))]DataSourceRequest request, int fkcolid)
{
    Dictionary<int, string> FKDict = _fkService.DDLBFKCol(fkcolid);
    if (FKDict == null)
        return Request.CreateResponse(HttpStatusCode.NotFound, "The Requested Resouce was not Fount");
    else
        return Request.CreateResponse(HttpStatusCode.OK, FKDict.ToDataSourceResult(request));
}

我的问题是以下最初加载下拉列表时,将加载前 5 个结果。当用户键入名称时,控制器上请求的筛选器属性将保持为空。我想我的控制器上缺少一些东西,但我不知道它是什么。控制器是一个 Web API 控制器

我终于设法通过使用这个解决了这个问题http://www.telerik.com/forums/datasourcerequest-filters-and-sorts-fields-null-here-is-the-solution看来剑道文档很差...所以我的最终客户端代码是这样的

<script>
                    $(document).ready(function() {
                        $("#products").kendoDropDownList({
                            filter: "startswith",
                            dataTextField: "Value",
                            dataValueField: "Key",
                            dataSource: {
                            type: "aspnetmvc-ajax",
                                serverFiltering : true,
                                transport: {
                                    read: {
                                        dataType        : "json",
                                        type                : 'GET',
                                        url                 : "http://localhost:7340/DKAPI/FK/1004",
                                        crossOrigin : true
                                    }
                                },
                                schema: {
                                    data                    : "Data",
                                    total                   :"Total"        
                                },
                            }
                        });
                    });
                    </script>

我在数据源上缺少类型:"aspnetmvc-ajax"。除此之外,我相信不支持 DropDownList 上的服务器过滤和分页,所以我删除了它们希望它有帮助...

最新更新