Blazor中可通过TaskCompletionSource实现异步确认对话框,无需JS互操作;新建ConfirmService管理状态并暴露Show方法,调用方await即可等待用户选择,UI层用条件渲染和CSS实现弹窗。

Blazor 中没有内置的确认对话框(如 JavaScript 的 confirm()),但可以通过组件化方式轻松实现一个可复用、支持异步等待的确认对话框。核心思路是:用一个状态管理弹窗显示/隐藏,配合回调或 TaskCompletionSource 实现“等待用户点击确定/取消”的同步语义。
用 TaskCompletionSource 实现真异步确认
这是最推荐的方式,让调用方像写 await ShowConfirm("删除?") 一样自然。
- 新建一个
ConfirmService.razor(作为服务组件,通常放在Shared/下) - 内部维护一个
TaskCompletionSource,暴露Show(string title, string message)方法 - 点击“确定”时
.SetResult(true),点击“取消”时.SetResult(false) - 在父组件中注入该服务,调用
await confirmService.Show(...)即可阻塞后续逻辑直到用户选择
在页面中使用示例
比如在某个按钮点击事件里:
@inject ConfirmService ConfirmService@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包含bool Confirmed和object? Data(用于传递额外上下文)
基本上就这些。不需要 JS 互操作,纯 C# + Razor 就能搞定,且天然支持服务端渲染和 WASM。










