Thursday, June 25, 2009

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.
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.1 has been released. Read more about it over here
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:

See full detail:

No comments: