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是一个简单的类：

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 Grid数据源

1 个答案: