---

Search posts under AngularJS:

---

$http.delete server request in AngularJS

How to delete data from server using HttpDelete method in AngularJS?

In the previous post, we learnt how to Update data on server by sending $http.put method in AngularJS. In this post, we shall learn how to send HttpDelete type request to the server using $http.delete method of AngularJS.

Syntax of $http.delete

The syntax of $http.delete method is following

Syntax for AngularJS v1.3.20

$http.delete(url, data)
.success(data, status, headers, config)
.error(data, status, headers, config);

Where

1. url - is url to send request to
2. data - is data to send along with the request

Syntax for AngularJS v1.4.8 + (v1.5.0)

$http.delete(url, config)
   .then(
       function(response){
         // success callback
       }, 
       function(response){
         // failure call back
       }
    );

The response object has following properties

1. data - it can be either string or an object (inserted object)
2. status - HTTP status ode
3. headers - header information
4. config - configuration that was used to send request
5. statusText - response of HTTP status text

Note:
As in the previous post, we shall use ASP.NET MVC Web API here also to receive the HttpDelete request type.

In below script block, we have created a function called "DeleteData" that creates a data object by retrieving the data from the HTML form text boxes. Next it uses $http.delete method to send the HttpDelete type request to the server. Remaining codes are as simple as in the previous posts.

<script>
    var myApp = angular.module("myApp", []);
    myApp.controller("HttpDeleteController", function ($scope, $http) {

        $scope.DeleteData = function () {

            var data = $.param({
                firstName: $scope.firstName,
                lastName: $scope.lastName,
                age: $scope.age
            });

            $http.delete('/api/Default?' + data)
            .success(function (data, status, headers) {
                $scope.ServerResponse = data;
            })
            .error(function (data, status, header, config) {
                $scope.ServerResponse = htmlDecode("Data: " + data +
                    "\n\n\n\nstatus: " + status +
                    "\n\n\n\nheaders: " + header +
                    "\n\n\n\nconfig: " + config);
            });
        };
    });
</script>

In this HTML block, we are using three textboxes with respecive models and clicking on the Submit button fires DeleteData() function that sends HttpDelete request to the server.

<div ng-app="myApp" ng-controller="HttpDeleteController">
    <h2>AngularJS Delete request </h2>
    <form ng-submit="DeleteData()">
        <p>First Name: <input type="text" name="firstName" ng-model="firstName" required /></p>
        <p>Last Name: <input type="text" name="lastName" ng-model="lastName" required /></p>
        <p>Age : <input type="number" name="age" ng-model="age" required /></p>
        <input type="submit" value="Submit" />
        <hr />
        {{ ServerResponse }}
    </form>
</div>

ASP.NET MVC Web API controller method

As this is the Action method of the ASP.NET MVC Web API controller, so the method name starts with "Delete..." matches the HttpDelete request type sent by $http.delete method and this action method executes that receives the data as parameter and sends it back.

public HttpResponseMessage DeleteDataResponse(string firstName, string lastName, int age)
        {
            string msg = "Deleted: First name: " + firstName +
                " | Last name: " + lastName +
                " | Age: " + age;

            return Request.CreateResponse(HttpStatusCode.OK, msg);
        }

Output

Very Important:
If we send HttpDelete request to the ASP.NET MVC controller with [HttpDelete] attribute, it doesn't work because of the reason specified in previous post, use the solution given in that post to solve the problem.