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

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

✅ 正确做法：为每个对话框分配唯一 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，彻底解决“总是删第一个”的问题。

# javascript  # java  # html  # js  # 浏览器  # edge  # ai  # .net 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 宙斯浏览器视频悬浮窗怎么开启 边看视频边操作其他应用教程  zabbix利用python脚本发送报警邮件的方法  Laravel的HTTP客户端怎么用_Laravel HTTP Client发起API请求教程  免费网站制作appp,免费制作app哪个平台好？  为什么php本地部署后css不生效_静态资源加载失败修复技巧【技巧】  Laravel如何实现登录错误次数限制_Laravel自带LoginThrottles限流配置【方法】  Gemini怎么用新功能实时问答_Gemini实时问答使用【步骤】  HTML5建模怎么导出为FBX格式_FBX格式兼容性及导出步骤【指南】  韩国服务器如何优化跨境访问实现高效连接？  Android okhttputils现在进度显示实例代码  Windows10如何更改计算机工作组_Win10系统属性修改Workgroup  php静态变量怎么调试_php静态变量作用域调试技巧【解答】  Laravel如何获取当前用户信息_Laravel Auth门面获取用户ID  Bootstrap CSS布局之列表  Swift开发中switch语句值绑定模式  如何用免费手机建站系统零基础打造专业网站？  Laravel如何自定义错误页面（404, 500）？（代码示例）  如何用虚拟主机快速搭建网站？详细步骤解析  EditPlus中的正则表达式实战(5)  Laravel如何设置自定义的日志文件名_Laravel根据日期或用户ID生成动态日志【技巧】  高端企业智能建站程序：SEO优化与响应式模板定制开发  如何快速辨别茅台真假？关键步骤解析  PHP 实现电台节目表的智能时间匹配与今日/明日轮播逻辑  Win11怎么设置默认图片查看器_Windows11照片应用关联设置  Laravel怎么多语言本地化设置_Laravel语言包翻译与Locale动态切换【手册】  Laravel如何使用Telescope进行调试？（安装和使用教程）  车管所网站制作流程,交警当场开简易程序处罚决定书，在交警网站查询不到怎么办？  猪八戒网站制作视频,开发一个猪八戒网站，大约需要多少？或者自己请程序员，需要什么程序员，多少程序员能完成？  Laravel如何处理文件下载请求？（Response示例）  Laravel项目如何进行性能优化_Laravel应用性能分析与优化技巧大全  Laravel安装步骤详细教程_Laravel环境搭建指南  企业在线网站设计制作流程,想建设一个属于自己的企业网站，该如何去做？  如何快速搭建高效简练网站？  如何用5美元大硬盘VPS安全高效搭建个人网站？  黑客入侵网站服务器的常见手法有哪些？  如何在局域网内绑定自建网站域名？  Laravel如何实现API资源集合？（Resource Collection教程）  php 三元运算符实例详细介绍  网站视频制作书签怎么做,ie浏览器怎么将网站固定在书签工具栏？  如何实现建站之星域名转发设置？  Laravel如何使用Seeder填充数据_Laravel模型工厂Factory批量生成测试数据【方法】  php读取心率传感器数据怎么弄_php获取max30100的心率值【指南】  linux top下的 minerd 木马清除方法  Laravel用户认证怎么做_Laravel Breeze脚手架快速实现登录注册功能  消息称 OpenAI 正研发的神秘硬件设备或为智能笔，富士康代工  微信小程序 五星评分(包括半颗星评分)实例代码  重庆市网站制作公司,重庆招聘网站哪个好？  如何在建站之星网店版论坛获取技术支持？  如何在万网自助建站平台快速创建网站？  微信推文制作网站有哪些,怎么做微信推文，急？