Enterprise-level component library based on Bootstrap and Blazor

star nuget license download repo commit master coverage

Dispatch 消息分发

通过注入服务调用实例方法全站弹出窗口进行消息通知

通过注入服务 IDispatchService<TEntry> 实例进行弹窗

Demo

本站通过此组件功能实现了代码仓库有提交时全站提示功能

1. 获得 注入服务 指定消息实体类

[Inject]
[NotNull]
private IDispatchService<GiteePostBody>? DispatchService { get; set; }

2. 订阅 消息通知

protected override void OnInitialized()
{
    // ...
    DispatchService.Subscribe(Notify);
}

3. 页面或者组件销毁时 取消订阅

private void Dispose(bool disposing)
{
    if (disposing)
    {
        DispatchService.UnSubscribe(Notify);
    }
}

4. 通知实现方法 Notify

private async Task Notify(DispatchEntry<GiteePostBody> payload)
{
    if (payload.Entry != null)
    {
        var option = new ToastOption()
        {
            Category = ToastCategory.Information,
            Title = "通知标题",
            Content = "通知内容"
        };
        await Toast.Show(option);
    }
}
本例中使用 Toast 组件进行通知,实战中可以使用其他任意内置消息组件或者自定义组件进行通知提示操作

点击按钮进行消息分发,所有打开此页面的人均能收到此按钮分发的消息

Demo

由于本功能为全站推送通知,为防止恶意使用,下例中按钮通知后禁用 30 秒;消息注入代码在 MainLayout 模板中

@page "/dispatchs"

<h3>Dispatch 消息分发</h3>

<h4>通过注入服务调用实例方法全站弹出窗口进行消息通知</h4>

<Tips class="mt-3">
    <p>
        本组件使用注入服务的形式提供功能,通常用于全站消息推送等功能;使用本服务使需要在代码中进行 <b>订阅</b> 与 <b>取消订阅</b> 操作
    </p>
</Tips>

<DemoBlock Title="基本用法" Introduction="通过注入服务 <code>IDispatchService<TEntry></code> 实例进行弹窗" Name="Normal" ShowCode="false">
    <p>本站通过此组件功能实现了代码仓库有提交时全站提示功能</p>
    <p>1. 获得 <b>注入服务</b> 指定消息实体类</p>
    <Pre>[Inject]
[NotNull]
private IDispatchService<GiteePostBody>? DispatchService { get; set; }</Pre>
    <p>2. <b>订阅</b> 消息通知</p>
    <Pre>protected override void OnInitialized()
{
    // ...
    DispatchService.Subscribe(Notify);
}</Pre>
    <p>3. 页面或者组件销毁时 <b>取消订阅</b></p>
    <Pre>private void Dispose(bool disposing)
{
    if (disposing)
    {
        DispatchService.UnSubscribe(Notify);
    }
}</Pre>
    <p>4. 通知实现方法 <code>Notify</code></p>
    <Pre>private async Task Notify(DispatchEntry<GiteePostBody> payload)
{
    if (payload.Entry != null)
    {
        var option = new ToastOption()
        {
            Category = ToastCategory.Information,
            Title = "通知标题",
            Content = "通知内容"
        };
        await Toast.Show(option);
    }
}</Pre>
    <div>本例中使用 <code>Toast</code> 组件进行通知,实战中可以使用其他任意内置消息组件或者自定义组件进行通知提示操作</div>
</DemoBlock>

<DemoBlock Title="实战应用" Introduction="点击按钮进行消息分发,所有打开此页面的人均能收到此按钮分发的消息" Name="Dispatch">
    <p>由于本功能为全站推送通知,为防止恶意使用,下例中按钮通知后禁用 <b>30</b> 秒;消息注入代码在 <code>MainLayout</code> 模板中</p>
    <Button IsAsync="true" Icon="fa fa-paper-plane-o" Text="通知" OnClickWithoutRender="OnDispatch" />
</DemoBlock>
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Components;
using Microsoft.AspNetCore.Components;
using System;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 消息分发示例
/// </summary>
public partial class Dispatchs
{
    [Inject]
    [NotNull]
    private IDispatchService<MessageItem>? DispatchService { get; set; }

    private async Task OnDispatch()
    {
        DispatchService.Dispatch(new DispatchEntry<MessageItem>()
        {
            Name = nameof(MessageItem),
            Entry = new MessageItem()
            {
                Message = $"{DateTime.Now:HH:mm:ss} 测试通知消息"
            }
        });
        await Task.Delay(30 * 1000);
    }
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
Themes
Bootstrap
Motronic
Ant Design (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload