Blazor 怎么实现一个全局通知服务-C#.Net教程-PHP中文网

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

煙雲

发布： 2025-12-13 12:44:03

原创

605人浏览过

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

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

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<notification></notification> 管理队列，提供添加、移除、清空方法。注意用 INotifyPropertyChanged 或 Blazor 的 StateHasChanged() 机制触发 UI 更新——推荐用 EventCallback 或 Subject<notification></notification>（配合 Rx.NET）或更简单的方式：直接暴露一个 EventCallback 委托供 UI 订阅：

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

    public IReadOnlyList<Notification> 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<NotificationService>();

登录后复制

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

@inject NotificationService NotificationService

@if (NotificationService.Notifications.Any())
{
    <div class="notification-container">
        @foreach (var notification in NotificationService.Notifications)
        {
            <NotificationItem Notification="@notification" OnDismiss="() => NotificationService.Dismiss(notification.Id)" />
        }
    </div>
}

@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）：

Remover

几秒钟去除图中不需要的元素

304

查看详情

@using System.Text.RegularExpressions

<div class="notification @GetCssClass()" @key="Notification.Id">
    <span class="notification-icon">@GetIcon()</span>
    <span class="notification-message">@Notification.Message</span>
    <button class="notification-close" @onclick="() => OnDismiss.InvokeAsync()">✕</button>
</div>

@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

<button @onclick="ShowSuccess">显示成功通知</button>

@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 和定位控制。进阶可加队列限流、点击跳转、自定义模板、声音提示等。

以上就是Blazor 怎么实现一个全局通知服务的详细内容，更多请关注php中文网其它相关文章！