Blazor SSR中使用EditForm更新列表对象字段的方法

问题分析 #

原代码存在两个核心问题导致NewValue字段无法正常更新：

1. 缺少EditForm组件：Blazor表单的双向绑定与提交逻辑依赖EditForm提供的上下文环境，缺少该组件时，InputText的@bind-Value无法正确触发模型更新，提交按钮也无法关联到表单处理方法。
2. for循环变量捕获问题：Blazor渲染过程中，直接使用循环变量i绑定formModel.EmpList[i].NewValue会导致所有输入框最终绑定到循环结束时的i值（即列表最后一个元素的索引），输入内容无法正确对应到单个对象。

修正方案 #

1. 引入EditForm组件 #

将整个表单内容包裹在EditForm中，绑定模型实例与提交处理方法，确保表单上下文正常工作。

2. 修复循环绑定问题 #

有两种可行方式：

• 使用foreach循环遍历列表项，直接绑定每个项的属性；
• 在for循环内部将循环变量赋值给局部变量，避免捕获引用问题。

完整修正代码 #

@page "/test1"

<EditForm Model="@formModel" OnValidSubmit="@HandleValidSubmit">
    <table>
        <thead>
            <tr>
                <th>Seq No</th>
                <th>Employee Name</th>
                <th>New Value</th>
            </tr>
        </thead>
        <tbody>
            <!-- 方式1：使用foreach循环（推荐） -->
            @foreach (var emp in formModel.EmpList)
            {
                <tr>
                    <td>@emp.SeqNo</td>
                    <td>@emp.EmpName</td>
                    <td><InputText @bind-Value="emp.NewValue" /></td>
                </tr>
            }

            <!-- 方式2：使用for循环并赋值局部变量 -->
            @*@for (int i = 0; i < formModel.EmpList.Count; i++)
            {
                var index = i;
                <tr>
                    <td>@formModel.EmpList[index].SeqNo</td>
                    <td>@formModel.EmpList[index].EmpName</td>
                    <td><InputText @bind-Value="formModel.EmpList[index].NewValue" /></td>
                </tr>
            }*@

            <tr>
                <td colspan="3">OutputString = @OutputString</td>
            </tr>
        </tbody>
    </table>

    <button type="submit" class="btn btn-primary">Submit</button>
</EditForm>

@code {
    public string OutputString = "start";

    private ModelForm1 formModel = new ModelForm1
    {
        EmpList = new List<ModelEmp>
        {
            new ModelEmp { SeqNo = 1, EmpName = "Alice" },
            new ModelEmp { SeqNo = 2, EmpName = "Bob" },
            new ModelEmp { SeqNo = 3, EmpName = "Charlie" }
        }
    };

    private void HandleValidSubmit()
    {
        OutputString = "start"; // 重置输出避免重复拼接
        foreach (var emp in formModel.EmpList)
        {
            OutputString += $"seqno = {emp.SeqNo} NewValue = {emp.NewValue} --- ";
        }
    }

    public class ModelForm1
    {
        public List<ModelEmp> EmpList { get; set; } = new();
    }

    public class ModelEmp
    {
        public int SeqNo { get; set; } = 0;
        public string EmpName { get; set; } = string.Empty;
        public string NewValue { get; set; } = string.Empty;
    }
}

关键说明 #

• EditForm的作用：作为Blazor表单的容器，负责管理模型状态、验证逻辑以及提交事件触发，是双向绑定生效的必要前提。
• 循环绑定注意事项：
  • foreach循环直接遍历列表项，每个项都是独立引用，不会出现变量捕获问题；
  • 若必须使用for循环，需将循环变量i赋值给局部变量index，确保每个循环迭代绑定当前索引的副本，避免所有输入框指向同一个索引值。
• 提交逻辑优化：在HandleValidSubmit中先重置OutputString，避免每次提交都追加内容，便于查看最新结果。

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