17370845950

Blazor列表无数据提示通过@if判断集合是否为空实现，推荐用list?.Count==0或!list?.Any()，结合加载中、错误状态统一处理，确保提示准确及时。

Blazor 列表无数据时显示提示信息，核心是判断数据源是否为空，并在 UI 中条件渲染对应提示内容。不需要额外组件，用内置的 @if 或 @switch 就能干净实现。

用 @if 判断集合是否为空

最常用也最直观的方式：检查绑定的列表（如 List、IEnumerable）是否为 null 或 Count == 0。

• 对 List 或实现了 ICollection 的集合，优先用 list?.Count == 0，避免空引用且性能好
• 对纯 IEnumerable（比如 LINQ 查询结果），用 !list?.Any() 更安全，但注意会触发枚举（可能有副作用或性能影响）
• 提示文案建议用语义化标签包裹，比如

  暂无数据

  ，方便样式控制

结合加载状态统一处理

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

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

封装成可复用的组件（可选）

如果多个页面都要显示类似提示，可以抽成一

• 接收参数：[Parameter] public bool HasData { get; set; }、[Parameter] public string Message { get; set; } = "暂无内容"
• 内部只写：@if (!HasData) {

  @Message

  }，调用时只需
• 进阶可加图标支持、操作按钮（如“刷新”），但基础版已足够轻量实用

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