讲师中心 微信公众号
AI工具推荐 视频效率加速

Blazor 怎么使用 Blazorise 组件库

浅雪酱_9558

浅雪酱_9558

发布时间:2025-12-22 09:30:08

|

331人浏览过

|

来源于php中文网

原创

Blazor 使用 Blazorise 组件库需三步:安装 NuGet 包(如 Blazorise.Bootstrap5)、在 Program.cs 注册服务并配置样式链接顺序、在 .razor 文件中用 C# 语法调用组件(如 ),全程无需手写 JS 或 CSS。

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 的 里引入 Bootstrap 和 Blazorise 样式链接
  • 如果是 Server 项目,则加到 Pages/_Host.cshtml 的 中

注册服务和配置提供者

在 Program.cs(.NET 6+)中完成服务注册:

创意前端视觉设计
创意前端视觉设计

在创建或重塑需要独特视觉方向、应避免通用 AI 生成审美的网站、落地页、仪表盘、UI 组件、海报或应用时使用。

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

在页面中使用组件

Blazorise 组件名首字母大写(如 <button></button>),区别于原生 HTML 标签(<button></button>)。用法接近标准 Razor 语法:

  • 在 .razor 文件顶部加 @using Blazorise(或统一写进 _Imports.razor)
  • 直接写组件,比如:<button color="Color.Primary">点我</button>
  • 表单类组件支持双向绑定,例如:<textedit></textedit>
  • 富文本编辑器等高级组件需额外引入命名空间,如 @using Blazorise.RichTextEdit

注意几个易错点

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

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

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

热门AI工具

更多
WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

更多
什么是中间件
什么是中间件

中间件是一种软件组件,充当不兼容组件之间的桥梁,提供额外服务,例如集成异构系统、提供常用服务、提高应用程序性能,以及简化应用程序开发。想了解更多中间件的相关内容,可以阅读本专题下面的文章。

709

2024.05.11

Golang 中间件开发与微服务架构
Golang 中间件开发与微服务架构

本专题系统讲解 Golang 在微服务架构中的中间件开发,包括日志处理、限流与熔断、认证与授权、服务监控、API 网关设计等常见中间件功能的实现。通过实战项目,帮助开发者理解如何使用 Go 编写高效、可扩展的中间件组件,并在微服务环境中进行灵活部署与管理。

644

2025.12.18

ThinkPHP中间件机制与请求拦截处理实践
ThinkPHP中间件机制与请求拦截处理实践

本专题围绕 ThinkPHP 中间件体系展开,深入讲解中间件的定义、注册与执行流程。内容包括全局中间件与路由中间件的区别、请求前后处理逻辑、自定义中间件开发以及权限验证与日志处理应用。通过实际案例,帮助开发者掌握中间件在项目中的核心作用与最佳实践。

458

2026.03.31

bootstrap框架介绍
bootstrap框架介绍

本专题整合了bootstrap框架相关介绍,阅读专题下面的文章了解更多详细内容。

765

2026.03.18

bootstrap安装教程
bootstrap安装教程

本专题整合了bootstrap安装相关教程,阅读专题下面的文章了解更多详细操作教程。

199

2026.03.18

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

4756

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1415

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1858

2023.08.03

Docker Desktop怎么设置端口映射
Docker Desktop怎么设置端口映射

本专题聚焦Docker Desktop容器端口映射与访问配置,整理从创建容器、设置端口绑定到验证本地服务访问的操作流程。针对端口被占用、映射配置错误、容器服务无法访问等情况,也提供相应的检查方向,方便用户完成端口配置。

0

2026.11.03

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn