MudBlazor：点击对话框背景时执行Task的实现方法

方法一：使用DialogOptions的OnBackdropClick回调（推荐，适用于MudBlazor 6.0+） #

MudBlazor 6.0及以上版本在DialogOptions中新增了OnBackdropClick回调属性，可直接利用该属性实现需求：

1. 打开Dialog时配置DialogOptions：
   • 设置CloseOnBackdropClick = false，避免点击背景默认关闭对话框
   • 给OnBackdropClick赋值你需要执行的异步任务

示例代码：

// 注入DialogService
[Inject] private IDialogService DialogService { get; set; }

// 打开Dialog的方法
private async Task OpenCustomDialog()
{
    var options = new DialogOptions
    {
        CloseOnBackdropClick = false, // 禁用默认背景点击关闭行为
        OnBackdropClick = async () => 
        {
            // 执行你的指定异步任务
            await YourCustomTask();
            // 可选：任务执行完成后关闭对话框
            // DialogService.CloseAll();
        }
    };

    var dialog = DialogService.Show<YourDialogComponent>("对话框标题", options);
    var result = await dialog.Result;
}

// 自定义业务Task
private async Task YourCustomTask()
{
    // 这里编写你的业务逻辑，比如接口请求、状态更新等
    await Task.Delay(1000); // 示例：模拟异步操作
    Console.WriteLine("背景点击触发的任务已执行");
}

方法二：自定义Dialog组件监听背景点击（兼容旧版本） #

如果你的MudBlazor版本低于6.0，没有OnBackdropClick属性，可通过自定义组件结合JS监听实现：

1. 创建自定义Dialog组件（CustomDialog.razor）：

<MudDialog>
    <DialogContent>
        <!-- 对话框内容区域 -->
        <MudText>自定义对话框内容</MudText>
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="Dialog.Close">关闭</MudButton>
    </DialogActions>
</MudDialog>

@code {
    [CascadingParameter] private MudDialogInstance Dialog { get; set; }
    [Inject] private IJSRuntime JSRuntime { get; set; }
    private IJSObjectReference _jsModule;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./customDialog.js");
            // 注册背景点击监听
            await _jsModule.InvokeVoidAsync("listenBackdropClick", DotNetObjectReference.Create(this));
        }
    }

    [JSInvokable]
    public async Task OnBackdropClicked()
    {
        // 执行指定Task
        await YourCustomTask();
        // 可选：执行完成后关闭对话框
        // Dialog.Close();
    }

    private async Task YourCustomTask()
    {
        // 自定义业务逻辑
        await Task.Delay(1000);
        Console.WriteLine("背景点击触发的任务已执行");
    }

    public void Dispose()
    {
        _jsModule?.DisposeAsync();
    }
}

2. 创建对应的JS文件（customDialog.js）：

export function listenBackdropClick(dotNetRef) {
    const backdrop = document.querySelector('.mud-dialog-backdrop');
    if (backdrop) {
        backdrop.addEventListener('click', async () => {
            // 调用Blazor组件中的方法
            await dotNetRef.invokeMethodAsync('OnBackdropClicked');
        });
    }
}

3. 打开自定义Dialog时禁用默认背景关闭：

private async Task OpenCustomDialog()
{
    var options = new DialogOptions
    {
        CloseOnBackdropClick = false
    };

    var dialog = DialogService.Show<CustomDialog>("自定义对话框", options);
    var result = await dialog.Result;
}

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