Ajax Post: 405 Method Not Allowed - asp.net-web-api

Within my API Controller called Payment, I have the following method:
[HttpPost]
public HttpResponseMessage Charge(Payment payment)
{
var processedPayment = _paymentProcessor.Charge(payment);
var response = Request.CreateResponse(processedPayment.Status != "PAID" ? HttpStatusCode.ExpectationFailed : HttpStatusCode.OK, processedPayment);
return response;
}
In my HTML page I have:
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "http://localhost:65396/api/payment/charge",
data: $('#addPayment').serialize(),
dataType: "json",
success: function (data) {
alert(data);
}
});
Whenever I fire the POST, I get
"NetworkError: 405 Method Not Allowed - http://localhost:65396/api/payment/charge"
What am I missing?
Thank you.
UPDATE
Here's the routing information (default)
routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);

Most likely your routing is not configured for the action to be invoked. Hence the request ends up in nowhere and ASP.NET Web API sends a blank-out message "method not allowed".
Can you please update the question with your routing?
UPDATE
As I thought! You are sending to http://localhost:65396/api/payment/charge while you need to send to http://localhost:65396/api/payment - assuming your controller is called PaymentController.
Note that route does not have action.

Turns out I needed to implement CORS support. http://blogs.msdn.com/b/carlosfigueira/archive/2012/02/20/implementing-cors-support-in-asp-net-web-apis.aspx

I had the same problem with my controller.
The only thing which is different is the ending of the URL.
Add "/" to "http://localhost:65396/api/payment/charge" at the end, that helped me

Related

Using AJAX with MVC 5 and Umbraco

I need to use ajax in a partial view to call a function in a mvc controller to return a calculation.
FYI, I am using MVC 5 and Umbraco 7.
I currently have the ajax code within the partial view (will want to move this to a js file at some point).
Here is the ajax code:
function GetTime(name) {
var result = "";
$.ajax({
url: '/TimeDifference/GetTimeDifference',
//url: '#Url.Action("GetTimeDifference", "TimeDifference")',
type: 'GET',
//data: JSON.stringify({ location: name }),
data: ({ location: name }),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: false,
cache: false,
success: function (msg) {
result = msg;
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
}
});
return result;
}
Here is the Controller:
public class TimeDifferenceController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpGet]
public JsonResult GetTimeDifference(string location)
{
DateTime utc = DateTime.UtcNow;
string timeZoneName = GetTimeZoneName(location);
TimeZoneInfo gmt = TimeZoneInfo.FindSystemTimeZoneById("GMT Standard Time");
TimeZoneInfo local = TimeZoneInfo.FindSystemTimeZoneById(timeZoneName);
TimeSpan utcOffset = gmt.GetUtcOffset(utc);
TimeSpan localOffset = local.GetUtcOffset(utc);
TimeSpan difference = localOffset - utcOffset;
return Json(Convert.ToInt16(difference.TotalMinutes),JsonRequestBehavior.AllowGet);
}
}
The above code gives me a 404 Not Found Error:
Request URL:http://localhost:100/TimeDifference/GetTimeDifference?location=BVI&_=1511949514552
Request Method:GET
Status Code:404 Not Found
Remote Address:[::1]:100
If I use:
url: '#Url.Action("GetTimeDifference", "TimeDifference")'
The #Url.Action("GetTimeDifference", "TimeDifference") is Null so it doesn't go anywhere.
I have also tried:
#Html.Hidden("URLName", Url.Action("GetTimeDifference", "TimeDifference"))
...
url: $("#URLName").val()
Url is still Null.
I have added entries in to the Global.asax.cs for routing i.e.
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "TimeDifference", action = "Index", id = UrlParameter.Optional } // Parameter defaults
);
This doesn't seem to do anything.
I have gone through a lot of the questions raised previously and amended as per suggestions but nothing seems to work.
As I am new to this I'm sure it something very simple I am missing.
Many thanks,
HH
Your controller won't be wired automatically, and I don't think the global.asax.cs file will work either. You can either register a custom route for your controller in an Umbraco Startup Handler: https://our.umbraco.org/documentation/reference/routing/custom-routes or you can create your controller as an Umbraco WebApi Controller, which is designed for stuff like this: https://our.umbraco.org/documentation/Reference/Routing/WebApi/.
Umbraco WebAPI controllers get wired in automatically and will return either JSON or XML automatically depending on what the calling client asks for.

Method called a GET instead of POST

I have this 'POST' method
[HttpPost]
[System.Web.Mvc.ValidateAntiForgeryToken]
public HttpResponseMessage UpdateProfile(string sAppUser)
{
MobileProfileModel profileModel= JsonConvert.DeserializeObject<MobileProfileModel>(sAppUser);
using (ucApp = new UserControllerApplication())
{
//this code should match the
bool success = ucApp.UpdateUserProfile(profileModel);
var response = Request.CreateResponse<bool>(HttpStatusCode.Created, success);
string uri = Url.Link("DefaultApi", new { result = success });
response.Headers.Location = new Uri(uri);
return response;
}
}
and i calling it like this AJAX 'POST'
$.ajax({
url: "http://mydomain.com/api/User/UpdateProfile",
data:JSON.stringify(profile),
type: 'POST',
contentType: 'application/json',
//dataType: "json",
async: false,
cache: false,
success: function (data) {
$.blockUI({ message: "Success" });
},
error: function (xhr) {
alert(xhr.responseText);
},
beforeSend: function() {
$.blockUI({ message: $("#ajaxLoader") });
},
complete: function() {
$.unblockUI();
}
});
and im getting this error
<Error>
<Message>
The requested resource does not support http method 'GET'.
</Message>
</Error>
The problem is Im not calling a GET method and the method isnt marked as a GET either. I am not sure what the issue is.
UPDATE
these are my route definitions
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
//specific route for just the public views
routes.MapRoute(
"publicview",
"publicview/details/{userName}",
new { controller = "publicview", action = "details", username = UrlParameter.Optional }
);
routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{action}/{id}",
defaults: new { id = RouteParameter.Optional }
);
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
I am executing a Get method on the same controller and it works, this actually the post of that initial get.
There are two things here, firstly is there any reason why you have used full path in your ajax request and not absolute path ? Is this only for example purpose ? I would recommend you to you absolute path.
Next if you could try this in your ajax call, change the following
url: "http://mydomain.com/api/User/UpdateProfile",
to
url: "/api/User/UpdateProfile/" + profile,
Or else if you want to use the data: attribute in your ajax call use like this
data: {sAppUser: profile},
Let me know if this doesnt help.
i think there 2 are reasons for this error msessage:
your server uri routing routes your request to the wrong method
your ajax request are calling the wrong uri
if you want to be sure for calling POST look take a look via wireshark or try a different tool for post (e.g. curl)
UPDATE
your uri form AJAX reqeust is:
/api/User/UpdateProfile
your uri template is:
api/{controller}/{action}/{id}
I think you get this error because they don't match.
by the way: you should not use post for updating a profile, use PUT with an ID
for example:
$.ajax({
url: "/api/User/UpdateProfile/"+UserID,
data:JSON.stringify(profile),
type: 'PUT',
contentType: 'application/json',
//dataType: "json",
async: false,
cache: false,
success: function (data) {
$.blockUI({ message: "Success" });
},
error: function (xhr) {
alert(xhr.responseText);
},
beforeSend: function() {
$.blockUI({ message: $("#ajaxLoader") });
},
complete: function() {
$.unblockUI();
}
});
and in the controller:
[HttpPut]
[System.Web.Mvc.ValidateAntiForgeryToken]
public HttpResponseMessage UpdateProfile(string sAppUser) // I don't know how to parse the id from uri ;)
{
//find the user by his uniqe ID
MobileProfileModel profileModel= JsonConvert.DeserializeObject<MobileProfileModel>(sAppUser);
using (ucApp = new UserControllerApplication())
{
//this code should match the
bool success = ucApp.UpdateUserProfile(profileModel);
var response = Request.CreateResponse<bool>(HttpStatusCode.Created, success);
string uri = Url.Link("DefaultApi", new { result = success });
response.Headers.Location = new Uri(uri);
return response;
}
}

AJAX call can't find my WebAPI Controller

I have the following AJAX call:
var params = {
provider: "facebook"
};
$.ajax({
url: "http://localhost/taskpro/api/account/ExternalLogin",
data: JSON.stringify(params),
type: "POST",
contentType: 'application/json; charset=utf-8'
})
.done(function (response) {
alert("Success");
});
calling the following WebAPI controller:
public class AccountController : ApiController
{
[HttpPost]
[AllowAnonymous]
public bool ExternalLogin(string provider)
{
return true;
}
}
with the following routemap:
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{action}/{id}",
defaults: new { id = RouteParameter.Optional }
);
When I execute this, fiddler is returning:
{"Message":"No HTTP resource was found that matches the request URI
'http://localhost/taskpro/api/account/ExternalLogin'.","MessageDetail":
"No action was found on the controller 'Account' that matches the request."}
I have several other calls being made to this controller that are working just fine. It's just THIS call that is giving me troubles.
Also, if I remove the parameter in the controller so it's just
public bool ExternalLogin()
and comment out the data line in the ajax, it works fine.
Any ideas why the routing is not working for this call?
I ran across this article:
http://encosia.com/using-jquery-to-post-frombody-parameters-to-web-api/
Basically, WebAPI can't bind to primitive data types like string. You have to either create a model to bind to, or use the [FromBody] attribute. I modified my method to this:
public bool ExternalLogin([FromBody]string provider)
and it's working fine now.

Call web API string parameter

I have this function
[System.Web.Http.HttpGet]
[System.Web.Http.ActionName("StartProcess")]
public object StartProcess(string items)
{
//do stuff
}
trying to call with
$.ajax({
url: '/api/Details/StartProcess',
type: 'get',
contentType: 'application/json',
data: items,
success: function() {
logger.log('Successful', "", "", true);
},
error: function(error) {
var jsonValue = jQuery.parseJSON(error.responseText);
});
Keep getting 404 error. The rest of my calls work but this is the first one that I need to send a parameter.
items is just a comma delimited string.
this is my route info.
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id=Urlameter.Optional }
);
Any ideas what I am missing?
you are getting 404 error because your routing table is not able to resolve the url "/api/Details/StartProcess"
In order to make the WebAPI routing work you need to modify the "MapHttpRoute()" function of route collection and not the "MapRoute()"
So please change the API routing as below (assuming you are using default api) and it should work fine.
routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{action}/{id}",
defaults: new { action = RouteParameter.Optional, id = RouteParameter.Optional }
);
The parameter in Web API needs to follow the parameter in routing config.
In your example the easiest would be to change string items to string id.
Alternatly you could add api/{controller}/{action}/{items} to the route config.
Also, if you don't fancy changing your API route config (which would lead to minor complications with calling simple Get and Put methods) you can change your controller action annotation from
[System.Web.Http.ActionName("StartProcess")]
to
[Route("StartProcess/{items}")]
Also, you'll need to annotate your controller with:
[RoutePrefix("api/details")]

WebApi call fails for other than the default route

I have an Mvc3 project that includes both Mvc and Api controllers. When I run the application without specifying the "controller/action", the "Default" route is selected and the "home/index" page is rendered. When that page runs, an Ajax call is made using url: "api/controller", returning json, which is then used to populate a table on the page.
<script type="text/javascript">
$(function () {
var $products = $("#products");
$.ajax({
url: "api/products",
contentType: "json",
success: function (data) {
$.each(data, function (index, item) {
$products.append("<tr><td>" + item.ProductCode + "</td>" +
"<td>" + item.Description + "</td>");
});
}
});
});
</script>
However, when a request is made to the same page specifying the "controller/action", as in "localhost/home/index", the Ajax call is translated to "/home/api/controller" and of course the request cannot complete or return any results, since the ApiController cannot be found.
public static void RegisterRoutes(RouteCollection routes) {
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapHttpRoute(
"DefaultApi",
"api/{controller}/{id}",
new { id = RouteParameter.Optional }
);
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
Considering that it must be a routing issue, I proceeded to resolve this by adding a route:
routes.MapHttpRoute(
"HomeApi",
"home/api/{controller}/{id}",
new { id = RouteParameter.Optional }
);
This was successful. As was my next change to:
routes.MapHttpRoute(
"AnyApi",
"{folder}/api/{controller}/{id}",
new { id = RouteParameter.Optional }
);
Which also works but leaves me somewhat skeptical as to whether it is the correct way to handle combining WebApi with Mvc.
Is this the correct way to handle this? Or are there better alternatives?
Considering that it must be a routing issue, I proceeded to resolve this by adding a route:
No, that's not a routing issue at all. Your routes are perfectly fine:
public static void RegisterRoutes(RouteCollection routes) {
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapHttpRoute(
"DefaultApi",
"api/{controller}/{id}",
new { id = RouteParameter.Optional }
);
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
Your issue stems from the fact that you have hardcoded the url in your javascript instead of using url helpers to generate it. You should absolutely never hardcode an url inside an ASP.NET MVC application. You should always use url helpers.
So:
<script type="text/javascript">
$(function () {
var $products = $("#products");
var url = '#Url.RouteUrl("DefaultApi", new { httproute = "", controller = "products" })';
$.ajax({
url: url,
success: function (data) {
$.each(data, function (index, item) {
$products.append("<tr><td>" + item.ProductCode + "</td>" +
"<td>" + item.Description + "</td>");
});
}
});
});
</script>
Also notice that I have removed the contentType: 'json' from your AJAX call because first the correct content type is contentType: 'application/json' and second in this case you are not sending any data in the request, so you shouldn't be setting it to application/json.
There's no need to add a route there -- you can specify the API URL so that it will always work:
/api/controller
In some cases you may need to use the Url.RouteUrl helper to create URLs explicitly based on the route (by route name and/or route values). For example, this would specify the route named "DefaultApi" with controller=products:
#Url.RouteUrl("DefaultApi", new { controller = "products" })

Resources