Blazor 怎么集成 Radzen Blazor Components

来源:这里教程网 时间:2026-02-21 17:43:18 作者:

Blazor 集成 Radzen Blazor Components 其实不复杂,但几个关键步骤漏掉就容易报错或样式/交互失效。核心就四步:安装包、导入命名空间、引入主题样式、加载 JS 支持。

安装 Radzen.Blazor NuGet 包

推荐用命令行方式,兼容性最稳:

Blazor Server 项目:在项目根目录运行
dotnet add package Radzen.Blazor
Blazor WebAssembly(.NET 6+):同样执行该命令,会自动更新
.csproj
文件
如果手动编辑
.csproj
,加这行即可:
<packagereference include="Radzen.Blazor" version="*"></packagereference>

在 _Imports.razor 中注册命名空间

这一步必须做,否则组件标签(如

<radzendatagrid></radzendatagrid>
)会标红且无法识别:

打开
_Imports.razor
文件(通常在项目根目录)
追加两行:

@using Radzen
@using Radzen.Blazor

配置主题样式(按托管模型区分)

Radzen 提供 material、bootstrap、fluent 等主题,默认推荐

material
。引入方式取决于你的 Blazor 模式:

.NET 8+(Server 或 WebAssembly):在
App.razor
 区域添加:
<radzentheme theme="material"></radzentheme>
.NET 7 Server:在
Pages/_Host.cshtml
中加入:
<component type="typeof(RadzenTheme)" render-mode="ServerPrerendered" param-theme="@(" material></component>
独立 WebAssembly(如 .NET 6):直接在
wwwroot/index.html
 里加 CSS 引用:
<link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">

引入 Radzen JavaScript 文件

部分组件(如弹窗、日期选择器、文件上传)依赖 JS 互操作,不引入会导致功能静默失效:

.NET 8+:在
App.razor
 底部添加:
<script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>
旧版 WASM(.NET 6/7):同样加到
wwwroot/index.html
 底部

基本上就这些。跑起来后,你就能直接在任意

.razor
文件中写
<radzenbutton text="点我" click="@OnClick"></radzenbutton>
这类组件了。

相关推荐

热文推荐