How to use the web api url across the mvc application - ajax

Question

here is my piece of sample code
function AuthenticateLogin() {
$.getJSON('http://localhost:52293/api/APILogin/', function (data) {
if (data != null) {
}
}
);
}
The hosting url is below, which will be used across the mvc application, might be the controller/action will be varied across the application.
http://localhost:52293
for example, here i have hard coded the above url in all places, If I'm moving the application to other machine,then it is not good to change the url again in each and every places. so, is there any way to handle this ?

Answer 1

Give your API action a static name:
[RoutePrefix("api/APILogin")]
public class APILoginApiController {
[Route("", Name = "Login")]
public ActionResult Login(string userName) {
// ...
}
}
Then in your Razor JavaScript, you can utilize the UrlHelper by calling Url.HttpRouteUrl to dynamically build your URL for you.
$.getJSON('#Url.HttpRouteUrl("Login", new {})', function (data) {
// ...
});
The advantage of this approach is that if you change anything about how the route is formulated, it's in the [Route] attribute on the action. Matching the name like that will use the routing engine to always create the correct path. Otherwise, you're still stuck with (partial) hard-coded paths throughout your JavaScript.
If your route requires any variables, then that is provided within the empty anonymous object as the second parameter for HttpRouteUrl().

Answer 2

You should not hardcode the full absolute url like that. You may consider using the relative url. To generate relative url, you may consider using the Url helper methods
If your code is inside an external js file, you should consider using the helper method to generate the relative url in your razor view(s) and store it in a js variable which you can use in your external js files.
In your razor view
<script>
var myApp = myApp || {};
myApp.siteBaseUrl = "#Url.Content("~")"; // Get the app root
</script>
Now in your external js files
$.getJSON(myApp.siteBaseUrl+'api/APILogin/', function (data) {
// do something
});
You can also use Url.RouteUrl helper method to generate the urls to the api endpoints. For example
var myApp = myApp || {};
myApp.productsApiUrl = "#Url.RouteUrl("DefaultApi",
new { httproute = true, controller = "Products"})";
Now somewhere else in the js codde, you can use it like
$.getJSON(myApp.productsApiUrl , function (data) {
// do something with products data
});
This approach allows you to pass route values when you make the call and the helper method will build the url for you (based on the route definition)
myApp.productsDetailsUrl = "#Url.RouteUrl("DefaultApi",
new { httproute = true, controller = "Products", id= 210 })";