如何在MudBlazor父组件中控制对话框延迟关闭？

核心思路 #

把子组件的表单提交事件传递给父组件，由父组件完成API调用、错误处理后，再根据结果决定是否关闭对话框。具体分三步修改：

1. 子组件（CountriesFormDialog.razor）修改 #

移除自身关闭对话框的逻辑，新增表单提交回调事件，将表单数据传递给父组件：

@inject ISnackbar Snackbar
@using YourProject.Models

<MudDialog>
    <DialogContent>
        <MudForm @ref="_form">
            <!-- 你的表单控件示例 -->
            <MudTextField @bind-Value="Country.Name" Label="国家名称" Required />
            <!-- 其他表单字段 -->
        </MudForm>
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="Cancel">取消</MudButton>
        <MudButton Color="Color.Primary" OnClick="SubmitForm" Disabled="@_form.IsInvalid">提交</MudButton>
    </DialogActions>
</MudDialog>

@code {
    [CascadingParameter] MudDialogInstance MudDialog { get; set; }
    [Parameter] public EventCallback<CountryModel> OnFormSubmit { get; set; } // 新增回调参数

    private MudForm _form;
    private CountryModel Country { get; set; } = new();

    private void Cancel()
    {
        MudDialog.Cancel(); // 取消逻辑可保留在子组件，也可通过回调交给父组件
    }

    private async Task SubmitForm()
    {
        await _form.Validate();
        if (_form.IsValid)
        {
            // 不再自行关闭对话框，触发回调让父组件处理提交逻辑
            await OnFormSubmit.InvokeAsync(Country);
        }
        else
        {
            Snackbar.Add("表单验证失败", Severity.Error);
        }
    }
}

2. 父组件（Countries.razor）修改 #

管理对话框引用，打开对话框时订阅子组件的提交回调，完成API调用后控制对话框关闭：

@inject IDialogService DialogService
@inject ICountryService CountryService
@inject ISnackbar Snackbar

<MudButton OnClick="OpenCreateDialog">新增国家</MudButton>

@code {
    private DialogReference _dialogRef;

    private async Task OpenCreateDialog()
    {
        // 传递回调参数给子组件
        var parameters = new DialogParameters
        {
            { nameof(CountriesFormDialog.OnFormSubmit), EventCallback.Factory.Create<CountryModel>(this, HandleFormSubmit) }
        };

        _dialogRef = await DialogService.OpenAsync<CountriesFormDialog>("新增国家", parameters);
    }

    private async Task HandleFormSubmit(CountryModel country)
    {
        try
        {
            // 调用服务器接口提交数据
            await CountryService.CreateAsync(country);
            Snackbar.Add("国家创建成功", Severity.Success);
            // 接口调用成功，关闭对话框
            await _dialogRef.CloseAsync();
            // 刷新父组件的国家列表
            await LoadCountries();
        }
        catch (Exception ex)
        {
            // 接口调用失败，显示错误信息，不关闭对话框
            Snackbar.Add($"创建失败：{ex.Message}", Severity.Error);
        }
    }

    private async Task LoadCountries()
    {
        // 你的列表加载逻辑
    }
}

补充说明 #

• 若想把取消逻辑也交给父组件，可给子组件新增OnCancel的EventCallback，父组件调用_dialogRef.CancelAsync()即可。
• API调用过程中如需显示加载状态，可在子组件的提交按钮上绑定Disabled状态，或直接使用MudBlazor的MudProgressButton组件。

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