How to Properly Reference a JavaScript File in an ASP.NET Project?

Question

Hi Guys

I have some pages that reference javascript files.

The application exists locally in a Virtual Directory, i.e. http://localhost/MyVirtualDirectory/MyPage.aspx

so locally I reference the files as follows:

<script src="/MyVirtualDirectory/Scripts/MyScript.js" type="text/javascript"></script>

The production setup is different though. The application exists as its own web site in production, so I don't need to include the reference to the virtual directory. The problem with this is that I need to modify every file that contains a javascript reference so it looks like the following:

<script src="../Scripts/MyScript.js" type="text/javascript"></script>

I've tried referencing the files this way in my local setup but it doesn't work.

Am I going about this completely wrong? Can somebody tell me what I need to do?

Thanks

Answer 1

Use ResolveUrl("~/")

<script src="<%=ResolveUrl("~/scripts/myscript.js") %>" type="text/javascript"></script>

~/ will get to you the root of your application, virtual or otherwise

Answer 2

You can use the HttpRuntime.AppDomainAppVirtualPath property to get the virtual path (if any) for your app and use that to fix up the javascript paths (using <%= ... %> in the <script> tags etc.)

You can further add a global javascript variable in your master page that exposes that value as well, so that any scripts that need to know the actual app root can access it that way.

Answer 3

Previous answers seem to assume that the Scripts directory always exists as a subdirectory of your application root. If that assumption is correct, and if the page is also at the root, then both of your earlier tags can be simply:

<script src="Scripts/MyScript.js" type="text/javascript"></script>

But my read of your second example is that Scripts isn't always a subdirectory of your application root (because the ../ at the beginning moves up a level, so Scripts would be a peer of your application root). That said, you did say the second example didn't work. :-) But if that's really the case, I'd strongly recommend adjusting one environment or the other so that the relative paths agree, and then always using relative paths as above.

The only reason for using ResolveUrl as far as I know would be if the pages in the application are in a folder structure and the tag may appear in a page at the root or in a page in a "subdirectory". If so, you can use ResolveUrl in both cases so you have an anchor point. I never author things that way, I always ensure I know where the page will be in the hierarchy (if there needs to be a hierarchy) and use an appropriate relative path for the current document.