~/ equivalent in javascript

StackOverflow https://stackoverflow.com/questions/893144

Question

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

Was it helpful?

Solution

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

OTHER TIPS

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

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

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

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

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.

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.

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

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.

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

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

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" })
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top