Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Jason Espin 368 posts 1335 karma points
    Jan 21, 2015 @ 10:39
    Jason Espin
    0

    WebApi - 405 not allowed when called via Ajax

    Hi all,

    I have been following this guide on implementing a WebApi controller:

    http://our.umbraco.org/documentation/Reference/WebApi/

    On my page is a button which when clicked by the user triggers and Ajax call to my controller which returns an array of dates. This array of dates is then used to populate a datepicker. The problem I have however is when I click the button and trigger the process I get the following error in Firebug:

    405 Method Not Allowed 256ms "NetworkError: 405 Method Not Allowed - http://localhost:60282/umbraco/Api/Products/GetProductAvailability"

    When looking at the response method I get is

    {"Message":"The requested resource does not support http method 'POST'."}

    The following is my controller called ProductsController

    public class ProductsController : UmbracoApiController
    {
        [HttpPost]
        public IEnumerable<string> GetProductAvailability()
        {
            return new[] { "9-5-2015", "14-5-2015", "15-5-2015" };
        }
    }
    

    The code for the button is as follows:

    <div class="col-md-4">
       <button class="btn btn-block btn-warning" id="checkAvailability" data-tourmaster="@Model.Content.GetPropertyValue("packageCode")">BOOK NOW</button>
        </div>
    

    And the Javascript call I make when the button is clicked is as follows:

    $(document).ready(function () {
        $('#checkAvailability').click(function () {
            $.ajax({
                type: 'POST',
                url: '/umbraco/Api/Products/GetProductAvailability',
                data: { 'packageCode': $(this).data('tourmaster') },
                dataType: 'json',
                success: function (result) {
                    var availableDates = result;
                    $('#datepicker').datepicker({ beforeShowDay: available });
                },
                complete: function () {
                    $('ajaxTrigger').css('display', 'block');
                }
            })
        });
    });
    

    My question is why am I receiving this error and how do I circumvent it?

    Any help would be greatly appreciated.

  • Dave Woestenborghs 3504 posts 12133 karma points MVP 8x admin c-trib
    Jan 21, 2015 @ 10:53
    Dave Woestenborghs
    0

    This first thing i see is in your ajax you pass data to your api. 

    Your API method however doesn't have any parameters. I think this is the problem.

     

    Dave

  • Jason Espin 368 posts 1335 karma points
    Jan 21, 2015 @ 11:09
    Jason Espin
    0

    Sorry that was a typo above. I am actually doing the following:

    public class ProductsController : UmbracoApiController
    {
        [HttpPost]
        public IEnumerable<string> GetProductAvailability(int packageCode)
        {
            return new[] { "9-5-2015", "14-5-2015", "15-5-2015" };
        }
    }
    
  • Dave Woestenborghs 3504 posts 12133 karma points MVP 8x admin c-trib
    Jan 21, 2015 @ 11:28
    Dave Woestenborghs
    1

    All code looks okay to me.

    From which namespace is the HttpPost attribute. I know there is one in System.Web.Mvc and there is one in System.Web.Http. For API controllers you need the last one.

     

    Dave

  • Jason Espin 368 posts 1335 karma points
    Jan 21, 2015 @ 11:39
    Jason Espin
    0

    Well that has made some difference. It must have been using the former as now after explicitly declaring:

    [System.Web.Http.HttpPost]

    I now get a 404 when clicking the button:

    "NetworkError: 404 Not Found - http://localhost:60282/umbraco/Api/Products/GetProductAvailability"

  • Jason Espin 368 posts 1335 karma points
    Jan 21, 2015 @ 11:47
    Jason Espin
    0

    I've solved part of the issue somewhat by appending this:

    public IEnumerable<string> GetProductAvailability([FromBody]int packageCode)
    

    However, I am now presented with a 400 error:

    "NetworkError: 400 Bad Request - http://localhost:60282/umbraco/Api/Products/GetProductAvailability"
    

    With the following response:

    {"Message":"The request is invalid.","MessageDetail":"The parameters dictionary contains a null entry for parameter 'packageCode' of non-nullable type 'System.Int32' for method 'System.Collections.Generic.IEnumerable`1[System.String] GetProductAvailability(Int32)' in 'IcelandMountainGuides_Prototyping.Controllers.ProductsController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter."}

  • Dave Woestenborghs 3504 posts 12133 karma points MVP 8x admin c-trib
    Jan 21, 2015 @ 11:51
    Dave Woestenborghs
    0

    Are you passing in any data in your request. This error would occur if the packageCode parameter is empty or is not a integer.

  • Jason Espin 368 posts 1335 karma points
    Jan 21, 2015 @ 11:56
    Jason Espin
    0

    Yeah I am. I'm passing a value of 100 as shown below:

    enter image description here

  • Dave Woestenborghs 3504 posts 12133 karma points MVP 8x admin c-trib
    Jan 21, 2015 @ 12:05
    Dave Woestenborghs
    0

    Can you remove the frombody attribute from the parameter.

    And update your ajax call data property like this :

    data : "packagecode=" + $(this).data('tourmaster')

     

    Dave

  • Jason Espin 368 posts 1335 karma points
    Jan 21, 2015 @ 12:34
    Jason Espin
    101

    I've solved the issue. If you notice I am passing JSON in my Javascript request and unlike a surface controller, WebAPI seems incapable of breaking it down into its individual values so I had to define an model of sorts and pass that instead:

    public class ProductsController : UmbracoApiController
    {
        [System.Web.Http.HttpPost]
        public string[] GetProductAvailability([FromBody] Tour tour)
        {
            return new[] { "9-5-2015", "14-5-2015", "15-5-2015" };
        }
    }
    
    public class Tour
    {
        public int packageCode { get; set; }
    }
    
  • Dave Woestenborghs 3504 posts 12133 karma points MVP 8x admin c-trib
    Jan 21, 2015 @ 12:41
    Dave Woestenborghs
    0

    Nice to see you got it sorted out.

    Dave

  • Jason Espin 368 posts 1335 karma points
    Jan 21, 2015 @ 13:38
    Jason Espin
    0

    Yep. Thanks for your help!

Please Sign in or register to post replies

Write your reply to:

Draft