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?

Can you clarify what exactly is the problem with this? Are there pages in different directories so the relative link breaks? — Pekka
– Pekka, Commented Jun 10, 2010 at 11:19
Are your script and css files located in MainWebSite\Scripts? — IsmailS
– IsmailS, Commented Jun 10, 2010 at 11:25

Peter Mortensen · Accepted Answer · 2010-11-06 14:29:49Z

4

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.]

edited Nov 6, 2010 at 14:29

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jun 10, 2010 at 11:26

Bob Fincheimer

18.1k1 gold badge31 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

IsmailS Over a year ago

I know this is insignificant comment as any developer will know and Markus understood himself. Still wanna say you have not closed parenthesis and render block.

IsmailS · Accepted Answer · 2010-06-10 11:27:42Z

1

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.

answered Jun 10, 2010 at 11:27

IsmailS

10.9k22 gold badges87 silver badges141 bronze badges

1 Comment

Bob Fincheimer Over a year ago

~ does not work unless you are on a server control or if you use the ResolveURL function. And in ASP.NET you cannot make a script tag runat="server" for JS

Peter Mortensen · Accepted Answer · 2010-11-06 14:33:52Z

0

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.

edited Nov 6, 2010 at 14:33

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jun 10, 2010 at 11:25

2ndkauboy

9,4033 gold badges34 silver badges67 bronze badges

Collectives™ on Stack Overflow

Problem with referencing CSS and JavaScript files relatively

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related