Code Ratchet
Code Ratchet

Reputation: 6029

Two post methods in one WebApi controller, results in application not working

I have the following Web Api Controller

public class ImageUploadController : ApiController
{

    [HttpGet]
    public string UploadImage(int id)
    {
        return "Value = " + id;
    }

    [HttpPost]
    public void UploadImage([FromBody] Customer customer)
    {
        string name = customer.company_name;

        string dooda = string.Empty;
    }

    [HttpPost]
    public bool DeleteImage(int id)
    {
        try
        {
            string dooda = string.Empty;

            return true;
        }
        catch (Exception ex)
        {
            return false;
        }
    }
}

The get and post method for UploadImage work but as soon as I add another post i.e DeleteImage neither of the posts work.

I get a 404 Bad Request for both methods.

In my view I have two buttons, one that calls the upload image and the other that calls delete image as shown here

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery-1.11.2.js"></script>
<title></title>
</head>
<body>
<button id="btnPushMe">Push Me</button><br />
<button id="btnDeleteMe">Delete Me</button>
</body>
</html>

<script type="text/javascript">

$('#btnPushMe').click(function () {

    var apiurl = "http://localhost:50793/api/ImageUpload/UploadImage"

    var customer = { customer_name: "Scott", company_name: "HP" };
    $.ajax({
        type: "POST",
        data: JSON.stringify(customer),
        url: apiurl,
        contentType: "application/json"
    });

});

$('#btnDeleteMe').click(function () {

    var apiurl = "http://localhost:50793/api/ImageUpload/DeleteImage"

    $.ajax({
        type: "POST",
        data: { id: "2" },
        url: apiurl,
        contentType: "application/json"
    });

});
</script>

This is my config

config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
        name: "DefaultApi",
        routeTemplate: "api/{controller}/{action}/{id}",
        defaults: new { id = RouteParameter.Optional }
);

Again I'm just playing around with Web Api and trying to learn it as I go so if someone can enlighten me in to why/what I'm doing wrong I'd much appreciate it.

Thanks

Upvotes: 0

Views: 895

Answers (3)

Aravindan
Aravindan

Reputation: 855

In your Code please just remove the contentType: "application/json" on ajax method. Then it will automatically lead u to the controller page.

Please get look on the below code

$('#btnDeleteMe').click(function () {

var apiurl = "http://localhost:50793/api/ImageUpload/DeleteImage"

$.ajax({
    type: "POST",
    data: { id: "2" },
    url: apiurl,

});

Upvotes: 0

Saravanan
Saravanan

Reputation: 7854

You should use JSON.stringify(data), as you are setting the content type as application/json.

You could have passed the value as part of the uri like delete/12 or delete?ID=12.

IMHO, Also, you can use HttpDelete for delete verbs instead of put or post, unless delete is not accepted.

HTH

Upvotes: 0

James World
James World

Reputation: 29776

The route template you are using is a "restful" one that will map to controller actions purely by the HTTP verb. i.e. There is no {action} in the template.

When you add the second post method WebAPI cannot disambiguate the calls.(For example http://localhost:50793/api/ImageUpload/UploadImage and http://localhost:50793/api/ImageUpload/DeleteImage both match api/{controller}/{id} which also matches both action methods. The action isn't specified in your template url.

Using a template like api/{controller}/{action}/{id} would map the urls you are calling with. Note this is then stepping away from a restful approach; which isn't necessarily wrong.

You might also consider adding specific templates - e.g. api/ImageUpload/UploadImage and explicitly set the action in the defaults.

Or you could use attribute based routing which would let you add an attribute directly to the action method with the desired url. This is often better for non-restful style controllers.

Upvotes: 1

Related Questions