~/ equivalent in javascript

Asked 21/5, 2009 at 14:16 Answered 23/12, 2016 at 17:51

Solved javascript asp.net web-applications relative-path

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

Mossman answered 21/5, 2009 at 14:16 Comment(2)

What are you constructing a path for? XmlHttpRequest? – Kenner 21/5, 2009 at 14:18

@Gumbo: It means the application root, and relates to asp.net. – Edroi 21/5, 2009 at 14:22

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

Respectful answered 21/5, 2009 at 14:18 Comment(5)

modified the example slightly to make it a little less ambiguous – Marbling 21/5, 2009 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; – Edroi 21/5, 2009 at 14:24

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> – Foreboding 21/5, 2009 at 14:48

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. – Duren 21/5, 2009 at 15:6

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

Choreodrama answered 21/5, 2009 at 14:30 Comment(4)

really useful. did not know about this tag. – Mossman 21/5, 2009 at 17:2

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. – Coxcombry 2/4, 2012 at 15:5

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. – Overplay 14/6, 2012 at 16:27

Note that the use of the base tag might have its problems, too, see [#1889576. – Fogbound 23/1, 2013 at 18:3

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

Diaghilev answered 21/5, 2009 at 15:16 Comment(1)

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 – Whitleather 14/6, 2012 at 16:16

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

Rizzo answered 21/5, 2009 at 14:19 Comment(0)

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

Nimrod answered 21/5, 2009 at 14:18 Comment(4)

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. – Marbling 21/5, 2009 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 :) – Nimrod 21/5, 2009 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? – Duren 21/5, 2009 at 15:10

Yes, I was thinking along the lines of ~/ ending up expanded but that wouldn't happen. – Nimrod 21/5, 2009 at 15:28

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.

Muddle answered 26/9, 2011 at 16:4 Comment(1)

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. – Treillage 21/3, 2013 at 21:22

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.

Venessavenetia answered 9/9, 2013 at 17:45 Comment(0)

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

Lipstick answered 11/10, 2014 at 0:14 Comment(0)

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

Margaretemargaretha answered 23/12, 2016 at 17:51 Comment(0)

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.

Vaporescence answered 17/3, 2011 at 2:33 Comment(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" },

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

Medorra answered 13/4, 2013 at 20:27 Comment(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" })

Leucoderma answered 31/7, 2014 at 16:5 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags