Web API With AJAX: Understand DELETE Verb in Restful Web API

This is the "Web API with AJAX" article series. Here we are learning to call and consume a Web API action using jQuery AJAX method. In our previous articles, we have learned to consume a Web API method using POST, GET and PUT verb. You can visit them by clicking the following URL.

This article provides an example showing the DELETE HTTP verb and how to generate a delete request using the jQuery ajax() function. Previous articles in this series have explained much about API and RESTful service and it's very simple to understand that the Delete operation in CRUD is mapped with the DELETE HTTP verb n terms of RESTful service. So, let's learn it with the example.

Create client code to make DELETE request

Here we will make a DELETE request using the jQuery ajax() function of the Web API. So, here is the code implementation. We are sending a complex object to perform the operation.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="APICall.aspx.cs" Inherits="WebApplication1.APICall" %>  
<head runat="server">  
    <script src="jquery-1.7.1.js" type="text/javascript"></script>  
     <script>  
         $(document).ready(function () {  
             $("#Save").click(function () {  
                 var person = new Object();  
                 person.name = $('#name').val();  
                 person.surname = $('#surname').val();  
                 $.ajax({  
                     url: 'http://localhost:3413/api/person',  
                     type: 'DELETE',  
                     dataType: 'json',  
                     data:person,  
                     success: function (data, textStatus, xhr) {  
                         console.log(data);  
                     },  
                     error: function (xhr, textStatus, errorThrown) {  
                         console.log('Error in Operation');  
                     }  
                 });  
             });  
         });  
    </script>  
</head>  
<body>  
    <form name="form1" id="form1">  
        Name:- <input type="text"  name="name" id="name" />  
        Surname:-<input type="text"  name="surname" id="surname" />  
        <input type="button" id="Save" value="Save Data" />  
    </form>  
</body>  
</html>

So, now we need to implement the API functionality to serve the DELETE request from the client and for that we have implemented a Delete() action attributed as "HttpDelete".

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Net;  
using System.Net.Http;  
using System.Web.Http;  
namespace WebApplication1.WebAPI  
{  
    public class person  
    {  
        public string name { get; set; }  
        public string surname { get; set; }  
    }  
    public class personController : ApiController  
    {  
        [HttpDelete]  
        public string Delete(person data)  
        {  
            return data.name + data.surname;  
        }  
    }  
}

We are halting the application to check whether data is coming or not. Yes, data is coming for the Delete() action.

The success callback function is logging this return value to the console. Here is the output.

DELETE operation by sending parameters in FormBody and FormUri

This example is very similar to the above operation and here we are sending one value through the URI and one value through the form body. Here is the implementation of the client code.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="APICall.aspx.cs" Inherits="WebApplication1.APICall" %>  
<head runat="server">  
    <title></title>  
    <script src="jquery-1.7.1.js" type="text/javascript"></script>  
     <script>  
         $(document).ready(function () {  
             $("#Save").click(function () {  
                 $.ajax({  
                     url: 'http://localhost:3413/api/person?ID=100',  
                     type: 'DELETE',  
                     dataType: 'json',  
                     data: {"":"Sourav Kayal"},  
                     success: function (data, textStatus, xhr) {  
                         console.log(data);  
                     },  
                     error: function (xhr, textStatus, errorThrown) {  
                         console.log('Error in Operation');  
                     }  
                 });  
             });  
         });  
    </script>  
</head>  
<body>  
    <form name="form1" id="form1">  
        <input type="button" id="Save" value="Save Data" />  
    </form>  
</body>  
</html>

The following is the implementation of Web API to accept a parameter from the URI and request:

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Net;  
using System.Net.Http;  
using System.Web.Http;  
namespace WebApplication1.WebAPI  
{  
   public class personController : ApiController  
    {  
        [HttpDelete]  
        public string Delete([FromUri] int ID, [FromBody] String name)  
        {  
            return "Delete Operation" + "ID:- " + ID + "Name:- " + name;  
        }  
    }  
}

Here is sample output of the example above.