Blazorise 是支持多样式系统的 Blazor UI 框架,需按项目类型(Server/WASM)匹配 .NET 8、安装对应 Provider 包(如 Blazorise.Bootstrap5)、注册服务、引入 CSS/JS 资源并配置 _Imports.razor,缺一不可。

Blazorise 是一个为 Blazor 应用提供现代化、响应式 UI 组件的开源框架,支持 Bootstrap、Tailwind CSS、Bulma 等多种前端样式系统。集成它不难,但配置细节容易出错,尤其在 .NET 8+ 和 WebAssembly(WASM)场景下。
确认项目类型和目标框架
Blazorise 支持 Server 和 WebAssembly 两种托管模型,但不同版本对 .NET 版本有要求。目前稳定版(v1.7.x)推荐搭配 .NET 8,且需确保 SDK 已安装完整。若用 WASM,注意部分组件(如文件上传、本地存储)需额外处理跨域或权限配置。
- Server 模式:直接引用服务端渲染,无需额外 JS 互操作配置
- WASM 模式:需在 Program.cs 中注册客户端服务,并确保 index.html 正确加载 CSS/JS 资源
- 避免混用旧版 Blazorise(如 v0.x)与 .NET 8,会因生命周期或依赖注入变更导致启动失败
安装 NuGet 包并选择主题引擎
Blazorise 本身是核心库,UI 样式由对应“提供程序”(Provider)实现。比如用 Bootstrap 就装 Blazorise.Bootstrap5,用 Tailwind 就装 Blazorise.Tailwind。别只装 Blazorise 主包——它没样式,运行时会报组件未注册错误。
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库,专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考,支持声明式与编程式两种初始化方式,提供 $cm/$m 数据访问方法。
- 以 Bootstrap 5 为例,在项目中执行:dotnet add package Blazorise.Bootstrap5
- 同时安装配套样式包:dotnet add package Blazorise.Icons.FontAwesome(图标支持)
- 若用 Tailwind,还需在 tailwind.config.js 中添加 Blazorise 所需的类名白名单(如
bg-primary、text-danger),否则构建后样式丢失
配置 Program.cs 和 _Imports.razor
这是最容易漏掉的两步。Server 和 WASM 的注册方式略有差异,但都必须显式调用 AddBlazorise() 并指定 Provider。
- 在 Program.cs 中(Server):
.AddBootstrap5Providers()
.AddFontAwesomeIcons();
- 在 Program.cs 中(WASM):
.AddBootstrap5Providers()
.AddFontAwesomeIcons();
var host = builder.Build();
host.Services.UseBootstrap5(); // 注意这行必须调用
host.Services.UseFontAwesomeIcons();
- 在 _Imports.razor 添加命名空间:
@using Blazorise.Components
@using Blazorise.Bootstrap5
引入 CSS 和 JS 资源
样式和脚本不加载,组件就只是“看不见的 HTML”。路径和顺序很重要。
- Server:在 Pages/_Host.cshtml 的
中按顺序加:
- WASM:在 wwwroot/index.html 的
中加相同链接;JS 文件(如 bootstrap.bundle.js)通常由 Provider 自动注入,但若自定义了 CDN 或本地路径,需手动加在底部 - 检查浏览器开发者工具的 Network 面板,确认这些资源返回 200,而非 404 —— 常见原因是包版本不匹配导致资源路径变化
基本上就这些。配完跑个 <button color="Color.Primary">Hello Blazorise</button> 测试一下,能显示带样式的按钮,说明集成成功。后续按需启用表单验证、数据表格或主题切换,都是在此基础上扩展。

















