Radzen Blazor是专为Blazor框架设计的开源UI组件库，内置了按钮、表格、表单、弹窗等上百种常用界面组件，同时支持主题自定义和响应式布局，能有效提升Blazor应用的开发效率。开发者无需从零编写基础UI逻辑，直接调用组件即可快速搭建出美观的应用界面。
环境准备
在使用Radzen Blazor之前，需要确保本地已经安装以下环境：
- .NET 6及以上版本的SDK，Blazor应用基于.NET运行时运行
- Visual Studio 2022或者更高版本，或者VS Code搭配C#开发插件
- 新建一个Blazor Server应用或者Blazor WebAssembly应用项目
安装Radzen Blazor库
可以通过NuGet包管理器安装Radzen Blazor，也可以通过命令行完成安装，两种方式任选其一即可。
NuGet管理器安装
在Visual Studio中右键点击项目，选择管理NuGet程序包，搜索Radzen.Blazor，选择最新稳定版本点击安装即可。
命令行安装
打开项目所在的终端，执行以下命令完成安装：
dotnet add package Radzen.Blazor
基础配置
安装完成后需要完成两项基础配置，才能让组件库正常工作。
注册服务
打开项目的Program.cs文件，添加Radzen相关服务的注册代码：
// 添加Radzen Blazor服务 builder.Services.AddRadzenComponents();
引入静态资源
如果是Blazor Server项目，打开Pages/_Host.cshtml文件，在head标签内添加以下引用：
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css"> <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
如果是Blazor WebAssembly项目，打开wwwroot/index.html文件，在head和body标签内分别添加上述对应引用即可。
常用组件使用示例
完成配置后就可以在razor页面中调用Radzen Blazor的组件了，以下是几个常用组件的使用示例。
按钮组件
RadzenButton支持多种样式和点击事件绑定，基础用法如下：
<RadzenButton Text="点击按钮" Click="@OnClick" ButtonStyle="ButtonStyle.Primary" />
@code {
void OnClick()
{
// 按钮点击后的逻辑
Console.WriteLine("按钮被点击了");
}
}
表格组件
RadzenDataGrid可以快速展示数据列表，支持排序、分页等功能，示例代码如下：
<RadzenDataGrid Data="@userList" TItem="User" AllowPaging="true" AllowSorting="true">
<Columns>
<RadzenDataGridColumn TItem="User" Property="Id" Title="用户ID" />
<RadzenDataGridColumn TItem="User" Property="Name" Title="用户名称" />
<RadzenDataGridColumn TItem="User" Property="Age" Title="用户年龄" />
</Columns>
</RadzenDataGrid>
@code {
List<User> userList = new List<User>
{
new User { Id = 1, Name = "张三", Age = 25 },
new User { Id = 2, Name = "李四", Age = 28 }
};
public class User
{
public int Id { get; set; }
public string Name { get; set; }
public int Age { get; set; }
}
}
表单输入组件
RadzenTextBox是常用的文本输入组件，可以和表单绑定结合使用：
<EditForm Model="@formModel" OnValidSubmit="@HandleSubmit">
<RadzenTextBox @bind-Value="formModel.UserName" Placeholder="请输入用户名" />
<RadzenButton ButtonType="ButtonType.Submit" Text="提交" />
</EditForm>
@code {
FormModel formModel = new FormModel();
void HandleSubmit()
{
Console.WriteLine($"提交的用户名是：{formModel.UserName}");
}
public class FormModel
{
public string UserName { get; set; }
}
}
主题配置
Radzen Blazor支持自定义主题，开发者可以修改默认主题的配色、字体等属性，也可以切换内置的其他主题。如果需要自定义主题，可以在引入的css文件之后添加自定义样式覆盖默认配置，例如修改主色调：
:root {
--rz-primary: #1890ff; /* 修改主色调为蓝色 */
}
注意事项
- 组件的事件绑定需要遵循Blazor的事件绑定语法，不要写成其他框架的写法
- 如果组件没有正常显示，先检查静态资源是否正确引入，服务是否完成注册
- 组件的属性命名遵循Blazor的规范，大部分属性和原生HTML属性命名逻辑一致
Radzen_BlazorBlazor组件库Blazor开发前端组件修改时间：2026-07-21 12:42:25