Reputation: 6029
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
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
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
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