Here's a quick tip on including JavaScript files in your MVC master page views.  First off, put your .js file in the Content folder (or a sub-folder of it).  This folder is available directly over the web.  Next you need to reference the file in your master page.  In the head element use the following:

<script src="Content/js/jquery-1.2.3.min.js" type="text/javascript"></script>

But wait!  there's a problem with this.  Depending on what route has led to your view, the directory may be incorrect.  For example, "http://mymvcsite.com/about" will find the js just fine since the Content folder is a sibling folder to the about folder.  However, if your route was "http://mymvcsite.com/about/someaction", the script reference in your page will be looking for the file here: "http://mymvcsite.com/about/Content/jquery-1.2.3.min.js" and so your js won't work.  This problem doesn't seem to happen for css files.  The MVC rewrites the href to point to the correct place.

There is a simple fix though.  Instead of specifying the js file directly, use the Url.Content() function.  For example:

<script src="<%= Url.Content("~/Content/js/jquery-1.2.3.min.js") %>" type="text/javascript"></script>

Also note that the "~" will work in link elements to reference css, but not in script elements referencing JavaScript.  It would be nice if this is fixed in the next CTP.

posted on Sunday, March 16, 2008 4:26 AM |

Comments

3/18/2008 5:06 PM

Just to note you currently can use "../../Content/js/jquery-1.2.3.min.js" as well. This would still allow to take advantage intellisense for any inline scripts in your aspx pages.

Visual studio really needs to honor the reference path comment on inline scripts.

3/19/2008 12:32 AM

Hi Mike,

I could get the "../../Content/js/jquery-1.2.3.min.js" to work in a view if I reached it by "http://domain.com/home/index", since the relative path would map correctly, but if that same view was reached by "http://domain.com/home/index/id" or "http://domain.com/" there would be problems since the relative path doesn't map correctly to the js file.

Or maybe you mean to include two script references in one page? That's an interesting idea, there may be a problem running some scripts twice though. If you went that route, it might be a good idea to hide the second script element from the client by adding a runat="server" visible="false" to it.

3/19/2008 9:29 PM

Yes, I think your way is best. I second your vote on getting this fixed in next CTP.

I did a little more testing and wanted to share why this was working for me. Using the "../.." is essentially walking up the URI tree. Now this will only work if your MVC site is at root of the website. If your MVC web app is starting at say "localhost/blog", this will not work.

"/About/../../Content/jquery-1.2.3.min.js"
"/About/CompanyInfo/../../Content/jquery-1.2.3.min.js"
"/../../Content/jquery-1.2.3.min.js"

all become:

"Content/jquery-1.2.3.min.js"

For things things like "/" the "../../" and in the case of:

"/Product/List/5" it still translates because the "5" is dropped. However, "/Product/List/Detail/" (custom route), it does not work. For this, you would need to use "../../.." on your Master Page script.

6/6/2008 4:24 AM

Good article.
thank you.

Post Comment

Title *
Name *
Email
Url
Comment *  
Please add 7 and 2 and type the answer here: