AngularJS can't find $http.delete target

Question

I have this C# WebAPI 2 project:

[RoutePrefix("api/Account")]
public class AccountController : ApiController
{
    ....

    [HttpDelete]
    [Route("Delete")]
    public async Task<IHttpActionResult> Delete(string password)
    {
        // retrieve the authorized user's username
        // delete the authorized user using his password and username
    }

    ....
}

My HTML form:

  <form class="form-login span4 offset4 register-box" role="form">
    <h2 class="form-login-heading">Delete your account</h2>
    <h2 class="form-login-heading">Warning: this is permanent.</h2>
    <input type="password" class="form-control" placeholder="Password" data-ng-model="deleteConfirmPassword" required>
    <button class="btn btn-lg btn-info btn-block" type="submit" data-ng-click=" deleteAccount()">Delete</button>
</form>

And the controller that's used:

app.controller('accountController', [
    '$scope', '$location', '$http', 'authService',
    function($scope, location, $http, authService) {

        $scope.deleteConfirmPassword = "";

        $scope.deleteAccount = function() {
            $http.delete(authService.serviceBase + 'api/account/Delete/', {
                password: $scope.deleteConfirmPassword
            }).success(function() {
                authService.logOut();
            }).
            error(function(response) {
                var errors = [];
                for (var key in response.data.modelState) {
                    for (var i = 0; i < response.data.modelState[key].length; i++) {
                        errors.push(response.data.modelState[key][i]);
                    }
                }
                $scope.message = "Failed to delete your account due to:" + errors.join(' ');
            });
        };
    }
]);

According to Firebug, the correct URL is called, however no parameters appear to be passed, and I'm getting a 404 error. What am I doing wrong in this code?

JLRishe · Accepted Answer · 2015-03-13 14:36:25Z

1

The second parameter of $http.delete() is a config object, not a data object, so you need to wrap your parameters in another layer. Also, your URL should not actually contain "Delete". That's indicated by the HTTP verb:

$http.delete(authService.serviceBase + 'api/account/', {
    data: { password: $scope.deleteConfirmPassword }
})

edited Mar 13, 2015 at 14:36

answered Mar 13, 2015 at 14:12

JLRishe

102k19 gold badges138 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

yesman Over a year ago

Thanks, I read your link and I made a beginner mistake. However, I'm still getting a 404 error.

JLRishe Over a year ago

@ohyeah I'm curious why you're using [HttpDelete] and [Route("Delete")]. The point of Web API is that it's RESTful and the actions are indicated by the HTTP verbs and the the method names in your controller class. Please try removing those attributes and removing Delete/ from your URL. One additional thing to try is renaming your method from Delete to DeleteUser (or something like that). The method names are supposed to be of the form [verb]..., not just [verb].

Collectives™ on Stack Overflow

AngularJS can't find $http.delete target

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related