jQuery ajax 调用不适用于 web api？答案

【问题标题】：jQuery ajax call is not working with web api?jQuery ajax 调用不适用于 web api？
【发布时间】：2019-07-06 00:24:41
【问题描述】：

我的页面上有几个条目，每个条目都有一个删除按钮，当我点击一个按钮时，ajax 没有调用 api？

我试图找出我将在哪里制造错误。如果有人想通了。请告诉我。

按钮

<button type="button" data-entryId="@entry.Id" class="btn-delete btn btn-danger CustomStyleForEditAndDeleteButton">
   Delete
</button>

API

// Get : api/entries/1
[HttpDelete]
public IHttpActionResult DeleteEntry(int id)
{
   var entryInDb = _context.Entries.SingleOrDefault(x => x.Id == id);
   if (entryInDb == null)
      return NotFound();
      else
         _context.Entries.Remove(entryInDb);
      _context.SaveChanges();

      return Ok();
}

jQuery

@section scripts{
    <script>
        $(document).ready(function () {
            jQuery(".btn-delete").click(function () {
                bootbox.confirm({
                    size: "small",
                    message: "Are you sure you want to delete this post?",
                    callback: function (result) {
                        if (result) {
                            jQuery.ajax({
                                url: "/api/entries/" + this.attr("data-entryId"),
                                method: "DELETE",
                                success: function () {
                                    bootbox.alert("The post is successfully deleted!");
                                },
                                error: function () {
                                    bootbox.alert("something goes wrong when attempting delete operation please try again.");
                                }
                            });
                        }
                    }
                });
            });
        });
    </script>
}

谢谢。

【问题讨论】：

标签： jquery ajax asp.net-mvc asp.net-web-api bootbox

【解决方案1】：

问题在于 jQuery 按钮。 this.attr("//..")

正确的 jQuery 代码：

            $(document).ready(function () {
            // #entriesDetails - Parent element of a button.
            jQuery("#entriesDetails").on("click", ".btn-delete", function () {

                var button = $(this);

                bootbox.confirm({
                    size: "small",
                    message: "Are you sure you want to delete this post?",
                    callback: function (result) {
                        if (result) {
                            jQuery.ajax({
                                url: "/api/entries/" + button.attr("data-entryId"),
                                method: "DELETE",
                                success: function () {
                                    bootbox.alert("The post is successfully deleted!");
                                    window.location.reload();
                                },
                                error: function () {
                                    bootbox.alert("something goes wrong when attempting delete operation please try again.");
                                    window.location.reload();
                                }
                            });
                        }
                    }
                });
            });

        });

【讨论】：