数据未显示在 Kendo MVC 网格 ASP.NET 核心中

Question

我正在使用 Kendo Grid 使用 MVC - ASP.NET Core 尝试相当基本的数据绑定与硬编码数据。 Grid 渲染良好，.read 方法也被调用 returns JSON；但是，数据不会显示在网格中。我试图查看 aspnet-mvc.js 是否正常加载。我没有看到此脚本有任何错误。此外，脚本只列出一次，而且顺序正确。任何关于缺少什么的帮助将不胜感激。我也试过使用 JsonResult。但这也没有用。

public void ConfigureServices(IServiceCollection services)
{
  services.AddControllersWithViews();
  services.AddKendo();
  services.AddMvc().AddNewtonsoftJson(o =>
  {
o.SerializerSettings.ReferenceLoopHandling =  ReferenceLoopHandling.Ignore;
            }).SetCompatibilityVersion(Microsoft.AspNetCore.Mvc.CompatibilityVersion.Version_3_0); 
}

public ActionResult BindGrid([DataSourceRequest] DataSourceRequest request)
{
  var company = new List<Company>();
  company.Add(new Company
  {
    CompanyId = 102,
    Id = 1,
    Name = "John Smith"
  });
           
DataSourceResult result = company.ToDataSourceResult(request);
return Json(result);        
}

@using Kendo.Mvc.UI 
@model IEnumerable<GridPortal.Web.Models.Company>

  <script src="~/lib/kendo/2020.1.406/js/kendo.all.min.js"></script>
  <script src="~/lib/kendo/2020.1.406/js/kendo.web.min.js"></script>
  <script src="~/lib/kendo/2020.1.406/js/kendo.aspnetmvc.min.js"></script>


  <div style="width:100%;height:60%">
    @(Html.Kendo().Grid<GridPortal.Web.Models.Company>() .Name("BindGridUsingRead") 
.Columns(columns => { columns.Bound(p => p.Id).Width(15).Title("ID").Filterable(false); columns.Bound(p => p.Name).Title("Name").Width(30).Filterable(false); columns.Bound(p => p.CompanyId).Title("CompanyID").Width(15).Filterable(false);
      }) .Scrollable() .Pageable() .Filterable(ftp => ftp.Mode(GridFilterMode.Row)) .Resizable(resize => resize.Columns(true)) .HtmlAttributes(new { style = "height: 100%" }) .Selectable() .DataSource(dataSource => dataSource .Ajax() .Model(model => model.Id(p
      => p.Id)) .ServerOperation(false) .Read(read => read.Action("BindGrid", "Home"))) )
  </div>

enter image description here

Answer 1

务必在_Layout.cshtml中添加以下js和css文件：

@{ var kendoVersion = "2020.1.219";}
<link href="https://kendo.cdn.telerik.com/@kendoVersion/styles/kendo.common-material.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/@kendoVersion/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/@kendoVersion/styles/kendo.material.min.css" rel="stylesheet" type="text/css" />

<script src="https://kendo.cdn.telerik.com/@kendoVersion/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/@kendoVersion/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/@kendoVersion/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/@kendoVersion/js/kendo.aspnetmvc.min.js"></script>

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />

并删除 jQuery:

<script src="~/lib/jquery/dist/jquery.min.js"></script>

务必在Startup.ConfigureServices中添加以下代码：

services.AddControllersWithViews()
    .AddNewtonsoftJson(options =>
    {
        options.SerializerSettings.ContractResolver = new DefaultContractResolver();
    });

结果：

数据未显示在 Kendo MVC 网格 ASP.NET 核心中

Data does not display in the Kendo MVC Grid ASP.NET Core

grid

kendo-ui

asp.net-core-mvc