使用MVC进行Kendo网格服务器端过滤

时间:2016-11-14 19:30:56

标签: ajax model-view-controller kendo-ui

我有一个带有Web Api服务器端排序的网格,它可以工作。我需要添加过滤功能。当网格的数据源将过滤参数发送到Web Api控制器时,Filter对象始终为“空”,而不是null。这是我的设置

网格数据源:

var myTeamGridDataSource = new kendo.data.DataSource({
    serverPaging: true,
    serverSorting: true,
    serverFiltering: true,
    schema: {
        data: "data",
        total: "count"
    },
    pageSize: 10,
    transport: {
        read: {
            url: baseMyTeamUrl, // web api
            dataType: "json",
            type: "POST",               
        }
    },       
    sort: {
        field: "Name",
        dir: "asc"
    }
});

行动:

public HttpResponseMessage KendoGridMyTeam(GridInputModel inputModel)
{
     ... 
}

GridInputModel.cs

public class GridInputModel
{
    public int Page { get; set; }
    public int PageSize { get; set; }
    public int Skip { get; set; }
    public int Take { get; set; }
    public List<GridInputSortModel> Sort { get; set; }
    public List<GridInputFilterModel> Filter { get; set; }
}

GridInputFilterModel.cs

public class GridInputFilterModel
{
    public GridInputFilterModel()
    {
        filters = new List<GridInputFilterModel>();
    }
    public string field { get; set; }
    public string Operator { get; set; }
    public object value { get; set; }
    public string logic { get; set; }
    public List<GridInputFilterModel> filters { get; set; }

}

请求正文

    take=10&skip=0&page=1&pageSize=10&sort[0][field]=Name&sort[0][dir]=asc
&filter[filters][0][field]=Name
&filter[filters][0][operator]=eq
&filter[filters][0][value]=cling
&filter[logic]=and

GridInputModel“GridInputModel inputModel”已实例化,并且排序对象已预设,并且该功能正常工作。但是,在客户端中设置并发送到服务器的过滤器为空。经过一堆搜索,我找不到服务器端网格过滤的现代例子。您可能建议我使用Kendo.Mvc库:

[DataSourceRequest] DataSourceRequest request

此ALSO在Request中创建Filter对象,但过滤器也为空。有什么建议?我不愿意使用的一个选项是使用parameterMap并在查询字符串上发送过滤器。如果我必须,很好,但有人必须要有这个工作。

3 个答案:

答案 0 :(得分:1)

发生的事情是您的应用程序服务器端未正确反序列化过滤器对象。如果将参数设置为对象并查看发送的实际JSON,则可以查看此项。您的过滤器将出现在字符串中。使用参数映射并在发送之前格式化过滤器数组,您可能需要重载过来使用的剑道使用的DataSourceClass。我遇到了同样的问题,不得不在发送之前创建自己的类并格式化过滤器。弄乱过滤器的问题是过滤器数组中的operator属性。

答案 1 :(得分:1)

在你的javascript中试试这个:

var grid = $("#YourGridId").data("kendoGrid");
var $filter = new Array();
$filter.push({ field: "Name", operator: "eq", value: "cling" });
grid.dataSource.filter($filter);

并且在您的控制器方法中需要此签名:

public ActionResult ReadData([DataSourceRequest]DataSourceRequest request){
   ...
}

答案 2 :(得分:0)

我使用的是MVC而不是WebApi,但是我得到了传递给我的控制器方法的空过滤器的相同症状。我也在创建我自己的模型的兔子洞中处理发送到我的控制器方法的请求参数,尝试解析Kendo的过滤器结构等等。我终于通过跟随Falafel的博客上的this example来实现它。具体来说,您需要对下面的代码进行更改。

最后,下面显示的技术可以很容易地为Kendo的DataSource实现服务器处理(一旦你知道所有必需的部分就可以使它工作)。

Grid DataSource:您必须匹配从服务器返回的所有(区分大小写)字段。我遗漏了错误,它停止了工作。您可能必须更改类型才能使其与WebApi一起使用。

type: "aspnetmvc-ajax",
schema: {
    data: "Data",
    total: "Total",
    errors: "Errors",
    model: {
        id: "YourKeyFieldName"
    }
},

动作:是的,您需要使用Kendo的DataSourceRequest对象及其属性。

using Kendo.MVC.UI;
using Kendo.MVC.Extensions;
[HttpPost]
public ActionResult KendoGridMyTeam([DataSourceRequest] DataSourceRequest request)
{
     ... 
    return Json(yourDataVariable.ToDataSource(request));
}