ABP.io Blazor Server项目DataGrid无UI刷新自动更新方案咨询

核心思路 #

借助Blazor Server原生的SignalR通信能力，结合ABP框架的事件机制，在数据发生变更（比如新增作者）时，后端主动向所有在线客户端推送更新通知，客户端收到通知后自动触发DataGrid数据重载，无需手动刷新页面。

具体实现步骤 #

1. 确认ABP SignalR集成 #

ABP框架已默认集成SignalR，先确保项目引用了Volo.Abp.AspNetCore.SignalR包，并在模块类中添加依赖：

[DependsOn(typeof(AbpAspNetCoreSignalRModule))]
public class YourProjectModule : AbpModule
{
    // 模块配置逻辑
}

2. 创建自定义SignalR Hub #

定义一个继承自AbpHub的Hub类，作为客户端与服务器的通信端点：

public class AuthorNotificationHub : AbpHub
{
    public const string HubUrl = "/author-notification-hub";
}

然后在Program.cs中注册Hub路由：

app.MapHub<AuthorNotificationHub>(AuthorNotificationHub.HubUrl);

3. 数据变更时推送通知 #

在作者创建的应用服务中，完成数据持久化后，通过IHubContext向所有客户端推送更新事件：

public class AuthorAppService : ApplicationService, IAuthorAppService
{
    private readonly IHubContext<AuthorNotificationHub> _hubContext;
    private readonly IAuthorRepository _authorRepository;

    public AuthorAppService(IHubContext<AuthorNotificationHub> hubContext, IAuthorRepository authorRepository)
    {
        _hubContext = hubContext;
        _authorRepository = authorRepository;
    }

    public async Task CreateAsync(CreateAuthorDto input)
    {
        // 执行作者创建逻辑
        var author = ObjectMapper.Map<CreateAuthorDto, Author>(input);
        await _authorRepository.InsertAsync(author);
        
        // 向所有在线客户端推送更新通知
        await _hubContext.Clients.All.SendAsync("AuthorUpdated");
    }
}

4. Blazor客户端监听事件并刷新DataGrid #

在作者列表页面的组件中，建立SignalR连接，监听后端推送的事件，触发DataGrid重载：

@inject NavigationManager NavigationManager
@implements IAsyncDisposable

<DataGrid TItem="AuthorDto" @ref="_grid" Data="@Authors" ...>
    <!-- DataGrid列配置 -->
</DataGrid>

@code {
    private IGrid<AuthorDto> _grid;
    private List<AuthorDto> Authors { get; set; } = new();
    private HubConnection _hubConnection;

    protected override async Task OnInitializedAsync()
    {
        await LoadAuthorsAsync();
        
        // 初始化SignalR连接
        _hubConnection = new HubConnectionBuilder()
            .WithUrl(NavigationManager.ToAbsoluteUri(AuthorNotificationHub.HubUrl))
            .WithAutomaticReconnect() // 配置自动重连
            .Build();

        // 监听作者更新事件
        _hubConnection.On("AuthorUpdated", async () =>
        {
            await LoadAuthorsAsync();
            await _grid.ReloadAsync();
        });

        await _hubConnection.StartAsync();
    }

    private async Task LoadAuthorsAsync()
    {
        Authors = await AuthorAppService.GetListAsync();
        StateHasChanged();
    }

    public async ValueTask DisposeAsync()
    {
        if (_hubConnection is not null)
        {
            await _hubConnection.DisposeAsync();
        }
    }
}

注意：需给DataGrid组件添加@ref="_grid"，才能调用ReloadAsync()刷新数据。

5. 分布式场景优化（可选） #

如果系统是多实例分布式部署，建议使用ABP分布式事件总线替代直接SignalR推送：

• 定义AuthorCreatedEto事件传输对象
• 在创建服务中发布事件：await PublishAsync(new AuthorCreatedEto { AuthorId = author.Id });
• 编写事件处理类，在处理逻辑中通过SignalR向客户端推送通知

关键注意事项 #

• 给SignalR连接配置自动重连，避免因网络波动导致通信中断
• 可通过AbpHub的GetCurrentUserAsync()获取用户信息，实现权限过滤，只向授权用户推送更新
• 高频更新场景可添加防抖逻辑，避免DataGrid频繁刷新影响性能

内容的提问来源于stack exchange，提问作者weeraa