如何为 ASP.NET Core 中的每个循环项动态绑定唯一删除对话框

本文介绍在 razor 页面中使用 @foreach 循环渲染多条数据时，如何避免因复用同一

元素导致 asp-route-* 始终传递首个项 id 的问题——核心方案是为每个对话框生成唯一 id，并通过 javascript 动态控制其显隐。

在 ASP.NET Core Razor Pages 中，当在 @foreach 循环内渲染多个删除操作按钮并共用同一个

元素时（如原代码中所有

），JavaScript 调用 document.getElementById("deleteDialog") 总是返回 DOM 中第一个匹配的元素（即首个循环项对应的 dialog），导致后续点击任意行的“删除”按钮，最终提交的 asp-route-experimentId 始终是第一个 @experiment.Id —— 这并非 JavaScript “重启循环”，而是 ID 冲突引发的 DOM 查询歧义。

✅ 正确做法：为每个对话框分配唯一 ID，并将当前实验 ID 作为参数传入 JS 函数。修改要点如下：

1. 为
   添加动态 ID
   （例如 deleteDialog_@experiment.Id）；
2. 在 标签中传入当前 @experiment.Id 到 showDeleteDialog()；
3. 更新 JS 函数，接收 ID 并精准定位对应 dialog；
4. 确保 位于对应 dialog 内部，其 asp-route-experimentId 将在服务端渲染时静态绑定，无需 JS 干预。

以下是修正后的完整代码示例：

    
            @foreach (var experiment in Model.MainExperimentsTests)
            {
                
            }
        

        

            

                
Id
                
Name
                
Actions
            
        
        

                    
@experiment.Id
                    
@experiment.ExperimentTestName
                    

                        
                             Delete
                        

                        

                            
Do you really want to delete experiment @experiment.ExperimentTestName (ID: @experiment.Id)?
                            
                                
                                    Confirm
                                
                                
                                    Cancel
                                
                            
                        
                    
                
    

⚠️ 注意事项：

• 必须在循环内部声明，确保每个 experiment 拥有独立的、带唯一 ID 的 dialog 实例；
• asp-route-experimentId="@experiment.Id" 是服务器端 Razor 渲染的静态属性，无需 JS 动态赋值 —— 它已在 HTML 输出时固化到对应按钮的 form 中；
• 推荐为 包裹
  （如上），避免依赖外部表单，提升语义清晰度与行为可预测性；
• 若 experiment.Id 可能含特殊字符（如 -、.），建议在 ID 中做简单转义（如 @experiment.Id.ToString().Replace("-", "_")），但整型 ID 通常无需处理；
• 现代浏览器对
  支持良好（Chrome 37+, Edge 79+, Firefox 98+），生产环境建议添加 dialog-polyfill 兼容旧版。

通过此结构，每个删除操作完全解耦，asp-route-experimentId 将准确传递对应行的数据 ID，彻底解决“总是删第一个”的问题。