使用 ajax 请求从数据库实体框架中删除记录

Question

我是 dotnet 的初学者，并努力做好。 I tried deleting contacts from the database using ajax, javascript and json but the delete button is not working as expected, it is actually hitting the error function in the ajax call. 任何帮助将不胜感激。

我的 controller 是：

public HttpResponseMessage Delete(int id)
    {
        try
        {
            using (ContactDBEntities entities = new ContactDBEntities())
            {
                var entity = entities.Contacts.FirstOrDefault(e => e.ID == id);

                if (entity == null)
                {
                    return Request.CreateErrorResponse(HttpStatusCode.NotFound, "Contact with Id = " + id.ToString() + " is not found to delete");
                }
                else
                {
                    entities.Contacts.Remove(entity);
                    entities.SaveChanges();
                    return Request.CreateResponse(HttpStatusCode.OK);
                }
            }
        }
        catch (Exception ex)
        {
            return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ex);
        }
    }

我的JS是：

        <input id="btnDelete" class="btn btn-danger" type="button" data-model-id="@model.Id" value="Delete Contact" />
    
    $('#btnDelete').click(function () {
                    var FirstName = $('#txtFirstName').val();
                    var LastName = $('#txtLastName').val();
                    var PhoneNumber = $('#txtPhoneNumber').val();
    
                    $.ajax({
                        url: "/api/Contacts/",
                        type: "Delete",
                    }).done(function () {
                        alert("Contact Deleted")
                        txtFirstName.empty();
                        txtLastName.empty();
                        txtPhoneNumber.empty()
                        ulContact();
                    }).error(function () {
                        alert("Failed to delete contact")
                    });
                });

Answer 1

好的，让我们开始查看您的 API。

您有一个名为 Delete 的 function

public HttpResponseMessage Delete(int id) {...}

目前这不是 API 功能。 API function 需要标识符来告诉它它是什么类型。 有许多类型的 API 端点，但我在这里只涉及 4 种： GET 、 POST 、 PUT和DELETE 。

GET - Used to get info
POST - Use to send large amounts of data in the body
PUT - Same as post, but specifically for UPDATE function, like updating user info.
DELETE - To Remove Data.

注意，要告诉您的 API 它是什么类型的端点，您需要添加 HTTP 属性。

[HttpDelete]
public HttpResponseMessage Delete(int id) {...}

现在您的 Delete Function 将能够通过向您的端点发送 DELETE 请求来调用： /api/Contacts/ 。

---

让我们看看 Ajax 调用的外观。

$.ajax({
    url: "/api/Contacts/",
    type: "Delete",
})

因此，您将类型命名为Delete ，该类型以您的 Delete function 命名。 这是不正确的。 它应该是上述类型之一。 巧合的是，上面提到了一种称为DELETE的类型，但应该是大写的。

$.ajax({
    url: "/api/Contacts/",
    type: "DELETE",
})

这应该会给你一个有效的电话。

---

现在我想澄清您对 API 端点的一些误解。 首先是 URL。 端点可以共享一个URL 。 但他们可能不共享URL和TYPE 。 例如，让我们看一下两组示例：

// URL: api/Contacts
// Type: DELETE
[HttpDelete]
public IActionResult Delete(int id) {...}

// URL: api/Contacts
// Type: GET
[HttpGet]
public IActionResult Delete2(int id) {...}

// URL: api/Contacts
// Type: POST
[HttpPost]
public IActionResult Delete3(int id) {...}

同一 controller 上的所有这些 API 端点都可以工作。 请注意，实际的 function 名称并不重要。 仅需要URL和TYPE来识别端点。 在上面的示例中，它们都共享相同的URL ，但具有不同的TYPES 。 让我们看看它们共享相同TYPE但不同 URL 的三个位置：

// URL: api/Contacts/1
// Type: DELETE
[HttpDelete("1")]
public IActionResult Delete(int id) {...}

// URL: api/Contacts/2
// Type: DELETE
[HttpDelete("2")]
public IActionResult Delete2(int id) {...}

// URL: api/Contacts/3
// Type: DELETE
[HttpDelete("3")]
public IActionResult Delete3(int id) {...}

Ajax 语句中的调用 URL 将需要引用正确的 url。 上面我们将("SomeText")添加到[Http..]属性。 您可以为文本键入任何内容，它将更改 url。 当您在同一个 controller 中具有多个功能时很有用。

---

API 的另一个强大功能是指定输入的类型。 在您的 function Delete(int id)中，您将id变量作为Query Parameter传递。 您可能不知道这一点，因为默认输入类型是查询参数，但您可以更改从哪里获取变量。 您应该注意 3 个主要的： [FromQuery] 、 [FromRoute]和[FromBody] 。

下面我将向您展示必须使用 C# 和 Ajax 来使用所有这些：

来自查询

这是您当前正在使用的那个，您在 url 的末尾有? 它显示了接下来是Query Parameters 。 这些很简单： Key=Value 。 如果你想要多个，只需用&分隔它们： Key=Value&Key2=Value2

// C#
[HttpDelete]
public IActionResult Delete([FromQuery] int id) {...}

// AJAX
$.ajax({
    url: "/api/Contacts?id=4",
    type: "DELETE"
})

从路线

现在这是您从 URL 本身获取数据的时候。 您需要注意“{id}”的语法需要与int id匹配，如下所示。

// C#
[HttpDelete("{id}")]
public IActionResult Delete([FromRoute] int id) {...}

// AJAX
$.ajax({
    url: "/api/Contacts/4",
    type: "DELETE"
})

从身体

最后一个是[FromBody] ，但仅在您具有POST或PUT类型时才有效。 GET和DELETE不支持正文。 在发送大型对象或表单数据时非常有用。 虽然对于 forms 最好使用功能相似的[FromForm]标签。

// C#
[HttpDelete]
public IActionResult Delete([FromBody] int id) {...}    

// AJAX
$.ajax({
    url: "/api/Contacts/",
    type: "POST",
    data:{ 
            id: 4 
         }
})