Blazor @foreach 循环渲染集合方法-C#.Net教程-PHP中文网

Blazor @foreach 循环渲染集合方法

幻夢星雲

发布： 2025-12-23 10:58:02

原创

752人浏览过

@foreach 渲染集合最直接但无键值跟踪，易致 UI 错误；应初始化为空集合而非 null，基础写法为 @foreach (var item in Items) { @item }，需索引时用 @for。

blazor @foreach 循环渲染集合方法

Blazor 中用 @foreach 渲染集合是最直接的方式，但要注意它不自带键值跟踪，容易在集合更新时引发 UI 错误或状态丢失。

确保集合非 null，避免运行时异常。推荐用空集合初始化，而不是 null。

@foreach 默认按位置匹配 DOM 节点，添加/删除中间项会导致后续元素重用错误的组件实例（比如输入框失焦、状态错乱）。

给每个循环项加上 @key，指向稳定唯一的值（如 ID）：
@foreach (var user in Users) { <usercard user="@user"></usercard> }
不要用 @key="user.Name" 这类可能重复或变化的字段
若没有 ID，可用 @key="Guid.NewGuid()"（仅限一次性静态列表，不适用于可更新场景）

Blazor 组件靠引用变化触发重新渲染。直接调用 Items.Add() 不会自动刷新界面，除非显式调用 StateHasChanged() 或用新集合替换。

ghiblitattoo

用AI创造独特的吉卜力纹身

175

推荐方式：生成新集合并赋值，触发自动重渲染
Items = new List<string>(Items) { "New Item" };</string>
或手动通知：Items.Add("New Item"); StateHasChanged();
对 IEnumerable 类型，@foreach 会在每次渲染时重新枚举，注意性能和副作用（如 LINQ 查询未缓存）

当集合很大（如上千项）或需要交互筛选时，@foreach 可能卡顿。

下拉选择用 <inputselect tvalue="string"></inputselect> 更轻量
长列表建议用第三方库（如 Radzen.Blazor 的 Virtualize 组件）或原生 <virtualize></virtualize>（.NET 6+）
<virtualize items="@Items">...</virtualize> 自动只渲染可视区域，大幅提升性能

基本上就这些。@foreach 简单好用，关键在加 @key、换引用、避坑集合变更逻辑。

以上就是Blazor @foreach 循环渲染集合方法的详细内容，更多请关注php中文网其它相关文章！