How can I find out JS about the root of the application?

Question

I have javascript that references /jobs/GetIndex in an MVC project. This works fine when I run it locally because I have a Controller called JobsController . When I deploy it, I deploy the application to the “Jobs” subfolder, which means that the URL should be http://site/jobs/jobs/GetIndex , but it will be http://site/jobs/GetIndex , I suppose , because javascript does not know what the "root URL" is, and uses the site as the root. How can I make it work in both environments?

Answer 1

If you just need to get the URL of the root / base of the site to add it to get a different URL, you can just use / as the first character of your URL.

 var urlToJobIndex2= "/jobs/GetIndex"; 

---

Below is an alternative approach if you want more than just the root of the application (for example: special URLs (built using mvc helper methods like Url.RouteUrl , etc.)

You can use the Url.Content helper method in your razor mode to generate a URL in the application database, assign it to a javascript variable, and use it in another js code to create other URLs. Always avoid using the javascript namespace in this case to avoid possible problems with javascript global variables.

If you want to get the URL of a specific action method, you can use the Url.Action or Url.RouteUrl helper methods.

So, in your razor mode (layout file or specific view) you can do this.

 <script> var myApp = myApp || {}; myApp.Urls = myApp.Urls || {}; myApp.Urls.baseUrl = '@Url.Content("~")'; myApp.Urls.jobIndexUrl= '@Url.Action("GetIndex","jobs")'; </script> <script src="~/Scripts/PageSpecificExternalJsFile.js"></script> 

And in your PageSpecificExternalJsFile.js file you can read it as

 var urlToJobIndex= myApp.Urls.jobIndexUrl; // Or With the base url, you may safely add the remaining url route. var urlToJobIndex2= myApp.Urls.baseUrl+"jobs/GetIndex"; 

Here is a detailed answer about the same, but using this in a specific page / view

Angular js

You may need the correct relative url in your controller / services / angular directives. The same approach will work for your angular code. Just create a js namespace object and use the angular value provider to pass data to your angular controllers / services / directives as described in this post in detail with sample code.

Answer 2

Add <base href="/jobs"> to your header tag. He will determine the root.

The following is explained https://docs.angularjs.org/guide/ $ location