CSS and Javascript relative path confusion in ASP.NET MVC

22
votes

My javascript paths work on this page: http://localhost:53049/

But not on this page: http://localhost:53049/Home/Messages

The reason is that the relative paths are different, the former requires ("js/...") and the latter requires ("../../js/...").

I'm including my javascript in my Site.Master file:

<script type="text/javascript" src="js/jquery.jqGrid.js"></script>
<script type="text/javascript" src="~/js/jquery.jqGrid.js"></script>
<script type="text/javascript" src="<%= this.ResolveClientUrl("~/Scripts/jquery-1.2.6.js") %>"></script>

How do I get around this relative path madness, i.e. what is the best practice way in ASP.NET MVC to set CSS/Javascript paths in the Site.Master so that they work for each view no matter how deep that view's URL happens to be.

ADDENDUM:

It seems that for the Index view, any path will work, strangely:

<script type="text/javascript" src="/Scripts/jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../../Scripts/jquery-1.2.6.js"></script>

But for any other pages (pages with a deeper URL), none of these work.

What's going on here? How can we set the Javascript path once in Site.Master and they work for all pages?

ADDENUM II:

It turned out to only be a problem with the jqgrid javascript file (not the jquery file), apparently inside that file it is referencing other javascript files and gets confused:

<script type="text/javascript" src="<%= Url.Content ("~/js/jquery.jqGrid.js") %>"></script>
5
asp.net-mvc
we can't see things posted from your localhost machine. – jacobangel
tres LOL - hadn't even noticed – annakata
I know (hope) you can't see them on my local machine, I just don't know how to make the http's non-links with this editor. Point is that the paths don't work if there are directories in the URL. – Edward Tanguay
Good point about the Index View because everything appears to work fine until you move to another Action. – JustinStolle

5 Answers

15
votes

You can also use the Url.Content method call to make sure that the paths are correctly set.

Examples can be found here.

13
votes

Regarding paths used in CSS documents:

/Content/site.css

Body {background-image:url('background.jpg');}

Relative paths in CSS documents are related to the CSS document, not the document being displayed.

This information saved me some headaches.

3
votes

Try setting the javascript to use a forward slash at the beginning, like "/js/jquery.jqGrid.js" This will set them to use the root domain instead of relative pathing.

1
votes

The solution for jqGrid: open the file jquery.jqGrid.js and locate the line:

var pathtojsfiles = "js/"; // need to be ajusted

As the comment says, you need to edit that path, e.g. for a typical ASP.NET MVC app,

var pathtojsfiles = "/Scripts/js/"; // need to be ajusted
1
votes

You need to add runat="server" and to specify the absolute path like this:

<script type="text/javascript" runat="server" src="~/js/jquery.jqGrid.js"></script>]