如何将 Kendo UI Grid 绑定到 Web API 控制器？答案

【问题标题】：How to bind Kendo UI Grid to Web API Controller?如何将 Kendo UI Grid 绑定到 Web API 控制器？
【发布时间】：2012-07-20 15:38:08
【问题描述】：

我在将数据从 Web API 控制器绑定到 Kendo UI 网格时遇到问题。不幸的是，我找不到任何这样的例子。

这是 API 控制器：

public class FruitController : ApiController
{
    public class Fruit
    {
        public string Name { get; set; }
        public string Color { get; set; }
    }

    public IEnumerable<Fruit> GetFruits()
    {
        List<Fruit> list = new List<Fruit>();

        Fruit f = new Fruit();
        f.Name = "Apple";
        f.Color = "Red";

        list.Add(f);

        f = new Fruit();
        f.Name = "Kiwi";
        f.Color = "Green";

        list.Add(f);

        return list;
    }
}

在我的 .cshtml 文件中，我有：

 @model IEnumerable<FruitController.Fruit>

    @(Html.Kendo().Grid(Model)    
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.Name);
            columns.Bound(p => p.Color);
        })
        .Groupable()
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("GetFruits", "api/Fruit").Type(HttpVerbs.Get)

            )
        )
    )

当我运行它时，我从控制器获得了一个成功的 JSON 响应：

[{"Name":"Apple","Color":"Red"},{"Name":"Kiwi","Color":"Green"}]

但是网格中没有数据。我有什么明显的遗漏吗？我一直无法弄清楚这一点！

谢谢！

【问题讨论】：

标签： asp.net-mvc-4 asp.net-web-api kendo-ui

【解决方案1】：

查看示例，它需要一个 DataSourceResult。在您的控制器中包含一个执行类似操作的方法，然后它就可以工作了。

我正在考虑使用 postsharp 创建一个方面，它将在 Kendo 所需的控制器类中引入创建/更新/删除方法。

using Kendo.Mvc.Extensions;

  public DataSourceResult Read([DataSourceRequest] DataSourceRequest request)
        {
            return this.Get().ToDataSourceResult(request);
        }

我认为 Kendo 没有为此 API 控制器类提供属性/方面实际上很奇怪，但也许我遗漏了一些东西..

【讨论】：

谢谢，将我的 APIController 方法的返回类型更改为 DataSourceResult 允许 Grid 显示数据。但是，如果我尝试使用现在失败的 AutoComplete 控件。那么这个 Grid 控件不能与标准 APIController 一起使用是否正确？当其他客户端可能使用它们时，必须将我的所有 APIController 结果设置为 DataSourceResult 类型似乎是错误的。

【解决方案2】：

我也很难让 Kendo 为 API 控制器工作。对我来说，从 using Kendo.Mvc.Extensions 切换到 using Kendo.DynamicLinq 很有效。

在我的 Kendo 数据源中，我删除了神秘的行 type: aspnetmvc-ajax 和 parameterMap。

【讨论】：