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

我正在使用asp.NETMVC和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>

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

---

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

您正在创建无效的重复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);
    });
}

---

您正在创建无效的重复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);
    });
}

你不应该有多个具有相同Id的元素，在普通HTML中也可以，因为它不会破坏任何东西，但是如果你想在这些Id上使用Jquery，那就绝对不行！！！如果在编写Jquery以选择id为的元素时这样做，那么它将始终从页面顶部开始返回DOM中具有给定id的第一个元素

解决方案：将类添加到按钮而不是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>
  }

})

注意，我已将选择器deleteSystemData更改为。deleteSystemData

您不应该有多个具有相同Id的元素它可以在纯HTML中使用，因为它不会破坏任何东西，但是如果您想在这些Id上使用Jquery，那么这是一个很大的否定！！！如果在编写Jquery以选择id为的元素时这样做，那么它将始终从页面顶部开始返回DOM中具有给定id的第一个元素

解决方案：将类添加到按钮而不是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>
  }

})

---

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

您正在创建的重复id属性是无效的html，并且只会选择第一个属性。使用类名创建重复的id属性，这是无效的html，并且只会选择第一个id属性。使用类名您仍然保留了无效的id属性：谢谢@StephenMuecke。更新了答案：您仍然保留了无效的id属性：谢谢@StephenMuecke。更新了答案：