Blazor渲染列表需用@foreach遍历集合，并配合@key提升更新效率、StateHasChanged()或ObservableCollection实现响应式更新，同时处理空状态与加载逻辑。
Blazor 渲染列表数据很简单，核心是用 @foreach 遍历集合，配合组件生命周期和状态更新机制即可实时响应变化。
用 @foreach 直接渲染基础列表
这是最常用的方式。只要在 Razor 组件中定义一个可枚举的字段（比如 List<string></string> 或 IEnumerable<product></product>），就能直接遍历输出：
- 确保数据字段是组件的 public 或 protected 成员，且在
OnInitialized或OnParametersSet中初始化 - 在标记中写
@foreach (var item in items) { <div>@item.Name</div> } - Blazor 会自动为每个元素生成 DOM 节点，但注意：没有 key 属性时，列表更新可能触发整块重绘
用 @key 提升列表更新效率
当列表项可能增删改时，加上 @key 告诉 Blazor “哪个元素对应哪个数据”，避免不必要的 DOM 重建：
AI舌诊面诊问诊医疗系统+诊疗商城系统源码
下载
AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。
- 在循环内包裹的标签上加
@key="item.Id"（推荐用唯一、稳定、非 null 的值，如数据库 ID） - 例如：
@foreach (var user in users) { <usercard user="user"></usercard> } - 不加 @key 时，插入第一个元素可能导致所有后续组件被销毁重建；加了之后 Blazor 只移动或复用对应 key 的组件实例
响应式更新：让列表动起来
Blazor 不会自动监听集合变化（比如 List.Add()），需要手动通知 UI 更新：
- 调用
StateHasChanged()强制重新渲染（适合简单场景） - 更推荐用
ObservableCollection<t></t>—— 它自带 INotifyCollectionChanged，Blazor 会自动响应增删改 - 如果用 EF Core 或 API 获取数据，记得在
await后赋值并调用StateHasChanged()，否则可能因异步时机问题不刷新
带条件/空状态的列表渲染
实际项目中常要处理空列表、加载中、错误等状态：
- 用
@if (items == null)显示加载中，@else if (!items.Any())显示“暂无数据” - 避免直接在
@foreach外层套@if再进循环，而是先判断再统一渲染，逻辑更清晰 - 可以封装成
<listdisplay items="@users"><itemtemplate>...</itemtemplate></listdisplay>提高复用性（需自定义组件）
基本上就这些。关键不是语法多难，而是理解 Blazor 的渲染逻辑：数据变 → 通知刷新 → 比对 DOM → 差量更新。把 @key 和状态通知做对，列表就稳了。
