~/ 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
– Brian, Commented May 21, 2009 at 14:22

BenAlabaster · Accepted Answer · 2009-05-21 14:20:59Z

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, 2009 at 14:20

BenAlabaster

40k22 gold badges115 silver badges152 bronze badges

answered May 21, 2009 at 14:18

MiffTheFox

21.6k14 gold badges73 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

BenAlabaster Over a year ago

modified the example slightly to make it a little less ambiguous

Brian Over a year ago

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;

Grant Wagner Over a year ago

If you're going to use server-side code to generate the value, why do you need to put it in a <link> element and retrieve it with getElementById? Just do <script>var home = '<%= HttpContext.Current.Request.Url.Scheme + "://" + HttpContext.Current.Request.Url.Authority + HttpContext.Current.Request.ApplicationPath %>';</script>

AaronSieb Over a year ago

Putting it in a <link> 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.

Richard Collette Over a year ago

Kamarey · Accepted Answer · 2009-05-21 14:30:52Z

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, 2009 at 14:30

Kamarey

11.1k7 gold badges60 silver badges70 bronze badges

4 Comments

Vikram Over a year ago

really useful. did not know about this tag.

Piwaf Over a year ago

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.

Richard Collette Over a year ago

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.

anre Over a year ago

Note that the use of the base tag might have its problems, too, see [stackoverflow.com/questions/1889076/….

doekman · Accepted Answer · 2009-05-21 15:16:24Z

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, 2009 at 15:16

doekman

19.4k20 gold badges71 silver badges89 bronze badges

1 Comment

Manuel Castro Over a year ago

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

RedWolves · Accepted Answer · 2009-05-21 14:19:57Z

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, 2009 at 14:19

RedWolves

10.4k12 gold badges51 silver badges69 bronze badges

Comments

Lloyd · Accepted Answer · 2009-05-21 14:18:12Z

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, 2009 at 14:18

Lloyd

29.7k5 gold badges89 silver badges100 bronze badges

4 Comments

BenAlabaster Over a year ago

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.

Lloyd Over a year ago

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 :)

AaronSieb Over a year ago

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?

Lloyd Over a year ago

Yes, I was thinking along the lines of ~/ ending up expanded but that wouldn't happen.

Nilzor · Accepted Answer · 2011-09-26 16:14:45Z

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, 2011 at 16:14

answered Sep 26, 2011 at 16:04

Nilzor

18.7k24 gold badges105 silver badges173 bronze badges

1 Comment

DanielC Over a year ago

I liked this solution however I had to tweak it a little to make it work in Razor. <base href="http://@((Request.Url.Authority + Request.ApplicationPath).TrimEnd('/'))/" /> The ApplicationPath sometimes ended with a "/" and sometimes it didn't so I added the TrimEnd('/') call.

Jeremy · Accepted Answer · 2013-09-09 17:45:53Z

5

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.

answered Sep 9, 2013 at 17:45

Jeremy

811 silver badge9 bronze badges

Comments

Graham Epps · Accepted Answer · 2014-10-11 00:14:31Z

2

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] + "/";
    }

answered Oct 11, 2014 at 0:14

Graham Epps

1014 silver badges3 bronze badges

Comments

Legends · Accepted Answer · 2016-12-23 17:51:57Z

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

answered Dec 23, 2016 at 17:51

Legends

22.9k17 gold badges102 silver badges133 bronze badges

Comments

Peter O. · Accepted Answer · 2012-12-05 22:34:19Z

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 · Accepted Answer · 2013-04-13 23:14:23Z

0

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

<base href="http://@[email protected]" />

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

edited Apr 13, 2013 at 23:14

answered Apr 13, 2013 at 20:27

Hitesh.Aneja

3,5433 gold badges20 silver badges14 bronze badges

Comments

Ali Adravi · Accepted Answer · 2014-07-31 16:05:47Z

0

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 {@[email protected]("~/controller/action("+ @Model.Id + ", 1)"), 
   @title="Select To Renew" })

answered Jul 31, 2014 at 16:05

Ali Adravi

23k9 gold badges93 silver badges97 bronze badges

Collectives™ on Stack Overflow

~/ equivalent in javascript

12 Answers 12

5 Comments

4 Comments

1 Comment

Comments

4 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

5 Comments

4 Comments

1 Comment

Comments

4 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related