Blazor 怎么实现一个全局通知服务

Blazor全局通知服务通过创建NotificationService管理通知队列并触发UI更新，配合NotificationItem组件渲染，注册为scoped服务后在任意组件中注入调用Show()方法即可显示通知。

Blazor 实现全局通知服务，核心是创建一个可被任意组件注入、跨页面共享状态的 Service，并配合一个统一的 UI 组件（如 Toast 或 Banner）来渲染通知。关键在于状态管理 + 组件通信 + 生命周期控制。

1. 定义通知数据模型和通知服务

先定义一个轻量通知类，包含类型（Success/Info/Error/Warning）、内容、持续时间、是否自动关闭等字段：

public class Notification
{
    public string Id { get; } = Guid.NewGuid().ToString();
    public string Message { get; set; } = string.Empty;
    public NotificationType Type { get; set; } = NotificationType.Info;
    public int DurationMs { get; set; } = 5000;
    public bool AutoDismiss { get; set; } = true;
}

public enum NotificationType
{
    Info, Success, Warning, Error
}

然后创建 NotificationService，用 List 管理队列，提供添加、移除、清空方法。注意用 INotifyPropertyChanged 或 Blazor 的 StateHasChanged() 机制触发 UI 更新——推荐用 EventCallback 或 Subject（配合 Rx.NET）或更简单的方式：直接暴露一个 EventCallback 委托供 UI 订阅：

public class NotificationService
{
    private readonly List _notifications = new();
    public event Action? OnNotificationsChanged;

    public IReadOnlyList Notifications => _notifications.AsReadOnly();

    public void Show(string message, NotificationType type = NotificationType.Info, int durationMs = 5000)
    {
        var notification = new Notification
        {
            Message = message,
            Type = type,
            DurationMs = durationMs
        };
        _notifications.Add(notification);
        OnNotificationsChanged?.Invoke();
        
        if (notification.AutoDismiss)
        {
            _ = Task.Delay(durationMs).ContinueWith(_ =>
            {
                Dismiss(notification.Id);
            });
        }
    }

    public void Dismiss(string id)
    {
        _notifications.RemoveAll(n => n.Id == id);
        OnNotificationsChanged?.Invoke();
    }

    public void Clear() 
    {
        _notifications.Clear();
        OnNotificationsChanged?.Invoke();
    }
}

2. 注册服务并注入到根组件

在 Program.cs（.NET 6+）中注册为 scoped 服务：

builder.Services.AddScoped();

在 App.razor 或 MainLayout.razor 顶部注入服务，并订阅变化：

@inject NotificationService NotificationService

@if (NotificationService.Notifications.Any())
{
    
        @foreach (var notification in NotificationService.Notifications)
        {
            
        }
    
}

@code {
    private void HandleNotificationsChanged() => StateHasChanged();

    protected override void OnInitialized()
    {
        NotificationService.OnNotificationsChanged += HandleNotificationsChanged;
    }

    public void Dispose()
    {
        NotificationService.OnNotificationsChanged -= HandleNotificationsChanged;
    }
}

3. 创建可复用的通知 UI 组件（NotificationItem.razor）

封装单条通知的样式与交互，支持手动关闭、动画入场/离场（可用 CSS transition 或第三方库如 blazored-toast）：

@using System.Text.RegularExpressions


    @GetIcon()
    @Notification.Message
    


@code {
    [Parameter] public Notification Notification { get; set; } = default!;
    [Parameter] public EventCallback OnDismiss { get; set; }

    private string GetCssClass() => $"notification-{Notification.Type.ToString().ToLower()}";

    private string GetIcon()
    {
        return Notification.Type switch
        {
            NotificationType.Success => "✓",
            NotificationType.Error => "✗",
            NotificationType.Warning => "⚠",
            _ => "ℹ"
        };
    }
}

CSS 示例（加到 wwwroot/css/app.css 或组件内）：

.notification-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 350px;
}

.notification {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: slideInRight 0.3s ease-out;
    transition: opacity 0.3s, transform 0.3s;
}

.notification:not(:first-child) { margin-top: 0.25rem; }

.notification-info { background: #e3f2fd; color: #1565c0; }
.notification-success { background: #e8f5e9; color: #2e7d32; }
.notification-warning { background: #fff8e1; color: #f57c00; }
.notification-error { background: #ffebee; color: #c62828; }

.notification-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    margin-left: auto;
    color: inherit;
    opacity: 0.7;
}

.notification-close:hover { opacity: 1; }

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

4. 在任意组件中使用通知

哪里需要就在哪里 @inject NotificationService，调用 Show() 即可：

@inject NotificationService NotificationService



@code {
    private void ShowSuccess() =>
        NotificationService.Show("操作已成功！", NotificationType.Success);
}

支持异步操作后通知：

private async Task SubmitForm()
{
    try
    {
        await httpClient.PostAsJsonAsync("/api/save", model);
        NotificationService.Show("保存成功", NotificationType.Success);
    }
    catch
    {
        NotificationService.Show("保存失败，请重试", NotificationType.Error);
    }
}

基本上就这些。不复杂但容易忽略的是：服务生命周期要匹配（scoped 最常用）、UI 订阅/取消订阅要配对、避免内存泄漏（尤其用委托事件时），以及通知叠加时的 z-index 和定位控制。进阶可加队列限流、点击跳转、自定义模板、声音提示等。

# css # js # json # app # ai # switch # nas # 组件渲染 # .net # red # 封装 # Error # 委托 # 事件 # 异步 # transition # ui # 的是 # 进阶 # 就在 # 自定义 # 跳转 # 第三方 # 创建一个 # 关键在于 # 最常用 # 移除

返回目录在线咨询

上一篇：JavaScript使用链式方法封装jQuery中CSS()方法示例
下一篇：广州建站哪家好：性价比最高的网站建设服务商是哪家？

您的项目需求