Blazor 列表无数据时显示提示信息的方法

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

Blazor 列表无数据时显示提示信息,核心是判断数据源是否为空,并在 UI 中条件渲染对应提示内容。不需要额外组件,用内置的

@if
@switch
就能干净实现。

用 @if 判断集合是否为空

最常用也最直观的方式:检查绑定的列表(如

List<t></t>
IEnumerable<t></t>
)是否为
null
Count == 0

List<t></t>
或实现了
ICollection
的集合,优先用
list?.Count == 0
,避免空引用且性能好
对纯
IEnumerable<t></t>
(比如 LINQ 查询结果),用
!list?.Any()
更安全,但注意会触发枚举(可能有副作用或性能影响)
提示文案建议用语义化标签包裹,比如
<p class="text-muted">暂无数据</p>
,方便样式控制

结合加载状态统一处理

真实场景中,“无数据”常和“加载中”“加载失败”并存。推荐把三者合并判断,提升用户体验。

定义状态字段:
bool isLoading
string errorMessage
List<item> items</item>
在 Razor 中按优先级渲染:
@if (isLoading) { ... } else if (!string.IsNullOrEmpty(errorMessage)) { ... } else if (items?.Count == 0) { ... } else { ... 列表内容 ... }
这样避免“空白闪一下再出提示”,也防止错误状态被无数据覆盖

封装成可复用的组件(可选)

如果多个页面都要显示类似提示,可以抽成一个简单组件,比如

EmptyState.razor

接收参数:
[Parameter] public bool HasData { get; set; }
[Parameter] public string Message { get; set; } = "暂无内容"
内部只写:
@if (!HasData) { <p>@Message</p> }
,调用时只需
<emptystate hasdata="@items?.Any()"></emptystate>
进阶可加图标支持、操作按钮(如“刷新”),但基础版已足够轻量实用

基本上就这些。关键不是技术多复杂,而是判断时机要准、状态覆盖要全——别让“空列表”变成用户眼里的“页面卡住”。

相关推荐