Kendo MVC Grid ASP.NET Core 中不显示数据答案

【问题标题】：Data does not display in the Kendo MVC Grid ASP.NET CoreKendo MVC Grid ASP.NET Core 中不显示数据
【发布时间】：2020-10-11 15:51:55
【问题描述】：

我正在尝试使用 MVC - ASP.NET Core 使用 Kendo Grid 与硬编码数据进行相当基本的数据绑定。 Grid 渲染良好，.read 方法也被调用并返回 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

【问题讨论】：

标签： kendo-ui asp.net-core-mvc grid

【解决方案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();
    });

结果：

【讨论】：

添加这个有帮助。太感谢了。 services.AddControllersWithViews() .AddNewtonsoftJson(options => { options.SerializerSettings.ContractResolver = new DefaultContractResolver(); });