JavaScript url auto-resolution in Asp.Net MVC

Question

I am running Asp.Net MVC 2.0, and I am running into a problem with my JS calls.

this is what I have in my :

<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../Scripts/jquery.js"></script>

Which all works fine if I am on the root level. But if I jump up to something like:

Root/Items/Search/term/Page3

the JS doesn't run load - if I look at the source, the MVC is 'smart enough' to re-route the css, but not the Javascript:

<link href="../../../Content/Site.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="../../Scripts/jquery.js"></script> 

I must be missing something, there has to be an easy way to do this correctly, any ideas?

Answer 1

To avoid this sort of problems never hardcode links like this. Use helper methods instead:

<link href="<%= Url.Content("~/Content/Site.css") %>" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.js") %>"></script>