Calling a Web Api 2 Method using Ajax

Question

I have a Web Api 2 project which I used for a mobile project. I am trying to use the same api's for a web project but am unable to reach them using ajax. I've confirmed that my url is correct and I am able to hit the endpoint from an android project and from fiddler. Am I missing something is my ajax call? I always hit the error function, which returns 'undefined'. I can set a breakpoint in my webapi project and that endpoint is never being hit.

// GET: api/Trips
public IQueryable<Trip> GetTrips()
{
     return db.Trips.Include("Users");
}

jquery

            $.ajax({
                url: 'http://localhost:49669/api/Trips',
                type: 'GET',
                contentType: 'application/json;charset=utf-8',
                success: function (data) {
                    alert("success!!");

                },
                error: function (x, y) {
                    alert(x.response);
                }
            });

PercivalMcGullicuddy · Accepted Answer · 2015-07-20 12:48:31Z

2

You may need to enable CORS if trying to hit your API form a browser.

Step 1, modify your WebApiConfig file (App_Start/WebApiConfig.cs):

using System.Web.Http;
namespace WebService
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Add this line
            config.EnableCors();

            // the rest of your code
        }
    }
}

Step 2, add the [EnableCors] attribute to your Web API controller:

using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Cors;

namespace MyApp.Controllers
{
    [EnableCors(origins: "http://www.whatever.net", headers: "*", methods: "*")]
    public class HelloWorldController : ApiController
    {
        // GET: api/Trips
        public IQueryable<Trip> GetTrips()
        {
          return db.Trips.Include("Users");
         }
    }
}

**Note: ** You may also need to install the CORS nuget package.

Install-Package Microsoft.AspNet.WebApi.Cors

answered Jul 20, 2015 at 12:48

PercivalMcGullicuddy

5,6039 gold badges50 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1145998 Over a year ago

This was exactly it. Thanks!

squill25 · Accepted Answer · 2015-07-18 16:25:41Z

0

contentType is for the content type beint sent to the server; this is the only possible reason I can imagine your code not working since you said it's never actually making the request so it must be some error handling done by jQuery before making the request, and the error is being thrown because you are trying to specify contentType for a GET request.

The property for specifying a response type is dataType. Try changing contentType to dataType?

answered Jul 18, 2015 at 16:25

squill25

1,1988 silver badges20 bronze badges

6 Comments

user1145998 Over a year ago

Thanks for the reply. It also errors when I don't specify a contentType. Do I need to specify if I am not sending a content type at all?

squill25 Over a year ago

No, in fact for GET requests the contentType field should be ignored completely. Are you getting any error messages in the browser debugger?

squill25 Over a year ago

Also in the error function try alerting y since the second parameter is the error status, and add a third parameter which is an error message string (from the docs)

user1145998 Over a year ago

It seems that all I get is 'error' when trying alert(y + z);

user1145998 Over a year ago

Ah ha! I'm getting the error in Chrome: No 'Access-Control-Allow-Origin' header is present on the requested resource. I'm guessing I need something in my web api controller to allow the request

|

Collectives™ on Stack Overflow

Calling a Web Api 2 Method using Ajax

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related