使用 javascript 从引导表中检索 id

Question

我正在为我的 Web 应用程序项目使用 MVC 5。我创建了一个由 MVC 本身完成的表的内置列表。现在我想获取我点击的数据的 id。 MVC 本身创建了一个编辑/删除选项，但我想让整行成为可点击的，这样当我按下其中一行时，我会将我链接到该 ID 的详细信息。 问题是当我单击该行时，我根本无法将 id 传递给 javascript。我试图搜索它，我发现了类似这样的东西 var id = $('.clickableRow').attr("data-id"); 但它只显示未定义的值。

这里是我的 index.cshtml 源代码

@foreach (var item in Model){
<tr id="clickableRow(this)">
    <td>
        @Html.DisplayFor(modelItem => item.SentBy)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.SentTo)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Subject)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.SentDate)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Message)
    </td>
    <td>

        @Html.ActionLink("Details", "Details", new { id = item.MailId }) |
        @Html.ActionLink("Delete", "Delete", new { id = item.MailId })
    </td>
</tr>

}

这里是我尝试使用的javascript：

<script type="text/javascript">
$(document).ready(function () {
    $('.clickableRow').on('click', function (e) {
        var id = $(this).closest('tr').find('td.SentBy').html();
        //var id = $('.clickableRow').attr("data-id");
        alert(id);
        //window.location = "Mails/Details/" + id;
        // Or, we can grab the HREF from the first anchor:
        //window.location = $('a:first', this).attr('href');
    });
});

提前感谢您的帮助。

Answer 1

您有<tr id="clickableRow(this)">，它似乎（错误地）假设id 属性是类似onclick 的事件。此外，您正在尝试将 id 作为data 属性访问，这将要求它以data- 为前缀，即data-id，我不确定.clickableRow 类的来源，因为没有t 分配给示例行的任何类。

我对 .NET 一无所知，但您应该将实际记录 ID 放在 data-id 属性中：

<tr class="clickableRow" data-id="OUTPUT_ID_HERE">

$(function(){
    $('table').on('click', '.clickableRow', function(){
        var $this = $(this);
        var id = $this.data('id');  
        alert(id);
    })
})

Answer 2

在您的 JavaScript 中，您尝试访问 class 元素，而在您的 HTML 中，您已经定义了 ID 属性。

试着把你的 JavaScript 改成这个

$(document).ready(function () {
    $('#clickableRow').on('click', function () {
        var $this = $(this);
        var id=$this.attr("data-id");
        alert(id);
    });
});