MudBlazor对话框关闭时，如何在父组件中监听事件并刷新数据？

问题场景 #

你在Blazor应用中使用MudBlazor实现了添加应用的对话框，父组件打开对话框的代码如下：

private async Task OpenDialog()
{
    var options = new DialogOptions { CloseOnEscapeKey = true };
    var dialog = DialogService.Show<AddNewAppDialog>("Adding new application", options);
    
    // TODO refresh data on dialog close
}

子对话框组件AddNewAppDialog的代码如下：

<MudDialog>
<DialogContent>
    <MudTextField @bind-Value="ApplicationName" Variant="Variant.Outlined" Label="Application Name" />
</DialogContent>
<DialogActions>
    <MudButton OnClick="Cancel">Cancel</MudButton>
    <MudButton Color="Color.Primary" OnClick="Submit">Ok</MudButton>
</DialogActions>
</MudDialog>

@code {
    public string ApplicationName { get; set; }

    [CascadingParameter] 
    MudDialogInstance MudDialog { get; set; }

    async Task Submit()
    {
        await CreateApplication();
        MudDialog.Close(DialogResult.Ok(true));
    }

    void Cancel() => MudDialog.Cancel();
}

需要实现父组件在对话框关闭时捕获该事件，执行刷新数据等操作。

解决方案 #

1. 监听对话框关闭事件并执行基础操作 #

父组件中，DialogService.Show方法返回的DialogReference对象包含一个Result属性，这是一个Task<DialogResult>，等待该Task即可监听对话框关闭事件。修改父组件的OpenDialog方法：

private async Task OpenDialog()
{
    var options = new DialogOptions { CloseOnEscapeKey = true };
    var dialog = DialogService.Show<AddNewAppDialog>("Adding new application", options);
    
    // 等待对话框关闭，获取结果
    var dialogResult = await dialog.Result;
    
    // 如果不是取消操作，则执行刷新逻辑
    if (!dialogResult.Cancelled)
    {
        // 调用你的数据刷新方法
        await RefreshData();
    }
}

2. 接收对话框返回的数据（可选） #

如果需要从对话框获取输入的内容（比如ApplicationName），可以修改子组件的关闭逻辑，将数据传入DialogResult.Ok：

async Task Submit()
{
    await CreateApplication();
    // 将输入的应用名称作为结果返回
    MudDialog.Close(DialogResult.Ok(ApplicationName));
}

然后在父组件中接收并使用该数据：

private async Task OpenDialog()
{
    var options = new DialogOptions { CloseOnEscapeKey = true };
    var dialog = DialogService.Show<AddNewAppDialog>("Adding new application", options);
    
    var dialogResult = await dialog.Result;
    
    if (!dialogResult.Cancelled)
    {
        // 获取对话框返回的应用名称
        var newApplicationName = dialogResult.Data as string;
        // 可根据返回数据做针对性处理
        await RefreshData();
    }
}

原理说明 #

• DialogReference.Result会在对话框关闭时完成，通过await即可在父组件中同步捕获关闭事件。
• DialogResult.Cancelled用于区分用户是点击了取消按钮，还是通过ESC键关闭对话框（此时Cancelled为true）。
• DialogResult.Data可以传递任意类型的数据，实现父子组件间的简单数据交互。

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