Blazor中实现Loading提示需用bool isLoading状态控制UI显隐,加载前设true并调用StateHasChanged(),异常或完成后设false;可封装为LoadingWrapper组件自动管理任务状态;首次加载应在OnInitializedAsync中手动控制开关时机,并结合CancellationToken防重复提交。

在 Blazor 中实现数据加载时显示 Loading 提示,核心是利用组件状态(bool isLoading)控制 UI 的显隐,并配合异步操作的生命周期合理设置开关时机。
使用布尔状态 + 条件渲染
最常用也最直接的方式:定义一个 isLoading 字段,在调用异步方法前后手动更新它,再用 @if (isLoading) { ... } 控制提示内容。
- 在
@code块中声明:private bool isLoading = false; - 在加载数据前设为
true,比如:isLoading = true; StateHasChanged();(确保 UI 立即响应) - 在
try块末尾或finally中设回false,避免异常导致 Loading 残留 - 模板中写:
@if (isLoading) {或套个骨架屏、Spinner 组件Loading...
}
封装成可复用的 Loading 包裹组件
把 Loading 逻辑抽离成独立组件(如 LoadingWrapper.razor),通过参数接收任务和子内容,自动管理状态。
- 接受一个
Task参数(如[Parameter] public Task? DataTask { get; set; }) - 内部用
@if (DataTask == null || DataTask.IsCompleted == false)判断是否正在加载 - 子内容用
[Parameter] public RenderFragment? ChildContent { get; set; }接收,只在加载完成时渲染 - 用法示例:
数据内容
SuperCms在线订餐系统下载模板采用响应式设计,自动适应手机,电脑及平板显示;满足单一店铺外卖需求。功能:1.菜单分类管理2.菜品管理:菜品增加,删除,修改3.订单管理4.友情链接管理5.数据库备份6.文章模块:如:促销活动,帮助中心7.单页模块:如:企业信息,关于我们更强大的功能在开发中……安装方法:上传到网站根目录,运行http://www.***.com/install 自动
结合 OnInitializedAsync 生命周期处理首次加载
页面首次加载数据通常放在 OnInitializedAsync,这里要特别注意:不能只靠 await LoadDataAsync(),否则 Loading 状态可能来不及刷新。
- 推荐写法:先设
isLoading = true,再await LoadDataAsync(),最后isLoading = false - 如果数据加载失败,建议同时设置错误信息并保持
isLoading = false,避免界面卡死 - 不建议在
OnParametersSetAsync里重复触发加载,除非明确需要响应参数变化
进阶:用 CancellationToken 支持取消与防重复提交
当用户快速多次点击加载按钮,或导航离开页面时,应避免无效请求和状态错乱。
- 在方法签名中加入
CancellationToken cancellationToken - 调用 HTTP 客户端时传入该 token,如
httpClient.GetAsync(url, cancellationToken) - 在
Dispose或OnAfterRender中检查是否已取消,必要时清理 pending 状态 - 按钮可绑定
disabled="@isLoading"防重复点击
基本上就这些。不需要第三方库也能做得清晰可靠,关键是状态更新时机要准、异常路径要覆盖、用户体验要连贯。








