title: CSS and Javascript relative path confusion in ASP.NET MVC
body: <p>My javascript paths work on this page:
  <a href="http://localhost:53049/" rel="noreferrer">http://localhost:53049/</a></p>
  
  <p>But not on this page:
  <a href="http://localhost:53049/Home/Messages" rel="noreferrer">http://localhost:53049/Home/Messages</a></p>
  
  <p>The reason is that the relative paths are different, the former requires ("js/...") and the latter requires ("../../js/...").</p>
  
  <p>I'm including my javascript in my Site.Master file:</p>
  
  <pre><code>&lt;script type="text/javascript" src="js/jquery.jqGrid.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="~/js/jquery.jqGrid.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="&lt;%= this.ResolveClientUrl("~/Scripts/jquery-1.2.6.js") %&gt;"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p><strong>ADDENDUM:</strong></p>
  
  <p>It seems that for the Index view, any path will work, strangely:</p>
  
  <pre><code>&lt;script type="text/javascript" src="/Scripts/jquery-1.2.6.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../../Scripts/jquery-1.2.6.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../../../Scripts/jquery-1.2.6.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>But for any other pages (pages with a deeper URL), none of these work.</p>
  
  <p>What's going on here? How can we set the Javascript path once in Site.Master and they work for all pages?</p>
  
  <p><strong>ADDENUM II:</strong> </p>
  
  <p>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:</p>
  
  <pre><code>&lt;script type="text/javascript" src="&lt;%= Url.Content ("~/js/jquery.jqGrid.js") %&gt;"&gt;&lt;/script&gt;
  </code></pre>