0

我正在尝试使用 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>

在此处输入图像描述

4

1 回答 1

0

请务必添加以下 js 和 css 文件_Layout.cshtml

@{ 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();
    });

结果: 在此处输入图像描述

于 2020-10-12T04:18:53.230 回答