Blazor 数据加载时显示 Loading 提示的方法

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) { <p>Loading...</p> } 或套个骨架屏、Spinner 组件

封装成可复用的 Loading 包裹组件

把 Loading 逻辑抽离成独立组件（如 LoadingWrapper.razor），通过参数接收任务和子内容，自动管理状态。

• 接受一个 Task 参数（如 [Parameter] public Task? DataTask { get; set; }）
• 内部用 @if (DataTask == null || DataTask.IsCompleted == false) 判断是否正在加载
• 子内容用 [Parameter] public RenderFragment? ChildContent { get; set; } 接收，只在加载完成时渲染
• 用法示例：<loadingwrapper datatask="LoadDataAsync()"><p>数据内容</p> <div class="aritcle_card"> <a class="aritcle_card_img" href="/xiazai/js/3480"> <img src="https://img.php.cn/upload/jscode/000/120/096/5d7f19717055b776.jpg" alt="基于bootstrap和animate.css的模态框效果"> </a> <div class="aritcle_card_info"> <a href="/xiazai/js/3480">基于bootstrap和animate.css的模态框效果</a> <p>基于bootstrap和animate.css的模态框效果，可以自定义显示隐藏的动态效果，可添加显示和隐藏时的回调方法，填充数据</p> <div class=""> <img src="/static/images/card_xiazai.png" alt="基于bootstrap和animate.css的模态框效果"> <span>23</span> </div> </div> <a href="/xiazai/js/3480" class="aritcle_card_btn"> <span>查看详情</span> <img src="/static/images/cardxiayige-3.png" alt="基于bootstrap和animate.css的模态框效果"> </a> </div> </loadingwrapper>

结合 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" 防重复点击

基本上就这些。不需要第三方库也能做得清晰可靠，关键是状态更新时机要准、异常路径要覆盖、用户体验要连贯。

以上就是Blazor 数据加载时显示 Loading 提示的方法的详细内容，更多请关注php中文网其它相关文章！