17370845950

Blazor渲染列表需用@foreach遍历集合，并配合@key提升更新效率、StateHasChanged()或ObservableCollection实现响应式更新，同时处理空状态与加载逻辑。

Blazor 渲染列表数据很简单，核心是用 @foreach 遍历集合，配合组件生命周期和状态更新机制即可实时响应变化。

用 @foreach 直接渲染基础列表

这是最常用的方式。只要在 Razor 组件中定义一个可枚举的字段（比如 List 或 IEnumerable），就能直接遍历输出：

• 确保数据字段是组件的 public 或 protected 成员，且在 OnInitialized 或 OnParametersSet 中初始化
• 在标记中写 @foreach (var item in items) { @item.Name }
• Blazor 会自动为每个元素生成 DOM 节点，但注意：没有 key 属性时，列表更新可能触发整块重绘

用 @key 提升列表更新效率

当列表项可能增删改时，加上 @key 告诉 Blazor “哪个元素对应哪个数据”，避免不必要的 DOM 重建：

• 在循环内包裹的标签上加 @key="item.Id"（推荐用唯一、稳定、非 null 的值，如数据库 ID）
• 例如：@foreach (var user in users) { }
• 不加 @key 时，插入第一个元素可能导致所有后续组件被销毁重建；加了之后 Blazor 只移动或复用对应 key 的组件实例

响应式更新：让列表动起来

Blazor 不会自动监听集合变化（比如 List.Add()），需要手动通知 UI 更新：

• 调用 StateHasChanged() 强制重新渲染（适合简单场景）
• 更推荐用 ObservableCollection —— 它自带 INotifyCollectionChanged，Blazor 会自动响应增删改
• 如果用 EF Core 或 API 获取数据，记得在 await 后赋值并调用 StateHasChanged()，否则可能因异步时机问题不刷新

带条件/空状态的列表渲染

实际项目中常要处理空列表、加载中、错误等状态：

• 用 @if (items == null) 显示加载中，@else if (!items.Any()) 显示“暂无数据”
• 避免直接在 @foreach 外层套 @if 再进循环，而是先判断再统一渲染，逻辑更清晰
• 可以封装成 ... 提高复用性（需自定义组件）

基本上就这些。关键不是语法多难，而是理解 Blazor 的渲染逻辑：数据变 → 通知刷新 → 比对 DOM → 差量更新。把 @key 和状态通知做对，列表就稳了。