讲师中心 微信公众号
AI工具推荐 视频效率加速

Blazor @foreach 循环渲染集合方法

胖雪酱_6229

胖雪酱_6229

发布时间:2025-12-23 10:58:02

|

772人浏览过

|

来源于php中文网

原创

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

blazor @foreach 循环渲染集合方法

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

基础写法:安全渲染简单列表

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

  • 在 @code 块中定义:private List<string> Items = new();</string>
  • 模板中使用:@foreach (var item in Items) { <div>@item</div> }
  • 若需索引,改用 @for (int i = 0; i ,更可控

避免重复渲染问题:用 @key 指定唯一标识

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

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

配合状态更新:别直接修改原集合引用

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

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

替代方案:考虑 @bind + InputSelect 或虚拟滚动

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

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

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

热门AI工具

更多
Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

Flowith
Flowith Hot

Flowith是一款基于画布和智能体工作流的 AI 协作工作空间。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

7119

2023.08.02

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

549

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

1698

2024.03.01

counta和count的区别
counta和count的区别

Count函数用于计算指定范围内数字的个数,而CountA函数用于计算指定范围内非空单元格的个数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

3648

2023.11.20

php中foreach用法
php中foreach用法

本专题整合了php中foreach用法的相关介绍,阅读专题下面的文章了解更多详细教程。

818

2025.12.04

string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

7119

2023.08.02

int占多少字节
int占多少字节

int占4个字节,意味着一个int变量可以存储范围在-2,147,483,648到2,147,483,647之间的整数值,在某些情况下也可能是2个字节或8个字节,int是一种常用的数据类型,用于表示整数,需要根据具体情况选择合适的数据类型,以确保程序的正确性和性能。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

3405

2024.08.29

c++怎么把double转成int
c++怎么把double转成int

本专题整合了 c++ double相关教程,阅读专题下面的文章了解更多详细内容。

4448

2025.08.29

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

0

2026.11.05

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
C# 教程
C# 教程

共94课时 | 22.7万人学习

python编程入门系列图文教程
python编程入门系列图文教程

共65课时 | 27.4万人学习

vscode其实很简单
vscode其实很简单

共72课时 | 32.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn