正确设置 Ajax 相对 URL

Question

I've got a MVC Application divided into areas and when I try to make a AJAX call from the Engineer area, the relative URL get transformed into a URL that does not match my intent;

Here is the example:

This is URL on the Ajax call:

$.ajax({
    cache: false,
    type: 'GET',
    url: 'api/JobData/GetSitesByClientId',
    data: {
        'clientId': selectedClient
    }
})

This is the URL generated:

http://localhost:53433/Engineer/Jobs/api/JobData/GetSitesByClientId?clientId=09659dc4-faa7-4edb-af27-ecb7416a82fb

And this is the URL I wanted to generate:

http://localhost:53433/api/JobData/GetSitesByClientId?clientId=09659dc4-faa7-4edb-af27-ecb7416a82fb

How can I achieve this ?

Thanks in advance for your help

Answer 1

Well you can put a leading slash / at start of the URL. However, I do not recommend this method because if your application gets deployed on a subdirectory (eg: www.host.com/myapp/ ) , then the path would be wrong

What I do in such case is to define a global rootPath variable in the javascript context of my view

Layout

  <script>
    var rootPath = '@Url.Content("~")';
  </script>

Then in Javascript files I append the rootPath to any path i want to use

$.ajax({
    url: rootPath + 'mycontroller/mymethod',
    method: 'GET',
    success:function(){
      alert("success");
    }  

});