jquery ajax - calling my asp.net web api gives a wrong url and a 404 not found message

ajax, asp.net-mvc, asp.net-web-api, javascript, jquery

Solution

What I ended up doing is in my layout html I've added a js var:

var baseUrl = '@Url.Content("~/")';

then on my ajax call I've added that base url:

$.ajax({
    url: baseUrl + 'api/getdetails',
    accepts: 'application/json',
    cache: false,
    type: 'GET',
    success: function (data) {
        alert(data);
    }
});

this does the trick no matter how the page looks like. even if I navigate to `http://localhost/mysite/home/index`

It's probably not the perfect solution, and I definitely think the old webforms way which worked was better - but I guess there are pros and cons to any technology.

Still would be happy to hear if someone has a better solution. for now - this does the trick.

Problem

I'm writing a small ASP.NET MVC site which also includes a WEB API in it that I wrote. I've configured the project on my local IIS as `http://localhost/mysite` On the main page of my site I'm including a js script that I wrote: ``` <script src="@Url.Content("~/Content/js/home.js")"></script> ``` on the page ready event of that js I call: ``` $.ajax({ url: 'api/getdetails', accepts: 'application/json', cache: false, type: 'GET', success: function (data) { alert(data); } }); ``` when looking with Fidler I see that the page call returns a 404 since it doesn't try to load it to the relative path I'm in (`http://localhost/mysite`) and it tries to load the root of the server - so the call looks like this `http://localhost:80/api/getdetails` when I was writing web forms I used to do ajax calls such as this all the time and it always worked. what am I missing? Thanks

Original source