Blazor中模态表单更新数据库后如何重新渲染MudDataGrid

问题根源与修复步骤 #

1. 避免使用async void处理表单提交
   Blazor组件中async void会绕过框架的异步上下文管理，导致后续UI更新逻辑失效。需将OnValidSubmit的返回类型改为async Task。

2. 主动触发MudDataGrid的刷新操作
   在ServerData模式下，仅重新获取数据或调用StateHasChanged不足以触发网格渲染，必须调用MudDataGrid实例的Refresh()方法，强制网格重新加载数据源。

3. 移除可能导致上下文丢失的ConfigureAwait(false)
   Blazor组件的异步操作依赖同步上下文更新UI，使用ConfigureAwait(false)会脱离该上下文，导致UI更新失效，建议改为ConfigureAwait(true)或直接省略。

修改后的核心代码 #

表单提交方法

private async Task OnValidSubmit(EditContext context)
{
    if (context.Validate())
    {
        var agencyDTO = Mapper.Map<AgencyViewModel, AgencyDto>(Agency);
        var request = new UpdateAgencyRequest(agencyDTO);
        await AgencyService.SaveAsync(request, this.CancelToken).ConfigureAwait(true);
        await modalRef.Hide();
        
        // 触发网格主动刷新
        if (_dataGrid != null)
        {
            await _dataGrid.Refresh();
        }
        
        // 兜底确保组件渲染更新
        await InvokeAsync(StateHasChanged);
    }
}

确保网格引用正确初始化

在组件类中确认_dataGrid的定义：

private MudDataGrid<AgencyGridViewModel>? _dataGrid;

额外注意事项 #

• 检查LoadGridData方法中，每次获取数据后都要生成新的AgencyGridViewModel集合实例，避免因集合引用未变导致UI无感知。
• 确保lastGridState在LoadGridData中正确保存，保证刷新时使用当前的分页、排序状态。

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