How to get a list from WebApi controller using jquery ajax

Question

I have this controller that returns correct results when I call it from a browser.

public async Task<IHttpActionResult> Get(string Id)
{
    if (Id == null)
        return BadRequest();

    try
    {
        var items = await obj.GetItems(Id);
        return Ok(items.ToList());
    }
    catch (Exception e)
    {
        return Content(HttpStatusCode.BadRequest, e.Message);
    }
}

In my view, I have this jquery.

    $.ajax({
        type: 'GET',
        url: url,
        dataType: 'json',
        data: {
            Id: "5AE158",
        },
        success: function (data) {
            alert('success');
        },
        error: function (x) {
            alert("error");
        }
    });

When I trigger the function from the UI, I hit a breakpoint in the Controller and I see that it returns correct results, but in the view control flows to the error handler.

I experimented with many combinations of dataType, type and function signatures but I'm not able to get a success return value.

Any help is appreciated.

"the view control flows to the error handler". You mean the JavaScript/AJAX code goes to the error handler? Obvious question...what was the error? We can't guess it. If you want some help, you'll need to know what the issue is. Just saying it doesn't work isn't enough info. The code on its own looks ok, so we need more detail. Since your code doesn't report it to the user (fair enough, they don't want to see techincal stuff), you'll need to look in your browser's console, and possibly the network tab too, to find the error and/or whatever status and response was returned by the ajax call. — ADyson, Aug 31 '18 at 21:32
Please describe if execption is server or client side, and what is the content of this exeception. — IT Man, Aug 31 '18 at 21:36
What is the response you get in your Developer Tools > Network tab > [your-endpoint] > Response tab ? Are you getting `Status Code: 200 OK` in the Headers tab or not? Because the ajax call will go to err if status !== 200 — Iskandar Reza, Aug 31 '18 at 22:32

score 0 · Answer 1 · answered Sep 01 '18 at 14:21

Thanks to all that responded for the clues that helped me solve this. I looked in the console and saw the error message "No 'Access-Control-Allow-Origin' header is present on the requested resource".

What wasn't clear in my question was that the url I was trying to reach was on a different server and I was encountering this problem.

Thanks for the help.

How to get a list from WebApi controller using jquery ajax

1 Answers1