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 3325 posts 11170 karma points MVP 5x 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 3325 posts 11170 karma points MVP 5x 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 3325 posts 11170 karma points MVP 5x 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 3325 posts 11170 karma points MVP 5x 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 3325 posts 11170 karma points MVP 5x 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!

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies