如何在 MVC 中将 JSON 绑定到 Kendo 网格数据源

Question

我正在尝试将 JSON 响应动态绑定到网格。我已经设置 autobind = false 所以我可以控制何时调用 ReadData().

下面有一个简化的示例，我无法开始工作。

在视图中(cshtml)

@(Html.Kendo().Grid<MyModel>()
    .Name("GridDetail")
    .AutoBind(false)
    .DataSource(ds =>
    {
        ds.Ajax().Read(r =>
        {
            r.Action("ReadData", "Home"); //action in Home controller
        });
    })
    .Columns(c =>
    {
        c.Bound(m => m.Name);
        c.Bound(m => m.Age);
    })
)

@section Scripts{
    <script type="text/javascript">
        $(function () {
            var grid = $("#GridDetail").data("kendoGrid");
            grid.dataSource.read();
        });

    </script>   
}

在我的控制器中

public ActionResult ReadData()
{
    var model = new[]
    {
        new MyModel
        {
            Name = "Abc",
            Age = 10
        }, 
        new MyModel
        {
            Name = "PersonName",
            Age = 25
        }, 
    };
    return Json(model, JsonRequestBehavior.AllowGet);
}

使用 chrome 中的开发人员工具，我可以看到 ReadData() 的响应是 [{"Name":"Abc","Age":10},{"Name":"PersonName","Age":25}]，但是呈现的网格仅显示列名称但没有数据列。

MyModel 是一个简单的 class :

public class MyModel
{
    public string Name { get; set; }
    public int Age { get; set; }
}

Answer 1

Kendo UI MVC Grid 设计用于在提供数据的操作方法中与 ToDataSourceResult() 一起工作。查看以下文章：

http://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding

ToDataSourceResult() 将负责执行数据操作（排序、分页等），并将以预期格式提供数据，即：

{
    Data: [
        { "Name": "Abc", "Age": 10 },
        { "Name": "PersonName", "Age": 25 }
    ],
    Total: 2
}

（为了便于阅读，添加了空格，重要的部分是 Data 和 Total 的存在。）

编辑补充： 要添加到此答案，您的控制器代码可能如下所示：

public ActionResult ReadData([DataSourceRequest] DataSourceRequest request)
{
    var model = new[]
    {
        new MyModel
        {
            Name = "Abc",
            Age = 10
        }, 
        new MyModel
        {
            Name = "PersonName",
            Age = 25
        }, 
    };
    return Json(model.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

如何在 MVC 中将 JSON 绑定到 Kendo 网格数据源

How to bind JSON to Kendo Grid datadource in MVC

telerik

telerik-grid

kendo-ui

kendo-asp.net-mvc