我只从asp.net Razor视图中获得jQuery中的第一个id

Question

我正在将asp.net mvc与Razor结合使用。这是我的代码

    @foreach (var item in Model)
    {
                <button class="btn btn-danger btn-xs" id="deleteSystemData" data-toggle="modal" data-target="#deleteModal" data-id="@item.SerialNumber">Delete reported data</button>
}
<script>
    window.onload = function () {
        var serialNumber;
        $('#deleteSystemData').click(function (e) {
            e.preventDefault();
            serialNumber = $(this).data('id');
            console.log("This number: " + serialNumber);
            $("#deleteModal #serial-number").text(serialNumber);
        });
        $('#deleteConfirmed').click(function () {
            $.ajax({
                url: '/MeterReading/DeleteSystemData',
                data: { serialNumber: serialNumber }
            }).done(function() {
                $('#deleteModal').modal('toggle');
                $("#delete-system-data-success").slideDown(500)
                  .delay(2500)
                  .slideUp(500);
            }).error(function () {
                $('#deleteModal').modal('toggle');
                $("#delete-system-data-error").slideDown(500)
                  .delay(2500)
                  .slideUp(500);
            }
            );
        });
    }
</script>

我在所有按钮上都得到了正确的data-id="@item.SerialNumber"。但是我的jQuery代码只适用于第一个按钮。我在第一次点击事件中添加了一个console.log（这个数字），当我点击第一个按钮时，我在日志中得到了一个Id，但其余的在jQuery脚本中没有任何Id。

我的目标是将一个id从按钮传递给asp.net控制器，并删除带有该id的内容。我也有一个引导模式，但这很好。

Answer 1

您不应该有多个具有相同Id的元素（its ok to have it in plain HTML as it will not break any thing, but if you want to play with Jquery on these ids then its a Big NO!!!）如果您这样做，那么当您编写Jquery以选择具有Id的元素时，它将始终从页面顶部开始返回DOM中具有给定Id的第一个元素。

Solution:将class而不是id添加到按钮中，然后编写脚本来玩这个类。。

因此，将for循环中的HTML更改为

 @foreach (var item in Model)
 {
  <button class="btn btn-danger btn-xs deleteSystemData" data-toggle="modal" data-target="#deleteModal" data-id="@item.SerialNumber">Delete reported data</button>
  }

注意I have removed the id and added it to the class

接下来将您的脚本部分更改为下方

$('.deleteSystemData').click(function (e) {
  e.preventDefault();
  serialNumber = $(this).data('id');
  console.log("This number: " + serialNumber);
  $("#deleteModal #serial-number").text(serialNumber);

})；

注意我已将选择器#deleteSystemData更改为.deleteSystemData

Answer 2

您正在创建无效的重复Id。请尝试输入类名。

@var i = 0;
@foreach (var item in Model)
{
            <button class="btn btn-danger btn-xs deleteSystemData" id="deleteSystemData_@i" data-toggle="modal" data-target="#deleteModal" data-id="@item.SerialNumber">Delete reported data</button>
@i++;
}
window.onload = function () {
    var serialNumber;
    $('.deleteSystemData').click(function (e) {
        e.preventDefault();
        serialNumber = $(this).attr('data-id'); // Gets the serial number
        console.log("This number: " + serialNumber);
        $("#deleteModal #serial-number").text(serialNumber);
    });
}