在Blazor应用开发过程中，列表组件是承载数据展示的核心模块，当后端接口返回空数据、用户尚未添加任何内容或者筛选条件匹配不到结果时，页面如果直接展示空白区域，会让用户产生困惑，不清楚是数据加载失败还是确实没有内容。因此为列表添加无数据时的提示信息是优化用户体验的必要操作。
方案一：基于数据绑定的条件渲染
这种方式是最基础也最常用的实现思路，核心是通过判断列表数据源的长度，决定是渲染列表内容还是提示信息。首先在组件的代码中定义列表数据源，然后在razor模板中使用if条件判断控制不同内容的显示。
完整实现代码
// 组件代码部分，定义列表数据
@code {
// 模拟列表数据源，实际开发中通常从接口获取
private List<string> itemList = new List<string>();
// 模拟初始化加载数据，实际可替换为接口调用
protected override void OnInitialized()
{
// 这里暂时不添加数据，模拟空列表场景
// itemList.Add("示例数据1");
// itemList.Add("示例数据2");
}
}
<!-- 组件模板部分，条件渲染列表和提示 -->
<h3>我的待办列表</h3>
@if (itemList != null && itemList.Count > 0)
{
<ul>
@foreach (var item in itemList)
{
<li>@item</li>
}
</ul>
}
else
{
<div class="empty-tip">
<p>当前暂无待办事项，点击添加按钮新增内容</p>
</div>
}
方案说明
上述代码中，首先通过@code块定义了itemList作为列表数据源，初始化时没有添加任何数据，模拟空列表场景。在模板部分，使用@if判断itemList不为空且元素数量大于0时，渲染无序列表展示每一项数据；否则渲染提示信息的div容器，告知用户当前列表无数据。
这种方式的优势是逻辑简单直观，适合大多数简单的列表场景，开发者可以快速上手修改。如果需要添加样式，只需要给提示容器添加对应的CSS类名即可。
方案二：封装可复用的空状态组件
如果项目中多个列表都需要空状态提示，每次重复编写条件判断代码会提升维护成本，此时可以封装一个通用的空状态提示组件，在需要的列表位置直接引用即可。
空状态组件定义
<!-- EmptyTip.razor 组件内容 -->
@if (Show)
{
<div class="empty-container">
<p>@TipText</p>
</div>
}
@code {
// 控制是否显示提示的参数
[Parameter]
public bool Show { get; set; }
// 提示文本参数，支持自定义内容
[Parameter]
public string TipText { get; set; } = "暂无相关数据";
}
在列表组件中使用封装好的空状态组件
<!-- ListPage.razor 列表页面内容 -->
@using BlazorDemo.Components // 引入空状态组件所在命名空间
<h3>商品列表</h3>
<ul>
@foreach (var product in productList)
{
<li>@product.Name - @product.Price 元</li>
}
</ul>
<EmptyTip Show="productList.Count == 0" TipText="当前没有上架的商品" />
@code {
private List<Product> productList = new List<Product>();
protected override void OnInitialized()
{
// 模拟空数据场景
}
// 商品类定义
public class Product
{
public string Name { get; set; }
public decimal Price { get; set; }
}
}
方案说明
封装的EmptyTip组件接收两个参数，Show控制提示是否显示，TipText支持自定义提示文本。在列表页面中，只需要将Show参数绑定为列表数据为空的条件，就可以自动显示对应的提示信息。这种方式提升了代码的复用性，后续如果需要修改空状态的样式或者默认提示文本，只需要修改组件本身即可，不需要逐个调整所有引用位置。
注意事项
- 判断列表是否为空时，需要先判断数据源是否为
null，避免出现空引用异常，尤其是数据源从接口异步获取的场景，初始值可能为null。 - 如果列表数据需要异步加载，建议在数据加载完成后再判断空状态，避免页面初始化时短暂显示提示信息，然后数据加载后又切换为列表内容，造成页面闪烁。
- 提示信息的文案可以根据业务场景自定义，比如筛选结果为空时可以提示“未找到匹配的内容”，用户未添加内容时提示“点击按钮新增第一条内容”，让提示更贴合用户操作场景。