JSON 数据到 KENDO UI Grid ASP.NET MVC 4答案

【问题标题】：JSON data to KENDO UI Grid ASP.NET MVC 4JSON 数据到 KENDO UI Grid ASP.NET MVC 4
【发布时间】：2013-08-26 20:34:13
【问题描述】：

我在获取要在我的 Kendo.Grid 上显示的数据时遇到了一些麻烦。

JSON 是有效的，它在单击链接时显示为文本，但在网格中加载数据。

这里是来源，任何帮助将不胜感激！

br。埃罗

控制器

public ActionResult Index([DataSourceRequest]DataSourceRequest  request)
    {
        using (var db = new CimDataContext())
        {
            IQueryable<Customer> customers = db.Customers;
            DataSourceResult result = customers.ToDataSourceResult(request);
            return Json(result, "text/x-json", JsonRequestBehavior.AllowGet);
        }
    }

索引.cshtml

@(Html.Kendo().Grid<KendoUIMvcCim.Models.Customer>()
  .Name("grid")
  .DataSource(dataSource => dataSource 
      .Ajax() 
      .Read(read => read.Action("Index", "Customer")) 
   )
  .Columns(columns =>
  {
      columns.Bound(customer => customer.Id);
      columns.Bound(customer => customer.Name);
      columns.Bound(customer => customer.Number);
      columns.Bound(customer => customer.AgentID);
      columns.Bound(customer => customer.Info);
      columns.Bound(customer => customer.Email);
      columns.Bound(customer => customer.StartTime);
      columns.Bound(customer => customer.EndTime);
      columns.Bound(customer => customer.Category);
  })
  .Pageable() 
  .Sortable()

)

浏览器上的结果

{"Data":[{"Id":2,"Name":"Name1","Number":"040000000","AgentID":"1","Info":"info1","Email":"email1","StartTime":"\/Date(1360101600000)\/","EndTime":null,"Category":"Laser"},{"Id":3,"Name":"Name2","Number":"0400000000","AgentID":"2","Info":"info2","Email":"email2","StartTime":"\/Date(1360188000000)\/","EndTime":null,"Category":"Kaihi"}],"Total":2,"AggregateResults":null,"Errors":null}

【问题讨论】：

我想你忘了在你的页面中添加 jquery min js 添加这个 jquery Jquery-1.8.1.min.js .
我认为 Kendo 文件和 JQuery 已正确加载，因为我可以使用 .BindTo ViewBag 方法将数据放到网格中。

标签： c# asp.net asp.net-mvc json

【解决方案1】：

我认为问题在于您的操作方法返回一个 JSON 字符串，而您的视图需要一个 KendoUIMvcCim.Models.Customer 列表。在控制器中使用两种不同的操作方法来解决这个问题：

第一个操作返回一个 ViewResult 并且是 View 所需要的

public ViewResult Index()
{
  using (var db = new CimDataContext())
  {
    IQueryable<Customer> customers = db.Customers;
    return View(customers);
  }
}

第二个动作返回 ActionResult 并且您的网格需要通过 AJAX 调用来填充它。

public ActionResult Customers_Read([DataSourceRequest]DataSourceRequest request)
{
  using (var db = new CimDataContext())
  {
    IQueryable<Customer> customers = db.Customers;
    DataSourceResult result = customers.ToDataSourceResult(request);
    return Json(result, "text/x-json", JsonRequestBehavior.AllowGet);
  }
}

在您的 Index.cshtml 文件中，您最终需要更改 .Read 行，以便在控制器中调用正确的操作方法。

  .DataSource(dataSource => dataSource 
      .Ajax() 
      .Read(read => read.Action("Customers_Read", "Customer")) 
   )

【讨论】：

我也试过你的例子，同样的问题。剑道文件已正确加载，因为我可以使用 .BindTo ViewBag 方法将数据放到网格中。无论如何，感谢您的评论！
@Porttila 请检查我的全新答案。我记得我遇到了和你一样的问题，我就是这样解决的！
仍在挣扎，现在网格打开时没有任何数据。如果我单击标题进行排序或其他内容，它只会在文本中打开与以前相同的 JSON 输入。该死的，这不应该这么难，以前主要使用 VB.NET Windows 应用程序，所以这对我来说有点新。
在我的升级示例中，我将数据直接发送到视图，并且网格需要它才能正常工作。当我为你准备第一个例子时，我删掉了太多的代码。我认为它现在应该可以工作了。
这是一个该死的谜，但现在工作，我不确定哪个出了问题，因为我很确定我以前试过这种方式。感谢您的帮助！

【解决方案2】：

我知道这是一篇旧帖子，但对于仍在苦苦挣扎的人来说：

如果您从 Kendo 文档复制/粘贴，请确保不要包含 2 次 jquery，因为您的文件中可能已经包含它。

也就是说，将 jQuery 引用放在页面的 HEAD 中，而不是底部，否则 kendo 网格将在实际导入之前尝试使用 jQuery 呈现。

希望对你有帮助

【讨论】：

【解决方案3】：

最终工作代码：

控制器

public ViewResult Index()
    {      
            return View();
    }

    public ActionResult Customers_Read([DataSourceRequest]DataSourceRequest request)
    {
        using (var db = new CimDataContext())
        {
            IQueryable<Customer> customers = db.Customers;
            DataSourceResult result = customers.ToDataSourceResult(request);
            return Json(result, JsonRequestBehavior.AllowGet);
        }
    }

索引.cshtml

@(Html.Kendo().Grid<KendoUIMvcCim.Models.Customer>()
  .Name("grid")
  .DataSource(dataBinding => dataBinding.Ajax().Read(read => read.Action("Customers_Read", "Customer")))
  .Columns(columns =>
  {
      columns.Bound(customer => customer.Id);
      columns.Bound(customer => customer.Name);
      columns.Bound(customer => customer.Number);
      columns.Bound(customer => customer.AgentID);
      columns.Bound(customer => customer.Info);
      columns.Bound(customer => customer.Email);
      columns.Bound(customer => customer.StartTime);
      columns.Bound(customer => customer.EndTime);
      columns.Bound(customer => customer.Category);
  })
  .Pageable() 
  .Sortable()

)

【讨论】：