Blazor页面中如何在foreach循环内调整成员变量并实现双向绑定？

问题根因 #

• 绑定目标错误：你创建的curPaintUsed是循环变量paintUsed的临时值拷贝，由于string是不可变值类型，修改curPaintUsed只会更新这个临时副本，不会回写到elem.PaintsUsed集合的对应元素中，自然不会同步到原数据。
• HTML ID重复：你在循环中多次生成id为paint-search的datalist元素，HTML规范要求页面ID唯一，浏览器只会识别第一个匹配的datalist，导致后续输入框的选项关联错误。
• for循环索引越界是典型的闭包捕获问题，没有在循环内声明临时变量存储索引值就会出现这个问题。

解决方案 #

方案1（最稳定，推荐）：调整存储结构+修复重复ID

将PaintsUsed从List<string>改为引用类型的集合，绑定属性即可同步修改到原对象：

// 先定义承载涂料名称的类
public class PaintUsage
{
    public string Name { get; set; }
}
// 对应把elem.PaintsUsed的类型改为List<PaintUsage>

前端渲染代码修改如下：

foreach (var elem in newMini.Elements)
{
    <div class="@elem.Name">
        <InputText @bind-Value="elem.Name" placeholder="Element name" />
        @foreach (var (paintUsed, idx) in elem.PaintsUsed.Select((p,i)=>(p,i)))
        {
            var curPaintUsed = paintUsed;
            // 生成唯一datalist id，避免重复冲突
            var datalistId = $"paint-search-{elem.GetHashCode()}-{idx}";
            <div class="@curPaintUsed.Name">
                current paint: @curPaintUsed.Name 
                <input type="text"
                       list="@datalistId"
                       placeholder="Search from @allPaints.Count() paints!"
                       @bind-value="curPaintUsed.Name" />
                <datalist id="@datalistId">
                    @foreach (var paint in allPaints)
                    {
                        <option>@paint.PaintName</option>
                    }
                </datalist>
            </div>
        }
        @if (!String.IsNullOrWhiteSpace(elem.Name))
        {
            <button type="button" @onclick="() => AddPaintToElement(elem)">
                Add Paint To Element
            </button>
        }
    </div>
}

方案2：不修改存储结构，用带临时变量的for循环规避索引越界

如果不想调整后端结构，直接在循环内声明临时索引变量即可解决闭包导致的越界问题，直接绑定集合对应位置的元素：

foreach (var elem in newMini.Elements)
{
    <div class="@elem.Name">
        <InputText @bind-Value="elem.Name" placeholder="Element name" />
        @for (int i = 0; i < elem.PaintsUsed.Count; i++)
        {
            // 循环内声明临时索引，避免闭包捕获问题
            var idx = i;
            var datalistId = $"paint-search-{elem.GetHashCode()}-{idx}";
            <div class="@elem.PaintsUsed[idx]">
                current paint: @elem.PaintsUsed[idx] 
                <input type="text"
                       list="@datalistId"
                       placeholder="Search from @allPaints.Count() paints!"
                       @bind-value="elem.PaintsUsed[idx]" />
                <datalist id="@datalistId">
                    @foreach (var paint in allPaints)
                    {
                        <option>@paint.PaintName</option>
                    }
                </datalist>
            </div>
        }
        @if (!String.IsNullOrWhiteSpace(elem.Name))
        {
            <button type="button" @onclick="() => AddPaintToElement(elem)">
                Add Paint To Element
            </button>
        }
    </div>
}

内容的提问来源于stack exchange，提问作者Zami77