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?
Where can I download jQuery?
The version of jQuery as of this writing is jQuery 1.5.1 and can be downloaded from http://docs.jquery.com/Downloading_jQuery.
Checking out jQuery Intellisense in Visual Studio 2008 with SP1
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.5.1.js) and the intellisense documentation (jquery-1.5.1-vsdoc.js)
Drag and drop the jquery-1.5.1.js file from the Solution Explorer on to your page to create a reference.
This article would be incomplete without examples. So let us quickly see some.
Example 1 – Display an alert on asp:Button click using jQuery
Add a Button element to the page as shown below:
<asp:Button ID=”Button1″ runat=”server” Text=”Button” />
Now in order to tell the browser to perform some action using jQuery as soon as the document is ready or loaded, use this block:
// add code here
Add your code in the function block
On clicking the button, you get an alert code
Example 2: Demonstrating some animation on button click using jQuery
<form id=”form1″ runat=”server”>
<input id=”btnAnimate” type=”button” value=”Animate” />
<asp:Panel ID=”Panel1″ runat=”server”>
Some sample text in this panel
Also add some css to beautify the div (remember asp:Panel renders as a <div>). The <style> tag has been kept in the <head> element of the page.
border: 1px solid #C1DAD7;
Finally add the jQuery code to animate the panel on button click. We would be using the ‘animate’ function.
Here the animation occurs while changing the width, opacity and font properties of the Panel when the button is clicked. The value ‘1800’ represents the number of milliseconds to run the animation.
Run the sample and see the Panel getting animated.