Blazor中编辑FilteredEventsGrid事件后，如何通知另一个网格重读数据？

我在Dashboard.razor中有以下代码：

<FilteredEventsGrid Start="0"
    ShowEndDate="true"
    Filter="SmartQueries.Filter.Owner | SmartQueries.Filter.IncludeDisabled"
    CanEditOwner="false"/>

<FilteredEventsGrid Start="0"
    ShowEndDate="true"
    Filter="SmartQueries.Filter.Pending | SmartQueries.Filter.Private"
    CanEditOwner="false"/>

部分事件同时存在于两个网格中，且两个网格均支持事件编辑。需要实现：当其中一个网格内的事件被编辑后，另一个网格重新读取内部数据（每个组件自行读取数据，无Data参数）。

实现方案（基于你提出的思路细化） #

1. 改造FilteredEventsGrid组件

给组件添加数据更新回调事件和公开的刷新方法：

// FilteredEventsGrid.razor.cs
public partial class FilteredEventsGrid
{
    // 用于通知父组件数据已变更的回调
    [Parameter]
    public EventCallback OnDataUpdated { get; set; }

    // 组件内部原有的数据加载方法
    private async Task LoadDataAsync()
    {
        // 此处为原本的读取数据逻辑，比如调用API查询最新事件
        // ...
    }

    // 公开给父组件调用的刷新方法
    public async Task Refresh()
    {
        await LoadDataAsync();
        StateHasChanged(); // 强制组件更新UI
    }

    // 事件编辑完成后的处理方法（组件内部原有逻辑）
    private async Task OnEventEdited()
    {
        // 原有的编辑完成逻辑
        // ...

        // 通知父组件数据已更新
        await OnDataUpdated.InvokeAsync();
    }
}

2. 父组件Dashboard.razor中处理同步逻辑

通过@ref获取两个组件实例，监听各自的更新回调，触发另一个组件的刷新：

@* Dashboard.razor *@
<FilteredEventsGrid @ref="_firstGrid"
    Start="0"
    ShowEndDate="true"
    Filter="SmartQueries.Filter.Owner | SmartQueries.Filter.IncludeDisabled"
    CanEditOwner="false"
    OnDataUpdated="@RefreshSecondGrid"/>

<FilteredEventsGrid @ref="_secondGrid"
    Start="0"
    ShowEndDate="true"
    Filter="SmartQueries.Filter.Pending | SmartQueries.Filter.Private"
    CanEditOwner="false"
    OnDataUpdated="@RefreshFirstGrid"/>

@code {
    private FilteredEventsGrid? _firstGrid;
    private FilteredEventsGrid? _secondGrid;

    private async Task RefreshSecondGrid()
    {
        if (_secondGrid != null)
        {
            await _secondGrid.Refresh();
        }
    }

    private async Task RefreshFirstGrid()
    {
        if (_firstGrid != null)
        {
            await _firstGrid.Refresh();
        }
    }
}

额外提示 #

• 如果后续需要增加更多同类型网格，可以封装通用的刷新逻辑，避免重复代码
• 确保LoadDataAsync每次调用都会重新拉取最新数据，不要使用缓存的旧数据
• StateHasChanged()在多数异步场景下可省略，但显式调用能确保UI及时响应数据变更

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