Slash (/) vs tilde slash (~/) in style sheet path

Question

ASP.NET offers two ways to specify paths for style sheets:

<link href="/common/black_theme/css/style.css" rel="stylesheet">   (this is working)
<link href="~/common/black_theme/css/style.css" rel="stylesheet">  (this is not working)

How are these paths resolved?
Why are the generated paths different?
Which one should I pick in which case?

As per my knowledge, ~ represents the root directory of the application. "common" is the folder below the website root (named testsite.demo) in IIS.

Physical path: D:\Physicalpath\WarpFirstSite\testsite.demo
"common" folder: D:\Physicalpath\WarpFirstSite\testsite.demo\common

score 102 · Accepted Answer · answered Jun 21 '11 at 10:55

102

/ - Site root
~/ - Root directory of the application

The difference is that if you site is:

http://example.com

And you have an application myapp on:

http://example.com/mydir/myapp

/ will return the root of the site (http://example.com),

~/ will return the root of the application (http://example.com/mydir/).

answered Jun 21 '11 at 10:55

Oded

489,969
99
883
1,009

3

@Kyasa - What do you need explaining? – Oded Jun 21 '11 at 13:52
i am confused with appliation path . Is it physical path that site http://example.com mapped to ? – Kyasa Madhavi Jun 21 '11 at 14:52
1

@Kyasa - It is the IIS virtual application. See here - http://learn.iis.net/page.aspx/150/understanding-sites-applications-and-virtual-directories-on-iis-7/ – Oded Jun 21 '11 at 15:06
Nice link.So we can use ~ in link tag without runat=server tag? – Kyasa Madhavi Jun 22 '11 at 06:44
@Kyasa - No, this is a server side feature. – Oded Jun 22 '11 at 07:32
Hi Oded. The concept you explain is right. But it is working for image src , but not for importing stylesheet using Link tag.Unable to use tilde in link tag – Kyasa Madhavi Jun 22 '11 at 09:07
@Kyasa - Is it a server side element? – Oded Jun 22 '11 at 11:26
yes it is serverside < link href="~/Images/simple2.css" id="testcss" runat="server" type="text/css" /> and Both images and css are at same location. – Kyasa Madhavi Jun 24 '11 at 05:35

score 12 · Answer 2 · answered Jun 21 '11 at 11:05

12

The second won't work because its not a recognised path by anything except asp.net code on the server side. And since your link tag is regular html and not a server control it never gets processed.

answered Jun 21 '11 at 11:05

CRice

12,279
7
57
84

score 8 · Answer 3 · edited Jun 12 '13 at 06:54

8

If you add runat="server" in your link tag then it would works perfectly....

like this....

<link href="~/common/black_theme/css/style.css" rel="stylesheet" runat="server">

(this is also working)

edited Jun 12 '13 at 06:54

Vishal Suthar

17,013
3
59
105

answered Jun 21 '11 at 10:57

Gaurav Agrawal

4,355
10
42
61

1

This don't work. I apply this solution, and the render code with folder of page, no with folder of web application. example: result: http://localhost/AppFolder/OtherFolder/~/CSS/MyStyle.css Css folder is under AppFolder. – Anibal Díaz Oct 07 '16 at 08:40

Slash (/) vs tilde slash (~/) in style sheet path

3 Answers3

Linked