KendoUI网格没有在MVC 4中填充远程数据

我正试图在他们绑定到远程数据源的网站上实现Telerik的示例。网格显示，但其中从来没有任何数据。我正在从控制器中获得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); 
    }

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

[
   {
       "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); 
}

现在，您的响应处于客户端的kendo网格可接受的模式定义中。

此外，如果您不希望或根本无法更改服务器端定义，则可以通过执行dataSource.read(response);

将返回的简单json数组直接绑定到kendoGrid

请尝试使用以下代码片段。

 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));
        }

相关内容

最新更新

热门标签：