getting base url of web site's root (absolute/relative url)

Question

I want to completely understand how to use relative and absolute url address in static and dynamic files.

~  : 
/  :
.. : in a relative URL indicates the parent directory
 . : refers to the current directory
 / : always replaces the entire pathname of the base URL
// : always replaces everything from the hostname onwards

This example is easy when you are working without virtual directory. But i am working on virtual directory.

Relative URI          Absolute URI
about.html            http://WebReference.com/html/about.html
tutorial1/            http://WebReference.com/html/tutorial1/
tutorial1/2.html      http://WebReference.com/html/tutorial1/2.html
/                     http://WebReference.com/
//www.internet.com/   http://www.internet.com/
/experts/             http://WebReference.com/experts/
../                   http://WebReference.com/
../experts/           http://WebReference.com/experts/
../../../             http://WebReference.com/
./                    http://WebReference.com/html/
./about.html          http://WebReference.com/html/about.html

I want to simulate a site below, like my project which is working on virtual directory.

These are my aspx and ascx folder

http://hostAddress:port/virtualDirectory/MainSite/ASPX/default.aspx
http://hostAddress:port/virtualDirectory/MainSite/ASCX/UserCtrl/login.ascx

http://hostAddress:port/virtualDirectory/AdminSite/ASPX/ASCX/default.aspx

These are my JS Files(which will be use both with the aspx and ascx files):

http://hostAddress:port/virtualDirectory/MainSite/JavascriptFolder/jsFile.js
http://hostAddress:port/virtualDirectory/AdminSite/JavascriptFolder/jsFile.js

this is my static web page address(I want to show some pictures and run inside some js functions):

http://hostAddress:port/virtualDirectory/HTMLFiles/page.html

this is my image folder

http://hostAddress:port/virtualDirectory/Images/PNG/arrow.png
http://hostAddress:port/virtualDirectory/Images/GIF/arrow.png

if i want to write and image file's link in my ASPX file i should write

aspxImgCtrl.ImageUrl = Server.MapPath("~")+"/Images/GIF/arrow.png";

But if i want to write the path hard coded or from javascript file, what kind of url address it should be?

Answer 1

The ~ operator is recognized by asp.net only for server controls and in server code. You cannot use the ~ operator for client elements.

Absolute and relative path references in a server control have the following disadvantages:

•Absolute paths are not portable between applications. If you move the application that the absolute path points to, the links will break.

•Relative paths in the style of client elements can be difficult to maintain if you move resources or pages to different folders.

To overcome these disadvantages, ASP.NET includes the Web application root operator (~), which you can use when specifying a path in server controls. ASP.NET resolves the ~ operator to the root of the current application. You can use the ~ operator in conjunction with folders to specify a path that is based on the current root.

As for the example you posted

aspxImgCtrl.ImageUrl = Server.MapPath("~")+"/Images/GIF/arrow.png";

the above code will render the server physical path (for example - c:\inetpub\wwwroot\mysite\images\gif\arrow.png" which is meaning less on the client side,

you should use this for correct client relative path:

aspxImgCtrl.ImageUrl = "~/Images/GIF/arrow.png"; 

To reference resources from javascript you may want to consider a one level folders structure to unify access paths. for example:

• Pages
• JS
• Pix
• etc...

For more details visit asp.net web site paths