AngularJS, ASP.Net MVC, jQuery AJAX, MVC WebAPI

Delete Functionality : REST API with AngularJS $resource and jQuery-Ajax

For every Web Application , an important feature is Delete Functionality . We can not think a single app without it . But we already know how to develop DELETE Functionality inside a Web App . Then why is this article for?

Well , that’s true . But now , we will see how we can develop DELETE Functionality with $resource of AngularJS and/or also with jQuery . and for both cases , we have a REST URL of the server which is doing the real back-end thing .

Lets jump…

First lets see the Server code of REST API Delete Functionality . Here I have used .Net WebAPI . And the Method looks like below :::

public HttpResponseMessage Delete(int id)
        {
            //Delete Related Logics + Data Access calling etc
            return Request.CreateResponse(HttpStatusCode.OK);
        }

Now lets see the client side function of DELETE which is using AngularJS $resource .

$scope.delete = function() {
        $resource('api/Ticket/:id').delete({ id: $scope.ticket.Id }, function (data) {
            alert('Succeeded');
        });
    };

We can do the same thing by jQuery also , if we do not use AngularJS . But after learning AngularJS , you will never use jQuery 🙂 For jQuery lovers , we can do this like below with jQuery Ajax:::

$scope.delete = function () {
        $.ajax({
            url: 'api/Ticket/' + $scope.ticket.Id,
            type: 'DELETE',
            success: function (data) {
                alert('Succeeded');
            },
            error: function (x, y, z) {
                alert('Failed');
            }
        });
    };

Well , Thanks . Hope , you liked it .If you do , please share / subscribe …

Cheers 🙂

Standard