Routing not working when sending a DELETE request to an HttpDelete action

Question

I have a ProductsController with only one View - Index.cshtml.

The following 3 action methods are inside of this controller:

//http://localhost:55555/products
[HttpGet]
public IActionResult Index()
{
}

//http://localhost:55555/products
[HttpPost]
public IActionResult Index(ProductViewModel product)
{
}

//http://localhost:55555/products/1
[HttpDelete("{id}")]
public IActionResult Index([FromRoute] int id)
{
}

Get works perfectly fine when I go to /products. Post works perfectly fine when I create a new product using /products. Delete does not work at all, I am getting a 404 not found for /products/9. I am using a standard AJAX request w/ type: DELETE.

I am using the default MVC conventional routing settings:

        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");

Here is what my AJAX Request looks like:

$(".js-delete-product").click(function () {
    $.ajax({
        type: "DELETE",
        url: "products/" + $(this).data("id"),
        success: onDeleteSuccess
    });
});

I also tried sending a DELETE request in postman to http://localhost:55555/products/1 to make sure it wasn't my jquery ajax and still 404 not found.

UPDATE: If I send a DELETE request to just http://localhost:55555/products it goes into the function, but as you would expect the id param is set to null. Any idea why this is happening? I only want it to go into the delete method if a param is passed, but when a param is passed it doesn't go in (404 not found).

Answer 1

Include the route parameter for id on the [HttpDelete] attribute:

[HttpDelete("{id}")]
public IActionResult Index([FromRoute] int id)
{
}