使用 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 
         }
})