Blazor静态服务端渲染：动态列表按钮绑定用户数据异常求助

在集成Identity的Blazor静态服务端渲染项目里，循环渲染用户列表并绑定编辑按钮时，所有按钮都指向最后一个用户，本质是循环变量的闭包捕获问题——Blazor事件绑定会捕获循环变量的引用，而非循环迭代时的当前值，循环结束后变量指向最后一个用户实例，导致所有按钮触发同一对象的操作。

下面是具体的修复方案：

方案1：用局部变量捕获当前用户 #

在foreach循环内部，先把当前用户赋值给一个局部变量，再用这个变量绑定事件，确保每个事件处理程序捕获的是当前迭代的用户实例：

@foreach (var user in Users)
{
    // 关键：创建局部变量保存当前迭代的用户
    var currentUser = user;
    <tr>
        <td>@currentUser.UserName</td>
        <td>@currentUser.Email</td>
        <td>
            <button type="button" @onclick="() => GoToEditPage(currentUser.Id)">编辑</button>
        </td>
    </tr>
}

对应的后台逻辑：

// 注入NavigationManager
[Inject] private NavigationManager NavManager { get; set; }

private void GoToEditPage(string userId)
{
    NavManager.NavigateTo($"/users/edit/{userId}");
}

方案2：直接传递用户ID跳转（更简洁） #

跳过捕获用户对象，直接在事件中使用当前用户的唯一ID生成跳转链接，字符串插值会在循环时立即计算出当前用户的ID值，避免引用问题：

@foreach (var user in Users)
{
    <tr>
        <td>@user.UserName</td>
        <td>@user.Email</td>
        <td>
            <button type="button" @onclick="() => NavManager.NavigateTo($"/users/edit/{user.Id}")">编辑</button>
        </td>
    </tr>
}

额外：确保表单名唯一 #

如果你为每个用户生成独立表单，要利用用户ID做表单的唯一标识，避免命名冲突：

@foreach (var user in Users)
{
    var currentUser = user;
    <form name="edit-form-@currentUser.Id" method="post">
        <!-- 表单输入项，绑定currentUser的属性 -->
        <input type="hidden" name="userId" value="@currentUser.Id" />
        <button type="submit">保存修改</button>
    </form>
}

注意事项 #

• Blazor SSR的事件绑定在渲染阶段处理，必须保证每个事件处理程序拿到的是当前迭代的正确值；
• Identity框架的IdentityUser自带Id属性，可直接作为用户的唯一标识使用。

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