Why does ~/ not work inside script references?

Question

I am using jQuery for my ASP.NET project. I just realized, that it does only work, if the navigation depth is not as deep. For example

• http://localhost/myapp/index/ works
• http://localhost/myapp/index/sites/sub/ does not work

The error I encountered was caused by jQuery. Firebug told me, that

$ is not defined.

After some research, I changed my meta definitions like this:

<link rel="Stylesheet" type="text/css" href="~/Css/style.css" />
<script src="~/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.uniform.min.js" type="text/javascript"></script>

Still, it did not work. After I took a look into the server response, the href of the CSS link got replaced correctly:

<link rel="Stylesheet" type="text/css" href="../../Css/style.css" />

However, for my script ressources the relative path hasn't been replaced:

<script src="~/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.uniform.min.js" type="text/javascript"></script>

I expected something like ../../Scripts/jquery-1.7.2.min.js.

Is this wanted behaviour? How should I setup application root references for script resources, correctly? Would writing /Scripts/jquery-1.7.2.min.js work when I am hosting my website as web application in IIS?

Answer 1

Try Page.ResolveUrl() to link to your resources instead:

<link rel="Stylesheet" type="text/css" href="<%=Page.ResolveUrl("~/Css/style.css")%>" />
<script src="<%=Page.ResolveUrl("~/Scripts/jquery-1.7.2.min.js")%>" type="text/javascript"></script>
<script src="<%=Page.ResolveUrl("~/Scripts/jquery.uniform.min.js")%>" type="text/javascript"></script>

This will resolve to the parent directory of your website, whether it's hosted as the root of the application or even a virtual directory.