~/ equivalent in javascript

Question

Any smart way of doing a \"root\" based path referencing in JavaScript, just the way we have ~/ in ASP.NET?

Answer 1

Have your page generate a tag with something like:

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

Then, have a function in JavaScript that extracts the value such as:

function getHome(){
    return document.getElementById("ApplicationRoot").href;
}

Answer 2

Solution for ASP.NET MVC applications

This works when using IIS and also IIS Express in VS.

Put this snippet before all scripts load, in order to have the root url variable "approot".

at your service in the scripts:

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

 --> other scripts go here or somewhere later in the page.

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

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

the approot variable will be something either:

"/YourWebsiteName/" <-- IIS

or just:

"/" <-- IIS Express

Answer 3

~/ is the application root and not a literal root, it interpets ~/ to mean <YourAppVirtualDir>/

To do a literal root in JavaScript it's just /, i.e "/root.html". There's no way of getting an application level path like that in JavaScript.

You could hack it in the ASPX file and output it in a tag but I would consider the security implications of that.

Answer 4

You could also use the asp.net feature VirtualPathUtility:

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

Notice: I don't encode the path to a JSON-string (escape quotes, control characters etc). I don't think this is a big deal (quotes for example aren't allowed unescaped in an URL), but one never knows...

Answer 5

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

 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 like this:

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

May be a little much for some projects, but works great for full fledged applications.

Answer 6

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

var rootPath = "/";
image.src = rootPath + "images/something.png";