ASP.NET MVC中点击表格行加载模态框，如何传递当前点击行ID给控制器

• 全局重复定义相同id的DOM节点：原代码在循环渲染每一行台账数据时，都生成了一个id="ledgerModal"的节点。按照HTML规范，同一页面内的id属性必须唯一，JS通过$('#ledgerModal')选择元素时，只会匹配到DOM结构里第一个带该id的节点，导致无论点击哪一行，读取的url永远是第一条数据对应的请求地址。
• 模态框DOM结构不符合规范：原代码把模态框节点放在表格的<tr>里逐行循环生成，既造成大量冗余DOM，也不符合Bootstrap模态框的放置要求（通常作为全局组件放在<body>直接子级），容易引发样式、交互异常。

1. 调整HTML结构 #

• 删除循环内重复生成的模态框节点，在表格外新增一个全局唯一的模态框容器
• 给每一个可点击的台账行通过自定义属性data-id存储当前行的主键ID，避免依赖重复id取数据
  调整后的代码：

<table class="tableCustomTableOne" width="40%">
    <tr>
        <th nowrap="nowrap">
            @Html.LabelFor(model => model.Name, htmlAttributes: new {@class = "control-label col-md-2" })
        </th>
        <th nowrap="nowrap">
            @Html.LabelFor(model => model.Data, htmlAttributes: new { @class = "control-label col-md-2" })
        </th>
    </tr>
    @foreach (var item in (ViewBag.MainLedger as List<ModalApp.Models.Ledger>))
    {
        <%-- 为可点击行绑定当前行主键ID --%>
        <tr class="modalRed" data-id="@item.Id">
            <td nowrap="nowrap">
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td nowrap="nowrap">
                @Html.DisplayFor(modelItem => item.Data)
            </td>
        </tr>
    }
</table>
<%-- 全局唯一的模态框容器，无循环重复生成 --%>
<div class="modal fade" id="ledgerModal" role="dialog"></div>

注：原代码存在两处笔误：表头的Data标签后多了s，数据单元格的内容后多了多余的逗号，已在调整后的代码中修正。

2. 修正点击交互JS逻辑 #

不再通过模态框节点读取固定请求地址，改为从当前被点击的行节点上读取存储的主键ID，拼接为对应控制器方法的请求地址，异步加载详情内容后填充到全局唯一的模态框中弹出。
调整后的JS代码：

$(document).ready(function () {
    $('.modalRed').click(function () {
        // 获取当前点击行绑定的主键ID
        var rowId = $(this).data('id');
        // 拼接控制器detLedgerPartial方法的请求地址
        var requestUrl = '@Url.Action("detLedgerPartial", "Ledger")/' + rowId;
        // 异步请求详情分部视图
        $.get(requestUrl, function (partialView) {
            $("#ledgerModal").html(partialView);
            $("#ledgerModal").modal('show');
        });
    });
});

确保Ledger控制器下的detLedgerPartial方法可以正确接收路由传递的id参数，根据id查询对应台账的详情数据并返回分部视图即可，无需改动原有控制器的业务逻辑。

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