Blazor 集成 Radzen Blazor Components 其实不复杂,但几个关键步骤漏掉就容易报错或样式/交互失效。核心就四步:安装包、导入命名空间、引入主题样式、加载 JS 支持。
安装 Radzen.Blazor NuGet 包
推荐用命令行方式,兼容性最稳:
Blazor Server 项目:在项目根目录运行dotnet add package Radzen.BlazorBlazor 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>这类组件了。
