CODEWITHSUNDEEP
asp.netrestroutesasp.net-mvc-4asp.net-web-api
Michael Norgren
Michael Norgren

Reputation: 770

Re-routing API in ASP.NET MVC4 application

I have written an API that uses the standard HTTP Post, Get, Put and Delete attributes and the routing that was configured by VS 2012

routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }

Now I have started developing my Web site using HTML5 and JavaScript and just found out that Delete and Put are not support methods in any browsers. I need to change my Delete to be a Post as well as my Puts.

In order to do so, I need to do either one of the following and I am looking for the 'best practice' advice: 1.) Create another Post method with an added parameter to specify it is a delete

//This is really my delete method
public virtual HttpResponseMessage Post(TEntity entity, bool delete)

2.) Change the routing to use the action name and then name my Post method 'Delete' which would be more meaningful

//New Routing
routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{action}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );

//More meaningful post method
[HttpPost]
public virtual HttpResponseMessage Post(TEntity entity){}

Please note that I want outside users to be able to tie into the API, so that is why I am looking for the best practice advice. Is it common to have the {action} in the API routing?

Thanks in advance

EDIT:

Using Ajax, I hit my Delete method in my API, however my "string id" parameter is null. I have tried two ways to execute this ajax request in my JavaScript. Both are below in the same method:

    function AjaxReq() {
        $.ajax({
            url: 'http://localhost:49482/api/pallets/',
            type: 'delete',
            data: { id: 12 },
            success: function (response) { alert("Success") },
            error: function (response) { alert("Failed:" + response) }
        });
    }

    function httpRequest() {
        var request = new XMLHttpRequest();
        request.open("delete", "http://localhost:49482/api/pallets/", true);
        request.send("id=12");
        alert(request.responseText);
    }

Any suggestions?

Upvotes: 0

Views: 457

Answers (2)

tpeczek
tpeczek

Reputation: 24125

What exactly do you mean by:

Delete and Put are not support methods in any browsers

It is true that the form element supports only POST and GET (there are tunneling based workarounds for this though) but when you are working with RESTful API you are usually making an XMLHttpRequest through JavaScript (for example by using $.ajax) and the XMLHttpRequest supports GET, POST, PUT and DELETE in all the major browsers.

Coming back to your exact question, the approach with reconfiguring the routing to use action names and giving meaningful names to your actions is a much more clear.

UPDATE REGARDING EDIT

The DELETE method requests that the origin server delete the resource identified by the URI. In practice that means that you should put the Id into URL (jQuery does that automatically only for GET method):

function AjaxReq() {
    $.ajax({
        url: 'http://localhost:49482/api/pallets/12',
        type: 'delete',
        success: function (response) { alert("Success") },
        error: function (response) { alert("Failed:" + response) }
    });
}

function httpRequest() {
    var request = new XMLHttpRequest();
    request.open("delete", "http://localhost:49482/api/pallets/12", true);
    request.send();
    alert(request.responseText);
}

This should work correct with default routing.

Upvotes: 2

Aliostad
Aliostad

Reputation: 81660

HTML Spec is separate from HTTP spec. HTML only supports POST and GET. You need to use AJAX to invoke other methods such as HEAD, OPTIONS, DELETE, PUT, PATCH...

Upvotes: 0

Related Questions