使用 MVC 的 Kendo Grid 服务器端过滤

Question

我有一个带有 Web Api 服务器端排序的网格，它可以工作。我需要添加过滤。当网格的数据源将过滤参数发送到 Web Api 控制器时，过滤器对象始终为“空”，而不是 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

这还会在请求中创建一个过滤器对象，但过滤器也是空的。有什么建议？我会犹豫使用的一种选择是使用 parameterMap 并在查询字符串上发送过滤器。如果我必须这样做，很好，但必须有人让这个工作。

Answer 1

发生的事情是您的应用程序服务器端没有正确反序列化过滤器对象。如果将参数设置为对象并查看发送的实际 JSON，则可以查看此内容。您的过滤器将出现在字符串中。在发送之前使用参数映射并格式化过滤器数组，您可能会重载 kendo 使用的 DataSourceClass。我遇到了同样的问题，必须在发送之前创建自己的类并格式化过滤器。弄乱过滤器的问题是过滤器数组中的运算符属性。

Answer 2

在你的 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){
   ...
}

Answer 3

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

最后，下面显示的技术使得为 Kendo 的 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));
}