剑道 ui 网格不适用于 .net 核心答案

【问题标题】：kendo ui grid not working with .net core剑道 ui 网格不适用于 .net 核心
【发布时间】：2020-10-14 18:39:30
【问题描述】：

我正在尝试让 Kendo UI 网格 MVC 在 .net 核心中工作，从 PostgreSQL 数据库中读取数据。

我建立了一个项目，将它连接到数据库，用适当的视图搭建了控制器，它工作正常（意味着 CRUD 操作工作正常）。现在我想把它和剑道联系起来。我遵循kendo website 的指南并成功安装（虽然它没有在 nugget 中提供专业版，所以我必须安装试用版？？）。我在 _Layout.cshtml 中添加了所有这些 CSS/js 文件

这是我在控制器中的代码：

        public ActionResult kendo()
    {
        return View();
    }

    // GET for Kendo
    public ActionResult Categories_Read([DataSourceRequest] DataSourceRequest request)
    {
        return Json(GetCategories().ToDataSourceResult(request));
    }

    public static IEnumerable<Category> GetCategories()
    {
        var result = from c in _context.Categories
                     select new Category()
                     {
                         Id = c.Id,
                         Name = c.Name
                     };

        return result;
    }

这是我在 kendo.cshtml 中的代码

@(Html.Kendo().Grid<Category>()
.Name("grid")
.Columns(columns =>
{
    columns.Bound(c => c.Id).Title("id");
    columns.Bound(c => c.Name);
})
.HtmlAttributes(new { style = "height: 550px;" })
.Scrollable()
.Groupable()
.Sortable()
.Pageable(pageable => pageable
    .Refresh(true)
    .PageSizes(true)
    .ButtonCount(5))
.DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read.Action("Categories_Read", "Categories"))
    .PageSize(20)
)

模型很简单

    public class Category
{
    public int Id { get; set; }
    public string Name { get; set; }
}

问题是剑道网格中没有显示数据。我可以在调试器中看到有向前的请求和向后的数据，但网格中没有显示任何内容。

【问题讨论】：

标签： postgresql kendo-ui asp.net-core

【解决方案1】：

问题很可能是由new ASP.NET Core serialization mechanism 引起的。请遵循此处“第二”第 4 步中的指南：

http://docs.telerik.com/kendo-ui/aspnet-mvc/mvc-core/getting-started

第 4 步打开 Startup.cs，使用文本编辑器 (IDE) 并按如下所述进行更新。

找到 ConfigureServices 方法并在最后添加对 services.AddKendo 的调用。

public void ConfigureServices(IServiceCollection services)
{
    ...
    // Maintain property names during serialization. See:
    // https://github.com/aspnet/Announcements/issues/194
    services
        .AddMvc()
        .AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());

    // Add Kendo UI services to the services container
    services.AddKendo();
}

找到 Configure 方法并在最后添加对 app.UseKendo 的调用。

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    ...

    // Configure Kendo UI
    app.UseKendo(env);
}

更新

为了验证是否应用了上述配置，请检查服务器响应并查看其数据和总计是否具有以下结构和字母大小写：

{
    "Data": [
        { "Id": "1", "Name": "Name 1" },
        { "Id": "2", "Name": "Name 2" }
    ],
    "Total": "2"
}

【讨论】：

谢谢，我错过了那一行'.AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());'

【解决方案2】：

我在 .net core 3.1 项目中遇到了同样的问题，这里的解决方法是在 Startup.cs 中添加以下行：

services
    .AddMvc()
    .AddJsonOptions(options =>
    {
        options.JsonSerializerOptions.PropertyNameCaseInsensitive = true;
        options.JsonSerializerOptions.PropertyNamingPolicy = null;
    });

services.AddKendo();

【讨论】：