Best IT Recipes

~ / equivalent in javascript

Is there any smart way to make the "root" path reference JavaScript, just like we have ~/ in ASP.NET?

+42
javascript web-applications relative-path
May 21 '09 at 2:16
source share
12 answers

Do your site create a tag with something like:

 <link rel="home" id="ApplicationRoot" href="http://www.example.com/appRoot/" />

Then you have a function in JavaScript that retrieves the value, for example:

 function getHome(){ return document.getElementById("ApplicationRoot").href; }
+43
May 21 '09 at 2:18
source share

Use the base tag:

 <head> <base href="http://www.example.com/myapp/" /> </head>

...

now any use of links on this page, whether in javascript or html, will refer to the base tag, which is " http://www.example.com/myapp/ ".

+36
May 21 '09 at 2:30 p.m.
source share

You can also use the asp.net VirtualPathUtility function:

 <script> var basePath = '<%=VirtualPathUtility.ToAbsolutePath("~/")%>'; </script>

Note. I do not encode the path to JSON- string (escape quotes, escape characters, etc.). I don’t think this is a big deal (quotes, for example, are not allowed without binding to the URL), but no one knows ...

+9
May 21 '09 at
source share

Usually I create a variable at the top of the js file and assign it the root path. Then I use this variable when referencing the file.

 var rootPath = "/"; image.src = rootPath + "images/something.png";
+7
May 21 '09 at
source share

~ / is the root of the application, not the literal root, it interprets ~ / as meaning <YourAppVirtualDir>/

To make the letter root in JavaScript, this is simply /, ie "/root.html". There is no way to get this way at the application level like in JavaScript.

You can hack it in an ASPX file and put it in a tag, but I would consider the security implications.

+6
May 21 '09 at 14:18
source share

Kamarey's answer can be improved to support a dynamic base path:

 <head> <base href="http://<%= Request.Url.Authority + Request.ApplicationPath%>/" /> </head>

This will provide the correct root path regardless of deployment configuration.

To be fair, this does not answer the original question, but eliminates most of the needs for getting the root path from javascript. Just use relative URLs everywhere, without a slash prefix.

If you still need to access it from javascript, add the id attribute and use document.getElementFromId() , as suggested by MiffTheFox, but in the base tag.

+5
Sep 26 '11 at 16:04
source share

Another option, which is slightly simpler and universal, would be as follows:

 <script src="/assets/js/bootstrap.min.js"><script>

and use Page.ResolveClientUrl as follows:

 <script src='<%=ResolveClientUrl("~/assets/js/bootstrap.min.js")%>'></script>

then no matter which subdirectory the URLs will always be displayed in.

+4
Sep 09 '13 at 17:45
source share

The following function will calculate the root of the current application. I use it to determine the absolute location of resources when called from somewhere deep inside the application tree.

  function AppRoot() { // // Returns the root of the currently running ASP application. // in the form: "http://localhost/TRMS40/" // // origin: "http://localhost" // pathname: "/TRMS40/Test/Test%20EMA.aspx" // // usage: // window.open( AppRoot() + "CertPlan_Editor.aspx?ID=" + ID); // var z = window.location.pathname.split('/'); return window.location.origin + "/" + z[1] + "/"; }
+2
Oct 11 '14 at 0:14
source share

In the PreRender of your .NET base page, add the following:

  protected override void OnPreRender(EventArgs e) { base.OnPreRender(e); if (Page.Header != null) { //USED TO RESOLVE URL IN JAVASCRIPT string baseUrl = String.Format("var baseUrl='{0}';\n", HttpContext.Current.Request.ApplicationPath); Page.Header.Controls.Add(new LiteralControl(String.Format(Consts.JS_TAG, baseUrl))); } }

Then, in your global JavaScript function, add the following:

  function resolveUrl(url) { if (url.indexOf("~/") == 0) { url = baseUrl + url.substring(2); } return url; }

Now you can use it as follows:

  document.getElementById('someimage').src = resolveUrl('~/images/protest.jpg');

It may be a little for some projects, but great for full-fledged applications.

+1
Mar 17 2018-11-11T00:
source share

Solution for ASP.NET MVC Applications

This works when using IIS as well as IIS Express in VS.

Place this snippet before loading all scripts to have the root url variable "approot".

at your service in scripts:

 <script> var approot = "@Url.Content("~")"; </script> --> other scripts go here or somewhere later in the page.

Then use it in a script or script page. Example:

 var sound_root_path = approot + "sound/"; var img_root_path = approot + "img/";

helper variable will either:

"/ YourWebsiteName /" <- IIS

or simply:

"/" <- IIS Express

+1
Dec 23 '16 at 17:51
source share

For ASP.NET MVC Razor pages, create a base tag as shown in the <Head> tag below

 <base href="http://@Request.Url.Authority@Request.ApplicationPath" />

and in all your relative JavaScript urls, be sure to start without a slash (/), otherwise it will refer to the root.

For example, create all your URLs, for example

 "riskInfo": { url: "Content/images/RiskInfo.png", id: "RI" },

or

 $http.POST("Account/GetModelList", this, request, this.bindModelList);
0
Apr 13 '13 at 20:27
source share

If you want to use it in HTML, you can use ~, see this

  href = @Url.Content("~/controllername/actionName")

Pay attention to the event with a click in the MVC application

 @Html.CheckBoxFor(m=>Model.IsChecked, new {@onclick=@Url.Content("~/controller/action("+ @Model.Id + ", 1)"), @title="Select To Renew" })
0
Jul 31 '14 at 16:05
source share


More articles:


All Articles