Routing not working when sending a DELETE request to an HttpDelete action
<p>I have a ProductsController with only one View - Index.cshtml.</p>

<p>The following 3 action methods are inside of this controller:   </p>

<pre><code>//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)
{
}
</code></pre>

<p>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.</p>

<p>I am using the default MVC conventional routing settings:</p>

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

<p><strong>Here is what my AJAX Request looks like:</strong></p>

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

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

<p><strong>UPDATE:</strong>
If I send a DELETE request to just <a href="http://localhost:55555/products" rel="noreferrer">http://localhost:55555/products</a> 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).</p>