ASP.NET MVC 5+EF中如何向JS函数传递Item ID显示记录详情？

AI 小北

2026-5-15

嘿，我来帮你解决这个详情按钮的ID传递问题～你的核心问题在于每行的详情行没有唯一标识，而且按钮传递的ID没有正确绑定到当前数据项的Id，导致JS无法精准定位到对应行。下面是具体的修复方案：

步骤1：给详情行设置唯一ID

在循环里，给隐藏的详情行设置一个包含当前item.Id的唯一ID，比如details_@item.Id，这样每行的详情行都有专属标识：

@foreach (var item in Model) {
 <tr>
 <td> @Html.DisplayFor(modelItem => item.Name) </td>
 <td> @Html.DisplayFor(modelItem => item.Description) </td>
 <td>
 <a href="@Url.Action("Download", "Sth", new { id = item.Id }, null)"><i class="material-icons">get_app</i></a>
 <a href="@Url.Action("Delete", "Sth", new { id = item.Id }, null)"><i class="material-icons">delete</i></a>
 <!-- 修改后的详情按钮，传递当前item的Id -->
 <button onclick="DisplayDetails(@item.Id)"><i class="material-icons">info</i></button>
 </td>
 </tr>
 <!-- 带唯一ID的详情行，用colspan适配表格列数 -->
 <tr id="details_@item.Id" style="display:none">
 <td colspan="3">@Html.DisplayFor(modelItem => item.TbVersion)</td>
 </tr>
}

步骤2：修改JavaScript函数，根据传入的ID定位详情行

原来的JS函数是固定找detailsField这个ID，现在改成根据传入的ID拼接出详情行的唯一ID，然后控制它的显示/隐藏：

<script type="text/javascript">
 function DisplayDetails(itemId) {
     // 拼接出当前行详情的唯一ID
     var detailsRow = document.getElementById(`details_${itemId}`);
     if (detailsRow.style.display === "none") {
         detailsRow.style.display = "table-row"; // 用table-row更符合表格行的显示规则
     } else {
         detailsRow.style.display = "none";
     }
 }
</script>