为所有按钮而不是被点击的按钮调用 onclick 事件的问题

问题描述

我有一个显示书籍列表的索引视图，我有一个局部视图，我用它在索引（主）视图中显示书籍列表，我有一个显示每本书的删除按钮在局部视图中，这样当我点击删除时，它会使用 ajax 调用删除想要的书，但是会发生什么，所有的书都被删除而不仅仅是我想要的书

索引视图看起来像这样

@model IEnumerable<Project.Models.Books>

@foreach(var item in Model){
    @await Html.PartialAsync("../Books/_BookView",item)
}

在局部视图 _BookView 中，我显示一本书及其详细信息和一个删除按钮，我在 _BookView 中的 ajax 脚本如下所示

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(document).on('click','#deleteBook',function (e) {
        $.ajax({
            type: "DELETE",url: "@Url.Action("DeleteBook","Book")",data: {bookId: this.value},success: function () {
                alert("Deleted Successfully");
            },error: function () {
                alert("Deleting Failed");
            }
        });
        return false;
    });
</script>
</head>

我的删除按钮看起来像这样

<button id="deleteBook" value="@Html.displayFor(m=>m.BookId)" class="btn btn-outline-secondary btn-sm">Delete</button>

当我单击一本书的任何删除按钮时，所有按钮都被删除，我知道这可能是因为我所有的按钮都具有相同的 ID，有没有办法让 ajax 调用我只想要的书的删除操作（虽然仍然在索引视图的 foreach 内的局部视图中制作了动态按钮），提前致谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

asp.net-ajax asp.net-mvc