I recently answered a question on a forum about JavaScript includes in ASP.NET MVC and as the question came up again today, I thought I’d share the answer with the world.
The issue that people are coming up against is that they have a script include with a relative path to their script file. Because ASP.NET MVC uses URL routing, the browser will treat the relative path differently depending on your current location. Here’s a quick example…
You have referenced a script as you normally might, like this.
<script src="Scripts/MyScript.js"></script>
On your average web page, this works just fine. The problem is, this same script reference could appear on “www.stevefenton.co.uk” or it could appear on “www.stevefenton.co.uk/MyController/” or even “www.stevefenton.co.uk/MyController/MyAction/”. In this last case, the browser would be looking for the script located at “www.stevefenton.co.uk/MyController/MyAction/Scripts/MyScript.js” and it isn’t there.
This is a really easy problem to solve, using a quick and sly bit of “Url.Content”, as demonstrated below.
<script src="<%= Url.Content("~/Scripts/MyScript.js") %>"></script>
Please note! There is also an even easier fix… take note of the leading slash, which advises the browser that the path is relative to the root of the website.
<script src="/Scripts/MyScript.js"></script>
The only time Url.Content beats this simple fix is if your deployments are not always to the root of a website.