Blazor 按钮点击后禁用的实现方法

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

Blazor 中按钮点击后禁用，核心是通过绑定

disabled

属性并控制其布尔值状态，避免重复提交或误操作。关键在于及时更新状态、合理处理异步逻辑，并注意组件生命周期影响。

使用 @bind-disabled 绑定禁用状态

最直接的方式是将按钮的

disabled

属性绑定到一个布尔字段，点击时设为

true

，操作完成后恢复为

false

。

在
@code
块中定义字段，如
private bool isSubmitting = false;
按钮写法：
<button disabled>提交</button>
点击方法中先设
isSubmitting = true;
，再执行业务逻辑（尤其是 await 后需手动重置）

异步操作后自动恢复启用

若点击触发异步任务（如 HTTP 调用），必须在

await

完成后重置状态，否则按钮会一直禁用。

推荐用
try-finally
确保无论成功失败都恢复：

private async Task HandleClick()
{
isSubmitting = true;
try
{
await HttpClient.PostAsJsonAsync("/api/submit", model);
// 成功提示等逻辑
}
finally
{
isSubmitting = false;
}
} 不建议只在
await
后写
isSubmitting = false;
，异常时会被跳过

结合 Loading 状态提升体验

禁用按钮的同时，可配合文字或图标变化，让用户感知正在处理。

例如：
<button disabled>@((isSubmitting) ? "提交中..." : "提交")</button>
也可嵌入
<span></span>
或
<spinner></spinner>
组件（需自行实现或引用 UI 库）注意：修改文本或 DOM 内容本身不会触发重新渲染，必须靠
StateHasChanged()
—— 但 Blazor 会在事件处理结束后自动刷新，通常无需手动调用