Blazor 怎么实现一个确认对话框

来源:这里教程网 时间:2026-02-21 17:34:47 作者:

Blazor 中没有内置的确认对话框(如 JavaScript 的

confirm()
),但可以通过组件化方式轻松实现一个可复用、支持异步等待的确认对话框。核心思路是:用一个状态管理弹窗显示/隐藏,配合回调或
TaskCompletionSource
实现“等待用户点击确定/取消”的同步语义。

TaskCompletionSource
实现真异步确认

这是最推荐的方式,让调用方像写

await ShowConfirm("删除?")
一样自然。

新建一个
ConfirmService.razor
(作为服务组件,通常放在
Shared/
下)
内部维护一个
TaskCompletionSource<bool></bool>
,暴露
Show(string title, string message)
方法
点击“确定”时
.SetResult(true)
,点击“取消”时
.SetResult(false)
在父组件中注入该服务,调用
await confirmService.Show(...)
即可阻塞后续逻辑直到用户选择

在页面中使用示例

比如在某个按钮点击事件里:

@inject ConfirmService ConfirmService
<p>@code {
private async Task HandleDelete()
{
bool confirmed = await ConfirmService.Show("确认删除", "此操作不可撤销,确定要删除吗?");
if (confirmed)
{
// 执行删除逻辑
}
}
}

UI 层:用
Dialog
或简单
div
实现弹窗

确认对话框 UI 可以用 Blazor Server / WebAssembly 原生 DOM 操作,更推荐用 CSS + 条件渲染(

@if (isVisible)
):

加半透明遮罩层(
position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); z-index: 1000;
居中卡片:用 Flex 或绝对定位,包含标题、消息、两个按钮(确定/取消) 点击遮罩层不关闭(可选),按
Esc
键关闭需监听
@onkeydown

进阶:支持自定义按钮文字、图标、主题

可以扩展

Show
方法参数,例如:

string okText = "确定"
string cancelText = "取消"
IconType icon = IconType.Warning
(配合 MudBlazor 或自己定义图标类)
返回
Task<confirmresult></confirmresult>
,其中
ConfirmResult
包含
bool Confirmed
object? Data
(用于传递额外上下文)

基本上就这些。不需要 JS 互操作,纯 C# + Razor 就能搞定,且天然支持服务端渲染和 WASM。

相关推荐