I have created an ASP.NET MVC Application from a template in Visual Studio and I want to make use of the jQuery library. How do I add jQuery to my pages?
You can include jQuery on any ASP.NET web page. Visual Studio incorporates templates that make it simple to get productive quickly with the library.
The Visual Studio templates for both an empty and a "starter" version of MVC provide a Scripts
directory that contains jQuery. If you don't create a project from one of these templates, you'll have to download jQuery
and put it in an appropriate folder.
Adding a Static Script Reference
Here it is plain and simple: put the snippet below anywhere in a body or head tag in your web page and you will have access to the jQuery library.
will need to be replaced with your script path location. With the defaults from the Visual Studio project templates, your script will look like so:
A static script reference using a script tag as above is fairly straightforward. You could copy and paste the above code, type it in manually, or drag and drop the file into the code editor window from the Solution Explorer.
While the reference will work anywhere in the
tags you may wish to read the performance-related section of this article
(confirm link) in this series that deals with script tag placement before you move your site to production.
Using jQuery from the CDN
Rather than downloading jQuery, deploying it and paying for the bandwidth costs, why not have someone else do the work for you? Content Delievery Networks (CDNs) house copies of common, highly-used scripts. It's just as easy to add jQuery through a CDN as it is through a local, static script reference.
You'll notice the
attribute of the tag now points at Microsoft's Ajax CDN. It's free to use and it will help speed up your site. Check out the CDN information page here on ASP.NET
Power Tip: jQuery in All Your Pages
With ASP.NET we also have the power of master pages working for us, and here's where Visual Studio can really shine when we'd like to make use of a library like jQuery.
If you add the script reference to your master page - either through a local, static file or through the CDN - all of your Views that specify that master as their MasterPageFile will also have access to jQuery.
And it's not just a runtime trick where the benefits come after deployment! Here's a shot of IntelliSense in Visual Studio 2010 working in a View that has the MasterPageFile set to a master page with a jQuery reference:
Power Tip: jQuery in Your Toolbox
To reuse this code you've stored in the toolbox place the cursor where you'd like the script reference in your file. Double click on your toolbox item to add jQuery to your view.
Adding jQuery to an ASP.NET MVC project is simple enough and with Visual Studio it can be even easier. Whether or not you're using the full ASP.NET MVC project template, the empty template or building up your project from scratch, getting jQuery to run on your site takes only a few moments.
About the Author
James Chambers is a Senior Software Developer in the prairies of Canada, where he enjoys outdoors sports year-round and there are only three months of bad tobogganing. His development passions are fueled by new tech, new tools and mentoring others. Follow his coding adventures at Mister James