Kendo UI是否兼容ASP.NET Core 2.0？求相关使用示例

阿华AIGC实验室

2026-5-27

Kendo UI 在 ASP.NET Core 2.0 项目中的使用指南

当然可以！Kendo UI完全支持ASP.NET Core 2.0项目，我这就带你一步步完成集成，还会给你一个实用的示例，帮你解决遇到的问题。

1. 安装必要的NuGet包

首先得把Kendo UI的ASP.NET Core包装到项目里，你可以打开Package Manager Console，运行下面的命令：

Install-Package Telerik.UI.for.AspNet.Core

或者直接在Visual Studio的NuGet包管理器里搜索Telerik.UI.for.AspNet.Core进行安装，注意选支持ASP.NET Core 2.0的版本（2017.3及以上都没问题）。

2. 配置Startup.cs

接下来要在Startup.cs里配置服务和中间件，这一步很关键：

配置服务（ConfigureServices方法）

在服务集合里添加Kendo UI的服务，代码如下：

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc();
    // 注册Kendo UI服务
    services.AddKendo();
}

配置中间件（Configure方法）

启用Kendo UI的中间件，注意顺序要放在UseStaticFiles之后、UseMvc之前：

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
    }

    app.UseStaticFiles();
    // 启用Kendo UI中间件
    app.UseKendo(env);

    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });
}

3. 实现一个Kendo Grid示例

下面用最常用的Kendo Grid组件来演示，从控制器准备数据到视图渲染的完整流程：

第一步：控制器中准备数据源（HomeController.cs）

先定义一个简单的Product模型，然后在Index方法里模拟一些测试数据：

public class HomeController : Controller
{
    public IActionResult Index()
    {
        // 模拟产品数据
        var products = new List<Product>
        {
            new Product { Id = 1, Name = "笔记本电脑", Price = 5999 },
            new Product { Id = 2, Name = "智能手机", Price = 3999 },
            new Product { Id = 3, Name = "平板电脑", Price = 2999 }
        };
        return View(products);
    }
}

// 产品模型类
public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

第二步：在视图中渲染Grid（Index.cshtml）

把模型绑定到Kendo Grid，同时启用分页、排序和筛选功能：

@model IEnumerable<Product>

@{
    ViewData["Title"] = "Kendo UI Grid 演示";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>产品列表</h2>

@(Html.Kendo().Grid(Model)
    .Name("productGrid") // Grid的唯一标识
    .Columns(columns =>
    {
        columns.Bound(p => p.Id).Title("产品ID");
        columns.Bound(p => p.Name).Title("产品名称");
        columns.Bound(p => p.Price).Title("价格").Format("{0:C}"); // 格式化货币显示
    })
    .Pageable() // 开启分页
    .Sortable() // 开启排序
    .Filterable() // 开启筛选
)

第三步：确保布局页包含Kendo资源（_Layout.cshtml）

在_Layout.cshtml的<head>和<body>末尾分别添加Kendo的样式和脚本引用：

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Kendo UI Demo</title>

    <!-- 引入Kendo UI样式 -->
    @Html.Kendo().StylesheetRegistrar()
        .DefaultGroup(g => g.UseCompact()) // 这里用紧凑主题，也可以换成Default等其他主题
</head>
<body>
    <div class="container">
        @RenderBody()
    </div>

    <!-- 引入Kendo UI脚本 -->
    @Html.Kendo().ScriptRegistrar()
</body>