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

Blazorise 集成和配置教程

千丽姑娘_1960

千丽姑娘_1960

发布时间:2025-12-26 17:21:07

|

865人浏览过

|

来源于php中文网

原创

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

blazorise 集成和配置教程

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 前端框架开发指南(IRIS版)
HISUI 前端框架开发指南(IRIS版)

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):
builder.Services.AddBlazorise(options => { options.Immediate = true; })
  .AddBootstrap5Providers()
  .AddFontAwesomeIcons();
  • 在 Program.cs 中(WASM):
builder.Services.AddBlazorise(options => { options.Immediate = true; })
  .AddBootstrap5Providers()
  .AddFontAwesomeIcons();

var host = builder.Build();
host.Services.UseBootstrap5(); // 注意这行必须调用
host.Services.UseFontAwesomeIcons();
  • 在 _Imports.razor 添加命名空间:
@using Blazorise
@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> 测试一下,能显示带样式的按钮,说明集成成功。后续按需启用表单验证、数据表格或主题切换,都是在此基础上扩展。

热门AI工具

更多
WorkBuddy

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

UP简历
UP简历 Hot

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

SkildArt
SkildArt Hot

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

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

Loomy
Loomy Hot

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

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

豆包大模型

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

DeepSeek

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

相关专题

更多
bootstrap框架介绍
bootstrap框架介绍

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

785

2026.03.18

bootstrap安装教程
bootstrap安装教程

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

199

2026.03.18

ThinkPHP表单验证与数据安全处理实战
ThinkPHP表单验证与数据安全处理实战

本专题聚焦 ThinkPHP 在表单处理中的验证与安全机制,系统讲解验证器使用、自定义规则、场景验证以及错误提示处理。内容涵盖 XSS 防护、SQL 注入防御、数据过滤与输入校验等关键安全措施。通过实际案例,帮助开发者构建安全可靠的数据处理流程。

281

2026.03.30

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

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

4836

2023.06.20

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

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

1435

2023.07.28

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

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

1878

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

10363

2023.08.17

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

1040

2023.09.01

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

0

2026.11.06

热门下载

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

精品课程

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

共14课时 | 1.6万人学习

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

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