Blazor Toast 通知组件的实现方法-C#.Net教程-PHP中文网

Blazor Toast 通知组件的实现方法

幻夢星雲

发布： 2025-12-13 07:21:24

原创

150人浏览过

Blazor中实现Toast通知需创建状态模型、ToastService和Toast组件。1. 状态模型含Id、Message、Type等字段；2. ToastService注册为Scoped服务，管理增删通知及定时关闭；3. Toast组件用@foreach渲染并绑定CSS动画；4. 在Program.cs注册服务，MainLayout中引入组件，任意组件注入调用Show方法。

blazor toast 通知组件的实现方法

Blazor 中实现 Toast 通知，核心是用一个可复用的组件管理状态、动画和生命周期，配合服务注入实现跨组件调用。不依赖 JS Interop 也能做，但加一点 CSS 动画会让体验更自然。

1. 创建 Toast 状态模型

定义通知的基本结构，包括内容、类型（success/warning/error）、持续时间、是否自动关闭等：

Id：唯一标识，用于单个关闭或清理
Message：显示文本（支持 MarkupString 可选）
Type：枚举（Info / Success / Warning / Error）控制样式
AutoDismiss：true 表示定时自动消失
DurationMs：默认 3000ms，可覆盖

2. 实现 ToastService（状态管理服务）

注册为 Scoped 服务，负责添加、移除、批量清除通知：

内部用 List 存储当前所有 Toast
提供 Show() 方法，生成 Id、设置超时 Timer 并触发 StateHasChanged
Dismiss(id) 和 ClearAll() 方法用于手动控制
注意：Timer 回调中要检查组件是否已销毁，避免内存泄漏

3. 编写 Toast 组件（Toast.razor）

这是一个无逻辑的 UI 层，只负责渲染列表并绑定动画类：

用 @foreach 遍历 ToastService.Items，按顺序从上到下排列
每个 toast 添加 CSS 类如 toast toast--success fade-in，配合 opacity + transform 实现淡入滑入
用 @key="item.Id" 确保 Blazor 正确复用 DOM 元素
右上角 × 按钮调用 service.Dismiss(item.Id)

4. 注册与使用

在 Program.cs 中注册服务：builder.Services.AddScoped();

行业贸易网站管理系统 2007 Beta 1

1.修正BUG站用资源问题,优化程序2.增加关键词搜索3.修改报价4.修正BUG 水印问题5.修改上传方式6.彻底整合论坛,实现一站通7.彻底解决群发垃圾信息问题。注册会员等发垃圾邮件7.彻底解决数据库安全9.修改交易方式.增加网站担保,和直接交易两中10.全站可选生成html.和单独新闻生成html(需要装组建)11. 网站有10中颜色选择适合不同的行业不同的颜色12.修改竞价格排名方式13.修

查看详情

在 MainLayout.razor 或 App.razor 底部引入组件：

<Toast />

登录后复制

任意组件中注入并调用：

@inject ToastService Toast<br>@code {<br>    private void OnSave() {<br>        Toast.Show("保存成功！", ToastType.Success);<br>    }<br>}

登录后复制

基本上就这些。不需要第三方库，轻量可控，样式和行为都容易按项目需求调整。

以上就是Blazor Toast 通知组件的实现方法的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

Blazor JS Interop 调用 Geolocation API 教程 Blazor HTML5 Drag and Drop API 使用方法 .NET MAUI Blazor是什么？用Web技术构建原生.NET桌面和移动应用 .NET中如何将JSON字符串反序列化为对象_JSON反序列化实现方式 C# 如何在 Blazor WebAssembly 中调用 JavaScript 函数_C# Blazor WebAssembly JS 互操作指南