商城首页欢迎来到中国正版软件门户
文章教程　|　产品大全　|　软件问答

您的位置：首页 >Blazor 使用 Blazorise 组件库教程

Blazor 使用 Blazorise 组件库教程

　　发布于2025-12-15　阅读（0）

扫一扫，手机访问

<p>Blazor 使用 Blazorise 组件库需三步：安装 NuGet 包（如 Blazorise.Bootstrap5）、在 Program.cs 注册服务并配置样式链接顺序、在 .razor 文件中用 C# 语法调用组件（如 <Button>），全程无需手写 JS 或 CSS。</p>

Blazor 怎么使用 Blazorise 组件库

Blazor 使用 Blazorise 组件库，核心就三步：装包、配样式与服务、写组件。它不强制绑定某套 CSS 框架，但你得选一个（比如 Bootstrap 5 或 Tailwind），然后按对应方式接入。整个过程用 C# 主导，基本不用碰 JavaScript 或手写 CSS。

安装 NuGet 包并选好 CSS 框架

Blazorise 支持多个前端样式体系，常见选择有 Bootstrap 5、Tailwind、Ant Design 等。以最常用的 Bootstrap 5 为例：

  • 运行命令安装主库和 Bootstrap 适配器：dotnet add package Blazorise.Bootstrap5
  • 再加图标支持（可选但推荐）：dotnet add package Blazorise.Icons.FontAwesome
  • 如果你用的是 WebAssembly 项目，记得在 wwwroot/index.html 的 <head> 里引入 Bootstrap 和 Blazorise 样式链接
  • 如果是 Server 项目，则加到 Pages/_Host.cshtml 的 <head> 中

注册服务和配置提供者

在 Program.cs（.NET 6+）中完成服务注册：

  • 引用命名空间：using Blazorise; 和 using Blazorise.Bootstrap5;
  • 调用扩展方法：builder.Services.AddBlazorise().AddBootstrap5Providers();
  • 确保已启用静态文件中间件：app.UseStaticFiles();（尤其 WebAssembly 项目不能漏）

在页面中使用组件

Blazorise 组件名首字母大写（如 <Button>），区别于原生 HTML 标签（<button>）。用法接近标准 Razor 语法：

  • 在 .razor 文件顶部加 @using Blazorise（或统一写进 _Imports.razor）
  • 直接写组件，比如：<Button Color="Color.Primary" @onclick="HandleClick">点我</Button>
  • 表单类组件支持双向绑定，例如：<TextEdit @bind-Value="model.Name" />
  • 富文本编辑器等高级组件需额外引入命名空间，如 @using Blazorise.RichTextEdit

注意几个易错点

实际跑起来时，这几个细节最容易卡住：

  • CSS 链接顺序不能错：Bootstrap 样式必须在 Blazorise 样式之前加载
  • JS 资源默认按需加载，但首次使用某些组件（如 Modal、DatePicker）可能报 JS 未初始化，检查是否漏了 app.UseStaticFiles()
  • 单元测试要用 bUnit 时，得手动替换 IComponentActivator 实现，否则组件无法渲染
  • 如果只用 Blazorise 的工具类（比如侧边栏逻辑），而不用 UI 组件，可以注册空提供者：services.AddEmptyProviders()

基本上就这些。配通一次后，后续新增页面几乎就是纯 C# + Razor 的体验，连 CSS 类名都不用记。

本文转载于：互联网 如有侵犯，请联系zhengruancom@outlook.com删除。
免责声明：正软商城发布此文仅为传递信息，不代表正软商城认同其观点或证实其描述。

上一篇：龙江人社电子社保卡申领教程

下一篇：清风DJ版本怎么找？

产品推荐

最新发布

相关推荐

热门关注
网站备案号： 苏ICP备2026018738号-1 联系邮箱：zhengruancom@outlook.com
Copyright ©2018-2020