KendoUI Grid 未在 MVC 4 中填充远程数据答案

【问题标题】：KendoUI Grid not populating remote data in MVC 4KendoUI Grid 未在 MVC 4 中填充远程数据
【发布时间】：2013-12-13 22:39:09
【问题描述】：

我正在尝试实现绑定到远程数据源的 Telerik 示例 on their site。网格显示，但其中从来没有任何数据。我从我的控制器得到一个 JSON 结果。我通过直接浏览到 RemoteData/GetData 并查看 JSON 字符串来验证这一点。它填充了正确的数据。

当我直接浏览到 localhost/RemoteData/RemoteData 时，我看到它使用 Fiddler 正确解析。（状态代码 200）。

这是他们示例中的代码以及我对其进行的修改。这是我的看法

@(Html.Kendo().Grid<DataObjects.Car>()    
.Name("grid")
.Columns(columns => {
    columns.Bound(p => p.CarID);
    columns.Bound(p => p.Make);
    columns.Bound(p => p.Model);
    columns.Bound(p => p.Year);
    columns.Bound(p => p.Mileage);
})
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Read(read => read.Action("GetData", "RemoteData"))
 )

)

控制器中的代码：

 public ActionResult GetData()
    {
        var cars = new List<Car>();

        cars.Add(new Car { CarID = 1, Make = "Chevrolet", Mileage = 259301, Model = "Cavalier", Year = 2000 });
        cars.Add(new Car { CarID = 2, Make = "DeLorean", Mileage = 44087, Model = "DMC-12", Year = 1981 });
        cars.Add(new Car { CarID = 3, Make = "Honda", Mileage = 183000, Model = "Del Sol", Year = 1993 });

        return Json(cars, JsonRequestBehavior.AllowGet); 
    }

【问题讨论】：

标签： asp.net-mvc json telerik

【解决方案1】：

当您执行return Json(cars, JsonRequestBehavior.AllowGet); 时，您会将 JSON 数组返回到您的 Kendo Grid DataSource（请求者），如下所示：

[
   {
       "CarID": 1,
       "Make": "Chevrolet",
       "Mileage":259301,
       "Model":"Cavalier",
       "Year":2000
    },
   {
       "CarID": 2,
       "Make": "DeLorean",
       "Mileage":44087,
       "Model":"DMC-12",
       "Year":1981
    },
]

但是您的 kendo DataSource 期望 javascipt 数组采用不同的预定义架构，然后由您的方法返回。

您需要以与网格要求完全相同的格式返回 javascript 数组 json。最简单的方法是让你的grid_read ActionMethod 像这样：

public ActionResult GetData([DataSourceRequest] DataSourceRequest request)
{
    ///your usual code
    return Json(cars.ToDataSourceResult(request), JsonRequestBehavior.AllowGet); 
}

现在您的响应在客户端的剑道网格可接受的架构定义中。

此外，如果您不希望或根本无法更改服务器端定义，则可以通过执行 dataSource.read(response); 直接将返回的简单 json 数组绑定到您的 kendoGrid

【讨论】：

谢谢你 Manish Mishra。这正是我所需要的。我查看的示例没有显示返回数据的方法的实现，因此我不知道需要 [DataSourceRequest] 和 ToDataSourceResult。

【解决方案2】：

请尝试以下代码 sn-p。

 using Kendo.Mvc.UI;
 using Kendo.Mvc.Extensions;
 ...............
 ...............
 public ActionResult GetData([DataSourceRequest] DataSourceRequest request)
        {
            var cars = new List<Car>();

            cars.Add(new Car { CarID = 1, Make = "Chevrolet", Mileage = 259301, Model = "Cavalier", Year = 2000 });
            cars.Add(new Car { CarID = 2, Make = "DeLorean", Mileage = 44087, Model = "DMC-12", Year = 1981 });
            cars.Add(new Car { CarID = 3, Make = "Honda", Mileage = 183000, Model = "Del Sol", Year = 1993 });

            return Json(cars.ToDataSourceResult(request));
        }

【讨论】：

谢谢杰伊什！！那个 DataSourceRequest 和 ToDataSourceResult 东西成功了！