Sometime we need to put / or ~/ as the suffix in order to make refer to the root
<script type="text/javascript" src="/scripts/jquery-1.5.1.min.js"></script>
<link href="~/Styles/MasterPage.css" rel="stylesheet" type="text/css" />
This is what i know from Phill
~/ is not valid unless you have a runat attribute on your control/element. '/' by itself specifies to the browser to look from the root directory, so if you link to '/css/main.css' from www.mysite.com/product/view.aspx it will look for the css file in www.mysite.com/css/main.css. When you use '~/' with runat-server, it will work out the path to the directory at runtime, so in the same example with '~/css/main.css' the rendered url will look like '../css/main.css' because it needs to drop the directory back 1 before finding the directory 'css'. (hope that makes sense) – Phill
How to include jquery in masterpage header without path problems?
but as i has tried, even i use / firefox still refer to ../../ instead of static path.
also, I don't know it clearly how to use it correctly , which one use on which situation.
~/ refers to virtual directory application root where as "/" refers to site roots eg if you have site that in http://www.example.com/ and which has http://www.example.com/foo where folder "foo" configured as virtual directory application in IIS a page in http://www.example.com/foo/foo.aspx will resolve ~/ as relative to virtual directory application root directory which is http://www.example.com/foo but "/" will still resolve to site root which is http://www.example.com/
The / at the beginning of a relative URL backs up to the root of the hostname.
The prefix ~/ in a relative URL can only be interpreted by the ASP.NET process, which is why it only works for runat=server. It is translated upon output to refer to the root URL of the ASP.NET application. Many times, this is the same as the root of the hostname, but it will differ if the ASP.NET application that the code is running in is a virtual directory in IIS rather than its own site.
If you only need to drop one directory level back, you can use "../" as the prefix rather than "/" or "~/".
Related
I thought that both types would bring you to the root folder, but apparently, they work differently, once you do a URL rewrite.
For instance, I normally use / which I know will bring you to the root folder and it does when a URL has been rewritten.
When someone else tried to use ~/ after a URL has been rewritten, then the path fails to find the file. Why is that?
/ will take you back to the root of your website.
~/ will take you to the home folder of your application on the website.
If your application is in a folder called myApp, for example, so the URL looks like this
http://www.YourSite.com/myApp/
and in your application you use ~/Scripts/jquery.js then the path referenced will be
http://www.YourSite.com/myApp/Scripts/jquery.js
whereas just using / would send you all the way back to the root of the website
http://www.YourSite.com/Scripts/jquery.js
I feel like a nub for asking this, but I can't figure it out.. I've found several posts (here's one) saying that to use a relative path from the root of your site, start the path with /, ex:
<img src="/images/img1.jpg" />
My file hier. looks like
-root
-images
-css
-index.aspx
-subFolder
-test.aspx
Now when I use the src path as shown above, it doesn't work in either index.aspx or test.aspx, but when I remove the /, it works for index.aspx. In test.aspx, I used ../images/img1.jpg and it works. What gives? Why is my example above not working?
Your site is probably in a virtual directory, so the "/" refers to the actual web root as IIS (or whatever web server) sees it - maybe the folder above your 'root' folder
.
The relative paths work because they are traversing the directory based on the location, so for index.aspx it needs to go into images folder and get the img1.jpg, for test.aspx it needs to go up one level .. then into the images folder and get the img1.jpg.
Absolute paths are based off of were the application is installed from based on IIS settings. If you are just testing this from that folder your absolute path needs to include the root folder. /root/images/img1.jpg and then it will work from both test and index with the same absolute path.
I'm trying to style the custom error pages in IIS7 with a linked CSS style sheet.
This works.
<html><head><title>404 - File or directory not found.</title>
<LINK href="http://stage.mysite.com/custErr/css/style.css" rel="stylesheet" type="text/css">
</head><body>Page Not Found</body></html>
I've created a virtual directory in mysite called custErr that contains the css and images needed.
But to make it easier to deploy I'd like to have it relative like this...
<html><head><title>404 - File or directory not found.</title>
<LINK href="../css/style.css" rel="stylesheet" type="text/css">
</head><body>Page Not Found</body></html>
After trying this I find that relative paths don't seem to work. In fact a style sheet in the c:\inetpub\custerr\en-US folder doesn't work either.
Where are these pages being served from?
Is there an easier way of doing this?
So I don't have to modify each and every absolute path for each environment?
I know this is a late reply but the reason why the relative paths don't work (I think) is because if you hosted a site such as www.myfavouritephotos.com and on visiting a directory on that site such as www.myfavouritephotos.com/images/ which is a directory in your website that doesn't have a default document like Default.aspx or whatever your site is set up as serving as a default page, IIS would return a HTTP Response of 404 for not finding a page to serve up or a 403 response because the user may not have the necessary rights to view the content of the directory under that url.
IIS by default would serve either the 404.htm or 403.htm file from within the c:\inetpub\custerr\en-US directory by default but when you replaced it with a custom htm file that replaces 404.htm, the relative path to the stylesheet you reference from that htm file would make a request at what the original url made to the server was so www.myfavouritephotos.com/images/(../css/style.css) which would result in an incorrect relative path so it may be able to be avoided by using a reference to a stylesheet with www.myfavouritephotos.com/css/style.css
What are the differences between ./, ../, and ~/ for specifying an image in my web application?
Like current directory, root, parent directory, etc.
"./" //the current directory
"../" //the parent directory
"/" //the site root directory
"~/" //virtual root Web path
ASP.NET Web Project Paths is a very good article in MSDN regarding paths in ASP.NET with good examples.
Web Pathing:
./ means this folder, equivalent to nothing on the front
ex: ./image.jpg and image.jpg are the same thing
/ the web application root folder
ex: /Test/image.jpg, go to the application root, find folder Test, find image.jpg
../ means up one folder then go to the folder after the slash...
ex: ../Test/image.jpg, go up one folder from the current folder your in, go into folder Test, and find image.jpg.
Physical Pathing:
~/ means the application physical root folder. This will not work if you are using it directly in the webpage (ex: <img src="~/images/image.jpg" />). You can use ResolveUrl to get the web path to a file. I have used this for referencing JavaScript libraries in a master page. I've also seen it used in some custom uploaders.
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?
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