How to make an HTTP PUT with a param in an ionic 2 app to a WebAPI?

Question

I am trying to make an HTTP PUT with an integer parameter to a MVC WebApi.

I tried to follow the angular 2 guidelines for HTTP PUT: https://angular.io/docs/ts/latest/guide/server-communication.html

My WebApi:

public IHttpActionResult Put([FromBody]int id)
{
   return Ok();
}

My Http PUT in my service in my ionic 2 app:

makePut(){
    let body = JSON.stringify({id:155320});
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
     return new Promise(resolve => {
      this.http.put('API_URL', body, options)
        .subscribe(
          response => {
            console.log(response.text());
          },
          error => {
            //Failed to Login.
            alert(error.text());
            console.log(error.text());
          });
     });
 }

And finally the call to my service from my home page:

this.service.makePut().then(data => {console.log(data);});

When I run this I get a 405 method not allowed. Is there anything I am missing?

UPDATE here is part of the web.config in my web api:

 <system.webServer>
    <security>

    </security>
    <validation validateIntegratedModeConfiguration="false" />
    <modules runAllManagedModulesForAllRequests="true">
      <remove name="WebDAVModule" />
    </modules>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>
    <handlers>
      <remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" />
      <remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" />
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" />
      <add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>

  </system.webServer>

Why did you stringify your body object? "let body = JSON.stringify({id:155320});" instead of "let body = {id:155320};" ? — David Dal Busco, Jul 26 '16 at 17:42
That was what was in the documentation: https://angular.io/docs/ts/latest/guide/server-communication.html But I don't need it. I updated my answer. — MasterProgrammer200, Jul 27 '16 at 12:09

score 1 · Answer 1 · answered Jul 26 '16 at 12:21

It might be Web Api error and you can resolve that by adding this code to your web.config file

<handlers accessPolicy="Read, Script">
   <remove name="WebDAV" />
   <remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" />
   <add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit"
      path="*."
      verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS"
      modules="IsapiModule"
         scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll"
  preCondition="classicMode,runtimeVersionv4.0,bitness64"
  responseBufferLimit="0" />

this article can give you more information about 405 error.

I replaced the handlers in web.config and still got a 405. I also updated my post with the web server section of my web.config. If I change the HTTP call to a POST with no params the Post() method in my web api works fine. It's just the PUT with params that has the problem. Could it be that is something is wrong with the way I am passing the integer param? — MasterProgrammer200, Jul 26 '16 at 12:36

score 0 · Accepted Answer · edited May 23 '17 at 12:02

I was able to fix the problem, which turned out to be a CORS issue. You can view how to disable same origin policy in Chrome here: How to resolve CORS issue and JSONP issue in Ionic2

Once I disabled it in chrome, the HTTP PUT succeed.

Here is my final code:

makePut(){
    let body = 155320;  // this is different
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
     return new Promise(resolve => {
      this.http.put('API_URL', body, options)
        .subscribe(
          response => {
            console.log(response.text());
          },
          error => {
            //Failed to Login.
            alert(error.text());
            console.log(error.text());
          });
     });
 }

How to make an HTTP PUT with a param in an ionic 2 app to a WebAPI?

2 Answers2