Question

我正在尝试实现与远程数据源绑定的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); 
    }

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

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

此外，如果您不希望或根本无法更改服务器端定义，那么您可以通过执行kendoGrid

直接将返回的简单json数组绑定到dataSource.read(response);

Answer 2

请尝试使用以下代码段。

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

KendoUI Grid不会在MVC 4中填充远程数据

2 个答案: