JavaScript Cannot reach Action in api Web API 2 Controller in MVC 5 app

I've tried to follow default Web API tutorial: http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api

Here's what I did:

1) I added Action Routing in my WebApiConfig:

config.Routes.MapHttpRoute(
   name: "ActionApi",
   routeTemplate: "api/{controller}/{action}/{id}",
   defaults: new { id = RouteParameter.Optional }
);

2) I added a link on my nav bar with client side javascript call:

<a onclick="RetrieveNext();" target='_blank' href="#">Retrieve next</a>

3) Here's my view:

<div class="row">
    <div class="col-md-4">
        <h2>Next barcode</h2>
        <p id="barcode">
            No available barcode
        </p>
    </div>
</div>

<script>
    var uri = 'api/Barcode';

    $(document).ready(function () {
    });

    function RetrieveNext() {
        uri = 'api/Barcode/RetrieveNext';
        $.getJSON(uri)
            .done(function (data) {
                $('#barcode').text(data);
            })
            .fail(function (jqXHR, textStatus, err) {
                $('#barcode').text('Error: ' + err);
            });
    }
</script>

4) Here's my simple ApiController with 1 Action:

public class BarcodeController : ApiController
{
    [HttpGet]
    public IHttpActionResult RetrieveNext()
    {
        string barcode = "123456";
        if (barcode == null)
        {
        return NotFound();
            }
        return Ok(barcode);
    }
}

When I click my link I'm getting: Error: Not Found inside of my <p id="barcode">, which means JavaScript works, but Action wasn't called.

Here's Call details:

enter image description here

What I missed here? I put breakpoint in my Action and I can't reach this code...

Answer:1

JS function for validation of the brackets in a string

guys! I want to ask you how can a make a function, that checks if the brackets in a string are put correctly. For example "(a + b).4,2 - )c + 5)" and I have to check the brackets. I tried something, ...

Optional function prop in React component Flow type check fail

I am using React's PropTypes and Flow type checker but I am having trouble getting an optional function prop to pass the type check. Here is an example: var Example = React.createClass({ propTypes: ...

react optional function prop
typescript optional function prop
javascript function optional prop

Way to lock a select element after a radio button is selected in jQuery

I have a select drop down filled with options and then I have two radios like so... <form> <select id="drop_down"> <option value="1">One</option> <option value="2"...

Multiple properties for visible ngOption value

I have an object similar to this: $scope.division = [ { name: "Tom", number: 1 }, { name: "Greg", number: 2 } ]; Now in my HTML I'm using ngOption to display a drop down ...