使用WebApi进行Kendo Dropdownlist服务器过滤

时间:2016-03-02 10:09:01

标签: asp.net-web-api drop-down-menu kendo-ui

我正在尝试使用服务器过滤实现Kendo DropDownList 我用这个例子作为起点 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));
}

我的问题如下 最初加载DropDownList时,将加载前5个结果。当用户键入名称时,Controller上请求的Filters属性仍为Null。 我想我的控制器上缺少一些东西,但我不知道它是什么。 Controller是一个Web Api控制器

1 个答案:

答案 0 :(得分:0)

我终于通过使用它来设法解决了这个问题 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>

我在dataSource上缺少类型:“aspnetmvc-ajax”。除此之外,我认为不支持DropDownLists上的serverFiltering和分页,所以我删除了它们 希望它有所帮助...