Problem with referencing CSS and JavaScript files relatively

Question

I have an IIS web site. This web site contains other web sites so the structure is like this.

\ 
MainWebSite\
        Scripts\
        CSS\
        App1\
           Scripts\
           CSS\
        App2\
           Scripts\
           CSS\

All sites are ASP.NET MVC web applications.

In the MasterPage of App1, I reference the script files like this:

<script type="text/javascript" src="../../Scripts/jquery-ui-1.8.custom.min.js">
</script>

The problem is that it now tries to find the file at http:\server\MainWebSite\Scripts....

How can I work around that? Should I put all my scripts and CSS files into the root directory, is that a preferred solution?

Answer 1

The best solution is to use absolute URLs for CSS and JavaScript. Using an appending global variable you can also use it on your development system, too.

Answer 2

In ASP.NET there is a great function that is part of the Page Object:

ResolveUrl(String)

This is used by passing in a relative string, but the best part is you can use the ~ to symbolize the root of your website:

<script type="text/javascript" src='<%=ResolveURL("~/PATH_FROM_ROOT/Scripts/jquery-ui-1.8.custom.min.js")%>'></script>

[Note the single quotes.]

Answer 3

Try this

<script type="text/javascript" src="~/../Scripts/jquery-ui-1.8.custom.min.js" runat="server"></script>

In the above markup, I'm assuming that your script files are in MainWebSite\Scripts\

"~" brings your reletive reference from your application root directory. The benefit is that if you shift your master page file from MainWebSite\App1\ to MainWebSite\App1\MasterPages\ you will not have to change all the relatively referenced urls in your master page.