Telerik UI for ASP.NET Core 在 Razor Pages 中的使用指南-优快云博客

Telerik UI for ASP.NET Core 在 Razor Pages 中的使用指南

kendo-ui-core An HTML5, jQuery-based widget library for building modern web apps. 项目地址: https://gitcode.com/gh_mirrors/ke/kendo-ui-core

前言

在现代Web开发中，ASP.NET Core Razor Pages 提供了一种轻量级且高效的页面开发模型。本文将深入探讨如何在 Razor Pages 项目中集成和使用 Telerik UI for ASP.NET Core 组件，特别是通过一个完整的 Grid 组件示例来展示其强大的数据管理能力。

Razor Pages 简介

Razor Pages 是 ASP.NET Core 2.0 引入的一种页面中心开发模型，相比传统的 MVC 模式具有以下特点：

页面中心化：每个页面由 .cshtml 文件和对应的 PageModel 类组成
简化请求处理：通过 @page 指令直接处理请求，无需控制器
内置安全机制：自动实现防伪令牌验证，防止 CSRF 攻击
约定优于配置：使用 OnGet、OnPost 等命名约定处理 HTTP 请求

项目初始化

两种集成方式

使用 Telerik Visual Studio 扩展
- 提供预配置的 Razor Pages 项目模板
- 自动包含 Grid 组件的 CRUD 示例
- 简化初始配置过程
手动配置标准 Razor Pages 项目
- 使用 Visual Studio 的 ASP.NET Core Web App 模板
- 需要手动添加 Telerik UI 依赖和配置
- 提供更大的灵活性

核心组件集成

Grid 组件实现

下面我们以实现一个功能完整的 Grid 为例，展示 Razor Pages 与 Telerik UI 的深度集成。

1. 页面基础配置

@page
@model IndexModel
@using Kendo.Mvc.UI
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()

2. 后端配置

在 Program.cs 中配置 JSON 序列化和 Kendo 服务：

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages()
    .AddJsonOptions(options => 
        options.JsonSerializerOptions.PropertyNamingPolicy = null);
builder.Services.AddKendo();

3. Grid 组件声明

HTML Helper 方式:

@(Html.Kendo().Grid<OrderViewModel>()
    .Name("grid")
    .DataSource(ds => ds.Ajax()
        .Read(r => r.Url("/Index?handler=Read").Data("forgeryToken")
        // 其他CRUD操作配置...
        .Model(m => m.Id(id => id.OrderID))
    )
    // 其他配置...
)

Tag Helper 方式:

<kendo-grid name="grid">
    <datasource type="DataSourceTagHelperType.Ajax">
        <transport>
            <read url="/Index?handler=Read" data="forgeryToken" />
            <!-- 其他CRUD操作配置 -->
        </transport>
        <model id="OrderID">
            <!-- 字段配置 -->
        </model>
    </datasource>
    <!-- 其他配置 -->
</kendo-grid>

4. 防伪令牌处理

<script>
    function forgeryToken() {
        return kendo.antiForgeryTokens();
    }
</script>

5. PageModel 实现

public class IndexModel : PageModel
{
    public static IList<OrderViewModel> orders;
    
    public JsonResult OnPostRead([DataSourceRequest] DataSourceRequest request)
    {
        return new JsonResult(orders.ToDataSourceResult(request));
    }
    
    // 其他CRUD操作方法...
}

数据提交处理

Telerik UI 组件可以无缝集成到 Razor Pages 的表单提交中：

<form method="post">
    <kendo-autocomplete for="ShipName" 
                        bind-to="countries">
    </kendo-autocomplete>
    <button type="submit">提交</button>
</form>

PageModel 中通过 [BindProperty] 自动绑定：

public class IndexModel : PageModel
{
    [BindProperty]
    public string ShipName { get; set; }
    
    public IActionResult OnPost()
    {
        // 处理提交的数据
        return Page();
    }
}