Not found when calling POST ActionResult

Question

I have the below script to delete an item and I call that function when I click the button.

Jquery

function deleteGadget(guid) {
    if (confirm("Delete selected gadget?")) {
        $.ajax({
            url: "/ManageGadget/Delete?id=" + guid,
            type: "POST",
            success: function (data) {
                if (data.message == "1") {
                    alert("Deleted");
                } else {
                    alert("Something is wrong");
                }
            }
        });
    }
}

Action Method

[HttpPost]
public void Delete(string id) {
    repo.DeleteGadget(id);
}

Button

<button type="button" class="btn btn-danger btn-xs" 
    onclick="deleteGadget('84640690-9563-418A-AF68-D1823D5EB23D');">
    <span class="glyphicon glyphicon-trash"></span>
</button>

But, everytime I click the button it returns me a 404 error.

GET http://gadgetsitecore/sitecore/service/notfound.aspx?item=%2fmanagegadget%2fdelete&user=extranet%5cAnonymous&site=website 404 (Not Found)

I have the below RouteConfig

routes.MapRoute(
    name: "Default",
    url: "{controller}/{action}/{id}",
    defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);

Any idea?

Answer 1

You should add the correct controller name to your routing, in your routing table, what you have right now is Home controller only:

routes.MapRoute(
    name: "Default",
    url: "{controller}/{action}/{id}",
    defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);

but in your ajax call you are calling another controller called ManageGadget:

url: "/ManageGadget/Delete?id=" + guid

so you need to add another route like this :

routes.MapRoute("ManageGadget", "ManageGadget/Delete",
new {controller = "ManageGadget", 
action ="Delete",
id=UrlParameter.Optional});