Using jQuery with ASP.NET - A Beginner's Guide

Did you hear about jQuery.. NO...? It’s fantastic!! Well if you have been hearing those words more too often from your colleagues but haven’t had the chance to explore jQuery yet, then here’s this beginner guide for you to get started with jQuery and ASP.NET.

Update: I have written an EBook on using jQuery with ASP.NET Controls. It's called "51 Tips, Tricks and Recipes with jQuery and ASP.NET Controls".

Ok, the million dollar question - What is jQuery anyways?

jQuery is a fast, lightweight JavaScript library that is CSS3 compliant and supports many browsers. The jQuery framework is extensible and very nicely handles DOM manipulations, CSS, AJAX, Events and Animations.

What is the difference between JavaScript and jQuery?

JavaScript is a language whereas jQuery is a library written using JavaScript.

Where can I download jQuery?

The latest version of jQuery as of this writing is jQuery 1.2.6 and can be downloaded from here. [Update] An updated version of jQuery 1.3.2 has been released. jQuery 1.3.2 and jQuery 1.3.2 Visual Studio 2008 Autocomplete documentation. So whereever you see 1.2.6 mentioned in the rest of this article, just replace it with 1.3.2.

What has Microsoft got to do with jQuery?

In ScottGu’s blog, there was an announcement made a few weeks ago that Microsoft will be partnering with the jQuery team and shipping jQuery with Visual Studio in future. Also, jQuery intellisense annotation support will be available as a free web-download. Barely a few weeks after the announcement, Microsoft during the PDC event (held in the last week of October), announced that Visual Studio 2008 now supports jQuery Intellisense through an additional file available from jQuery. This file can be downloaded from here. For those interested, the release notes can be found here 1.2.6 (Release Notes).

A few days ago, Microsoft also released a VS2008 SP1 Hotfix to support all JavaScript files including jQuery intellisense for Visual Studio 2008. Note that this hotfix works only if you have VS 2008 with SP1 or Visual Web Developer Express Edition with SP1. You can download the Hotfix from here (Downloads tab).

Checking out jQuery Intellisense in Visual Studio 2008 with SP1

Assuming you have installed the hotfix , downloaded the jQuery library and the jQuery VS 2008 IntelliSense documentation, follow these steps to move ahead.

Open Visual Studio 2008 > File > New > Website > Choose ‘ASP.NET 3.5 website’ from the templates > Choose your language (C# or VB) > Enter the location > Ok. In the Solution Explorer, right click your project > New Folder > rename the folder as ‘Scripts’.

Right click the Scripts folder > Add Existing Item > Browse to the path where you downloaded the jQuery library (jquery-1.2.6.js) and the intellisense documentation (jquery-1.2.6-vsdoc.js) > Select the files and click Add. The structure will look similar to the following:

Now drag and drop the jquery-1.2.6.js file from the Solution Explorer on to your page to create a reference as shown below

Note: Since you have applied the hotfix, you do not have to manually add a reference to the jquery-1.2.6-vsdoc.js file in your page. Once the reference to the runtime library has been added, Visual Studio automatically searches for the ‘vsdoc’ file and loads it. You just need to keep both the runtime library and the documentation file next to each other.

To test intellisense, add a <script> block and key in ‘$(‘. You will get an intellisense similar to the one shown below:

Show me some examples

This article would be incomplete without examples. So let us quickly see some.

Example 1 – Display an alert on asp:Button click using jQuery

From : http://www.dotnetcurry.com/ShowArticle.aspx?ID=231&AspxAutoDetectCookieSupport=1