~/ equivalent in javascript

Question

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

@Gumbo: It means the application root, and relates to asp.net. — Brian, May 21 '09 at 14:22

score 46 · Accepted Answer · edited May 21 '09 at 14:20

46

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;
}

edited May 21 '09 at 14:20

BenAlabaster

39,070
21
110
151

answered May 21 '09 at 14:18

MiffTheFox

21,302
14
69
94

1

modified the example *slightly* to make it a little less ambiguous – BenAlabaster May 21 '09 at 14:24
Note: To generate the tag, code like this should help: string urlPath = HttpContext.Current.Request.Url.Scheme + "://" + HttpContext.Current.Request.Url.Authority + HttpContext.Current.Request.ApplicationPath; – Brian May 21 '09 at 14:24
5

If you're going to use server-side code to generate the value, why do you need to put it in a element and retrieve it with getElementById? Just do – Grant Wagner May 21 '09 at 14:48
3

Putting it in a tag allows you to keep JS separated from your markup. Of course, web forms throws quite a bit of JS into your markup anyway, so the variable might be easier in that environment. – AaronSieb May 21 '09 at 15:06
1

provides a nice relative path prefix. Note that the head tag must have the runat="server" attribute. – Richard Collette Jun 14 '12 at 16:38

score 39 · Answer 2 · answered May 21 '09 at 14:30

39

Use base tag:

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

...

from now any link use on this page, no matter in javascript or html, will be relative to the base tag, which is "http://www.example.com/myapp/".

answered May 21 '09 at 14:30

Kamarey

10,832
7
57
70

really useful. did not know about this tag. – Vikram May 21 '09 at 17:02
1

awesome, never knew about this tag. See Nilzor's answer below for a dynamic enhancement to this. Great for compatibility between dev and qa environments that have different urls. – Piwaf Apr 02 '12 at 15:05
It should be noted that ASP.NET Web Forms generates relative paths for things like CSS link tags. Applying a base tag like this will mess up those relative paths. I prefer the link method above over JS variables because JS variables can sometimes be overlooked when URLs are rewritten by network infrastructure devices like an F5 BIGIP. href attributes are clearly URLs that such devices can identify easily. – Richard Collette Jun 14 '12 at 16:27
3

Note that the use of the base tag might have its problems, too, see [http://stackoverflow.com/questions/1889076/is-it-recommended-to-use-the-base-html-tag]. – anre Jan 23 '13 at 18:03

score 11 · Answer 3 · answered May 21 '09 at 15:16

11

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...

answered May 21 '09 at 15:16

doekman

18,750
20
65
86

4

The method should be: VirtualPathUtility.ToAbsolute("~/") THis is the best approach, it gives more flexibility since it can be deployed as a virtual directory or as a root web app – Manuel Castro Jun 14 '12 at 16:16

score 8 · Answer 4 · answered May 21 '09 at 14:19

8

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";

answered May 21 '09 at 14:19

RedWolves

10,379
12
49
68

Nilzor · Answer 5 · 2011-09-26T16:14:45.990

6

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

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

This will ensure a correct root path regardless of deployment configuration.

To be fair, this doesn't answer the original question, but it elimiates most needs for getting the root path from javascript. Simply use relative URL's everywhere, without prefixing with slash.

Should you still need to access it from javascript, add an id attribute and use document.getElementFromId() as MiffTheFox suggested - but on the base-tag.

edited Sep 26 '11 at 16:14

answered Sep 26 '11 at 16:04

Nilzor

18,082
22
100
167

I liked this solution however I had to tweak it a little to make it work in Razor. `` The ApplicationPath sometimes ended with a "/" and sometimes it didn't so I added the TrimEnd('/') call. – DanielC Mar 21 '13 at 21:22

score 6 · Answer 6 · answered May 21 '09 at 14:18

6

~/ 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.

answered May 21 '09 at 14:18

Lloyd

29,197
4
84
98

While your definition of ~/ is correct, it's a little defeatist to say there is no way of getting this through javascript, it just takes a little imagination is all. – BenAlabaster May 21 '09 at 14:23
Well one is entirely server side and the other isn't though as I said you `can` bring it through to the client side but I personally wouldn't :) – Lloyd May 21 '09 at 14:26
What security implications could there be in exposing your application root? An attacker already knows that the application root is one of the nesting levels of the page's URL, don't they? – AaronSieb May 21 '09 at 15:10
Yes, I was thinking along the lines of ~/ ending up expanded but that wouldn't happen. – Lloyd May 21 '09 at 15:28

score 5 · Answer 7 · answered Sep 09 '13 at 17:45

Another option that's a bit simpler and more universal would be to take the following:

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

and use Page.ResolveClientUrl like so:

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

then regardless of what subdirectory the urls will always be rendered correctly.

score 2 · Answer 8 · answered Oct 11 '14 at 00:14

The following function will calculate the root of the currently running application. I use it to locate the absolute location of resources, when called from somewhere deep within 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] + "/";
    }

score 2 · Answer 9 · answered Dec 23 '16 at 17:51

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

score 1 · Answer 10 · edited Dec 05 '12 at 22:34

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.

Hitesh.Aneja · Answer 11 · 2013-04-13T23:14:23.103

For ASP.net MVC Razor pages, Create a base tag like below in the <Head> tag

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

and in all your relative javascript URLs, make sure to start without a slash(/) otherwise it will refer from the root.

For ex. create all your urls like

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

or

$http.POST("Account/GetModelList", this, request, this.bindModelList);

score 0 · Answer 12 · answered Jul 31 '14 at 16:05

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

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

See the check box click event in my MVC Application

@Html.CheckBoxFor(m=>Model.IsChecked,  
   new {@onclick=@Url.Content("~/controller/action("+ @Model.Id + ", 1)"), 
   @title="Select To Renew" })

~/ equivalent in javascript

12 Answers12

Linked