CSS and Javascript relative path confusion in ASP.NET MVC

Question

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>

Answer 1

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.

Answer 2

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

Examples can be found here.

Answer 3

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.

Answer 4

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