Home / AJAX

How Do I Add jQuery to an ASP.NET MVC Application?

RSS
Modified on 2010/07/18 02:23 by James Chambers Categorized as Uncategorized

Problem

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?

Solution

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 Basics

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.

Getting any JavaScript to run in a browser is primarily a function of the HTML specification. We need to add a script tag to our page and the browser takes care of loading the document.

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.
<script src="path/jquery-1.4.1.min.js" type="text/javascript"></script>

path/ 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:
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

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.

Image

While the reference will work anywhere in the head or body 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.
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.1.min.js" type="text/javascript"></script>

You'll notice the src 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:

Image

Power Tip: jQuery in Your Toolbox

Find yourself using jQuery a lot? Make it easy to add to new projects or files by adding it to your toolbox. Start by right-clicking in your Toolbox in Visual Studio and creating a new tab. I've named mine "JavaScript".

Image

Next, add the required jQuery script reference to a text document in the IDE. Hightlight the script tag and drag the text to the JavaScript tab. Finally, right-click on the snippet text and rename it to something more meaningful.

Image

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.

Wrapping Up

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.