Any smart way of doing a "root" based path referencing in JavaScript, just the way we have ~/
in ASP.NET?
-
What are you constructing a path for? XmlHttpRequest?– harpoMay 21, 2009 at 14:18
-
@Gumbo: It means the application root, and relates to asp.net.– BrianMay 21, 2009 at 14:22
12 Answers
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;
}
-
1modified the example slightly to make it a little less ambiguous May 21, 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;– BrianMay 21, 2009 at 14:24
-
5If 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> May 21, 2009 at 14:48
-
3Putting 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. May 21, 2009 at 15:06
-
1<link id="ApplicationRoot" href="~/" rel="home" /> provides a nice relative path prefix. Note that the head tag must have the runat="server" attribute. Jun 14, 2012 at 16:38
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/".
-
-
1awesome, 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.– PiwafApr 2, 2012 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. Jun 14, 2012 at 16:27
-
3Note that the use of the base tag might have its problems, too, see [stackoverflow.com/questions/1889076/….– anreJan 23, 2013 at 18:03
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...
-
4The 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 Jun 14, 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";
~/ 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.
-
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. May 21, 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 :)– LloydMay 21, 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? May 21, 2009 at 15:10
-
Yes, I was thinking along the lines of ~/ ending up expanded but that wouldn't happen.– LloydMay 21, 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.
-
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.– DanielCMar 21, 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.
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" })