本文介绍在 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 干预。

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

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

<form method="post">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var experiment in Model.MainExperimentsTests)
            {
                <tr>
                    <td>@experiment.Id</td>
                    <td>@experiment.ExperimentTestName</td>
                    <td>
                        <a class="btn btn-sm btn-danger permissionRead permissionWrite"
                           onclick="showDeleteDialog(@experiment.Id)">
                            <i class="bi-bucket"></i> Delete
                        </a>

                        <dialog id="deleteDialog_@experiment.Id">
                            <p>Do you really want to delete experiment <strong>@experiment.ExperimentTestName</strong> (ID: @experiment.Id)?</p>
                            <form method="post">
                                <button type="submit" 
                                        asp-page-handler="Delete" 
                                        asp-route-experimentId="@experiment.Id"
                                        class="btn btn-primary">
                                    Confirm
                                </button>
                                <button type="button" 
                                        onclick="closeDeleteDialog(@experiment.Id)" 
                                        class="btn btn-secondary">
                                    Cancel
                                </button>
                            </form>
                        </dialog>
                    </td>
                </tr>
            }
        </tbody>
    </table>
</form>

<script>
    function showDeleteDialog(experimentId) {
        const dialog = document.getElementById(`deleteDialog_${experimentId}`);
        if (dialog) dialog.showModal();
    }

    function closeDeleteDialog(experimentId) {
        const dialog = document.getElementById(`deleteDialog_${experimentId}`);
        if (dialog) dialog.close();
    }
</script>

⚠️ 注意事项：

• 必须在循环内部声明，确保每个 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，彻底解决“总是删第一个”的问题。