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

I have bit trouble getting data to show on my Kendo.Grid.

我在Kendo.Grid上显示数据有点麻烦。

JSON is valid and it shows when clicking the link as text, but loading the data n the Grid.

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

Here is the source, any help would be appreciated!

这是来源,任何帮助将不胜感激!

br. Eero

Controller

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

Index.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() 

)

Result on browser

结果在浏览器上

{"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}

3 个解决方案

#1

I think the problem is that your action method is return a JSON string while your view expect a list of KendoUIMvcCim.Models.Customer. Use two different action methods in your controller to address this:

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

1. First action returns a ViewResult and is needed for the View

   第一个操作返回ViewResult,View是必需的

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

2. Second action returns ActionResult and is needed by your grid to populate it through the AJAX calls.

   第二个操作返回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);
     }
   }
   

In your Index.cshtml file you finally need to change the .Read line so you're calling the right action method in your controller.

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

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

#2

I know it's an old post but for anyone still struggling:

我知道这是一个老帖子,但对于仍在努力的人:

Be sure not to be including jquery 2 times if you are copying/pasting from the Kendo documentation, as you might already have it in your file.

如果您要从Kendo文档中复制/粘贴,请确保不要包括jquery 2次,因为您可能已经在文件中将其包含在内。

That said, put the jQuery reference in the HEAD of your page, instead of the bottom, else the kendo grid will try to render with jQuery before it is actually imported.

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

Hope this helps

希望这可以帮助

#3

Final working code:

最终工作代码:

Controller

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

Index.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() 

)