0

I'm trying to use ASP.NET Web API DELETE to remove a record from a database.

Here is the jQuery AJAX call:

var row = $(dom).closest("tr");
var text = row.find(".tId").text();
var tId = +(text);

//HTTP DELETE method
$.ajax({
    url: 'api/transaction/delete',
    type: 'DELETE',
    data: {
        'id': tId
    },
    success: function (result) {
        //Success logic
        //Refresh table?
        console.log("Successfully deleted transaction " + tId);
    },
    error: function () {
        console.log("Error deleting transaction");
    }
});

Here is the controller code:

    [HttpDelete]
    [Route("api/transaction/delete/{id}")]
    public HttpResponseMessage Delete(int id)
    {
        if (DataLayer.DataLayer.DeleteTransaction(id))
        {
            return Request.CreateResponse(HttpStatusCode.OK);
        }
        else
        {
            return null;
        }
    }

And the Http routing from Global.asax.cs

 RouteTable.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = System.Web.Http.RouteParameter.Optional }
        );

Looking at the request in Fiddler, the error returned says The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.String Get(Int32)' in 'SemanticUI_Playground.Controllers.TransactionController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.

What's odd though is that - also in Fiddler - I can see the the request has id=1045.

I've obviously not done something correct; my guess is with the routing. If I change the AJAX request URL to api/transaction rather than api/transaction/delete I get a different error (to the effect of DELETE is not supported or similar).

Removing the id parameter altogether means that the breakpoint in TransactionController is met, but obviously useless!

I understand this is a bit ham-fisted (this project is just a personal one to teach myself about web development), please accept my apologies for my obvious lack of understanding!

Marcos Foster
  • 67
  • 1
  • 4
  • 2
    Why are you including the action being performed into the route to begin with? If you're trying to be RESTful, then the URL should not mention "delete"--only the HTTP verb should. – Kenneth K. Feb 13 '18 at 17:17
  • What happens if you send your delete request to `'/api/transaction/delete/' + tId` instead of attaching the data to the body? What happens if you put the [FromBody] attribute on the int id parameter of your delete method (`public HttpResponseMessage Delete([FromBody]int id)`) and send the request as is? – Jonathon Chase Feb 13 '18 at 17:19
  • There are many, many questions about this error, have you tried searching for any. For instance, [this one](https://stackoverflow.com/q/23245365/215552), [this one](https://stackoverflow.com/q/37808529/215552), [and many more](https://stackoverflow.com/search?q=The+parameters+dictionary+contains+a+null+entry+for+parameter+%27id%27) – Heretic Monkey Feb 13 '18 at 17:20
  • Your route specifies that the ID should be in the *URL* not the body. Change the url of your `$.ajax` call to `url: 'api/transaction/delete/' + tId` – Panagiotis Kanavos Feb 13 '18 at 17:24
  • 2
    Adn yes, your route should be `api/transaction/{id}`. In fact, you shouldn't even have to specify it with a RouteAttribute since it's the default route (provided your controller is named TransactionController). By adding routes in multple places, putting the verb in the URL you made it harder to detect the actual error – Panagiotis Kanavos Feb 13 '18 at 17:27

1 Answers1

2

The benefit of adding in the different type of requests is that you don't need to have multiple URLs to perform actions; you call them via the request type (DELETE, GET, POST etc). What I would do in the example you gave is remove the additional routing you've declared with [Route("api/transaction/delete/{id}")] and call it using:

$.ajax({
    url: '/api/transaction/' + tId,
    type: 'DELETE',
    success: function (result) {
        //Success logic
        //Refresh table?
        console.log("Successfully deleted transaction " + tId);
    },
    error: function () {
        console.log("Error deleting transaction");
    }
});

Or similarly keep the code route and send the request to '/api/transaction/delete/' + tId.

I've found that you will also need to register the attribute routing with RouteTable.Routes.MapHttpAttributeRoutes in your Global.asax.cs before your MapHttpRoute call. Check this out for a bit of guidance on that (ordering of the registration code is important!)

Richard Ockerby
  • 465
  • 5
  • 14