Radzen Blazor 组件库使用入门

星降 2025-12-20 00:00:00 次阅读

Radzen Blazor 是专为 Blazor 设计的商业级 UI 组件库，提供 DataGrid 等预制组件，支持主题定制与服务端/客户端渲染，需通过 NuGet 安装、注册服务并正确配置 TItem 和数据绑定。

Radzen Blazor 是一个功能丰富、开箱即用的商业级 UI 组件库，专为 Blazor 应用设计。它提供大量预制组件（如 DataGrid、DatePicker、Dialog、Chart 等），支持主题定制、服务端/客户端渲染，并与 Blazor 的生命周期和依赖注入深度集成。入门不难，但需注意几个关键步骤，避免踩坑。

安装与基础配置

在 Blazor Server 或 Blazor WebAssembly 项目中，通过 NuGet 安装核心包即可开始：

Radzen.Blazor：主组件库（必需）
Radzen.Components（可选）：含额外工具类和扩展方法

安装后，在 _Imports.razor 中添加命名空间：

@@using Radzen

并在 Program.cs（Blazor Server）或 Program.cs/MauiProgram.cs（MAUI/WASM）中注册服务：

builder.Services.AddRadzenComponents();

在页面中使用组件

Radzen 组件用法接近原生 HTML 标签，属性大多为标准 C# 参数。例如显示一个带搜索的表格：

注意：TItem 必须显式指定泛型类型，否则编译报错；Data 属性绑定的是 IEnumerable 或 ObservableCollection，不支持异步加载（需配合 LoadData 事件实现分页/懒加载）。

样式与主题集成

Radzen 默认使用内置 CSS 主题（Light/Dark）。要启用主题切换或自定义样式：

在 wwwroot/index.html（WASM）或 Pages/_Host.cshtml（Server）中引入 CSS 文件：
切换主题只需修改 CSS 文件路径，例如换成 dark.css 或 bootstrap.css
如需深度定制，可用 Sass 源码（GitHub 提供）或覆盖 CSS 变量（如 --rz-primary）

常见问题提醒

新手容易忽略以下几点：

组件内部状态（如 RadzenDataGrid 的筛选、排序）默认不自动保存，需手动处理或结合 @ref 调用 API 控制
RadzenButton 的 Click 事件是 EventCallback，不是原生 onclick，写法为 @onclick="HandleClick"
服务端渲染（Blazor Server）下，某些组件（如 RadzenUpload）需额外配置 SignalR 或启用流式上传支持
免费版功能受限（如导出 Excel、高级图表），商用前务必确认许可证类型