asp.net-mvc-4 - 如何将 Kendo UI Grid 绑定(bind)到 Web API Controller ？

Question

我在将数据从 Web API Controller 绑定(bind)到 Kendo UI 网格时遇到问题。不幸的是，我找不到任何这方面的例子。

这是 API Controller :

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)

            )
        )
    )

当我运行它时，我从 Controller 获得了一个成功的 JSON 响应:

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

但是网格中没有数据。有什么明显的我想念的吗？我还没弄明白!

谢谢!

Answer 1

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

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

using Kendo.Mvc.Extensions;

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

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