Using jQuery with ASP.NET

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 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.

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

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:

<script type=”text/javascript”>

$(document).ready(function() {

// add code here

});

</script>

Add your code in the function block

<script type=”text/javascript”>

$(document).ready(function() {

$(“#Button1”).click(function() {

alert(“Hello world!”);

});

});

</script>

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

</asp:Panel>

</form>

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.

<style type=”text/css”>

div {

background-color:#D5EDEF;

color:#4f6b72;

width:50px;

border: 1px solid #C1DAD7;

}

</style>

Finally add the jQuery code to animate the panel on button click. We would be using the ‘animate’ function.

<script type=”text/javascript”>

$(document).ready(function() {

$(“#btnAnimate”).click(function() {

$(“#Panel1”).animate(

{

width: “350px”,

opacity: 0.5,

fontSize: “16px”

}, 1800);

});

});

</script>

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.

Advertisements

2 thoughts on “Using jQuery with ASP.NET

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s