Using jQuery with ASP.

NET - A Beginner's Guide

Did you hear about jQuery.. NO...? Its fantastic!! Well if you have been hearing those words more too often from your colleagues but havent had the chance to explore jQuery yet, then heres 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 version of jQuery as of this writing is jQuery 1.2.6 and can be downloaded from here. [Update 1] An updated version of jQuery 1.7 has been released. jQuery 1.7 (regular) or jQuery 1.7 (minified) and jQuery 1.7 Visual Studio Autocomplete documentation. So wherever you see 1.2.6 mentioned in the rest of this article, just replace it with 1.7. [Update 2] Instead of downloading the jQuery files, you can also reference the files directly using a Content Delivery Network (CDN). Google and Microsoft provide free CDN's for you to use. Google has hosted jQuery on its CDN over here jQuery 1.7 (CDN) Microsoft also provides jquery over CDN. Here are the links http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7-vsdoc.js Check this link to see how to use the jquery CDN links directly in your application Visual Studio jQuery Intellisense over CDN

What has Microsoft got to do with jQuery?

In ScottGus 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 (jquery1.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 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 similar to the following:

Example 2: Demonstrating some animation on button click using jQuery Our first example was a simple Hello World example to keep up with the tradition while introducing a new language. Let us enhance our sample and display some animation using jQuery. We will animate an <asp:Panel> on a button click when the page loads. This sample is loosely based on the demo over here: To do so, add a HTML button and a <asp:Panel> to the page as shown below: <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. Observe how the intellisense helps us out with the parameters

After adding in the parameters for the animate() function, the complete code will look similar to the following: <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 as shown below:

Well thats it for an introduction. Remember that this article is only an introduction and in no way demonstrates the capabilities of jQuery. I have written an EBook which demonstrates the capabilities of doing client side development in ASP.NET using jQuery. It's called "51 Tips, Tricks and Recipes with jQuery and ASP.NET Controls". In the forthcoming articles, we will see how jQuery can further be used with ASP.NET and AJAX. If you liked the article, Subscribe to my RSS Feed.

Give me a +1 if you think it was a good article. Thanks!

Subscribe 15retweet Share

You Also Might Like

ery Custom Selector

.NET Master Page

ckBox and ASP.NET GridView

View using jQuery Theme Switcher Widget

NET CheckBox Values using jQuery

pDownList into Multi Select ListBox using jQuery

Using jQuery with ASP.NET Master Page

Rating: 11 user(s) have rated this article Posted by: Suprotim Agarwal, on 3/13/2011, in category "jQuery and ASP.NET" Views: this article has been read 33129 times Abstract: jQuery has gained popularity as the de facto standard for JavaScript development and many ASP.NET developers have adopted jQuery as part of their development kits. One question that I am asked frequently is how to use jQuery with an ASP.NET Master Page. Let us see how. 10retweet

jQuery has gained popularity as the de facto standard for JavaScript development and many ASP.NET developers have adopted jQuery as part of their development kits. One question that I am asked frequently is how to use jQuery with an ASP.NET Master Page. Where should the jQuery file and code be placed in a Master Page? Note: If you are using jQuery with ASP.NET Controls, check out my EBook called 51 Recipes with jQuery and ASP.NET Controls. In this article, I am going to answer these questions and will demonstrate how to use jQuery with an ASP.NET MasterPage. We will see some jQuery code that clones the content

of one TextBox into another TextBox. If you are new to jQuery, check my article Using jQuery with ASP.NET Beginners Guide. Lets get started. Step 1: Create a Master Page (MasterPage.master) and add a reference to the jQuery Library. Now create a folder called Scripts and download the latest jQuery library into this folder. Now add references to any CSS files, if any. Create a separate folder to store all CSS and images files. You should always make it a habit to keep your resources in separate folders for better maintainability. The code should look similar to the following:

Step 2: Now create a Content Page called Default.aspx and add two TextBox controls to this page as shown below:

Step 3: Now in the Scripts folder, create a textboxclone.js file and add the following code in it.

Using the code shown above, as the user types in the first TextBox, we retrieve the value of the first TextBox and set it to the value of the second TextBox. Note: Since we are capturing the keyup event, whenever the user pastes text in the first textbox using Ctrl+v, the contents are cloned into the second textbox, This is however not true when the user right clicks the textbox and chooses paste from the context menu The last step is to reference this JavaScript file (textboxclone.js) in your Content Page as shown below:

You must be wondering why did we add a link to the textboxclone.js from a Content page rather than doing it from a Master Page. The reason is, if we had referenced the textboxclone.js file in the MasterPage directly, the code would be downloaded for every content page, even if it was not needed. Referencing it from a Content Page makes sure that the resource is used only when this content page is requested. Thats it. Run the code and you will see the textbox text cloning in action.

I hope you liked this article and I thank you for viewing it. The entire source code of this article can be downloaded over here.

Give me a +1 if you think it was a good article. Thanks!

Calculate Sum of ASP.NET CheckBox Values using jQuery

Rating: 9 user(s) have rated this article Posted by: Suprotim Agarwal, on 2/21/2011, in category "jQuery and ASP.NET" Views: this article has been read 24633 times Abstract: In this article, we will see how to add values of multiple ASP.NET Checkboxes using jQuery 12retweet

In this article, we will see how to add values of multiple ASP.NET Checkboxes using jQuery. This example could be useful in scenarios where users are asked to select services they would like to avail and each service has a rate displayed like in a webhosting service. Using jQuery, the total service cost should be automatically calculated, as the services are selected.

Note: If you are using jQuery with ASP.NET Controls, check out my EBook called 51 Recipes with jQuery and ASP.NET Controls. Create an ASP.NET Website. Add the following markup

The layout should look similar to the following:

Now add a reference to the latest jQuery script file and write the following code:

Let us see what we just did: When a checkbox is clicked, a variable checked keeps track of the checked checkboxes.

We then iterate the checked collection using $().each() and add the text of the checkbox to a variable total.

Observe how we are accessing the value of a checkbox using $(this).next().text()); This is because the checkbox gets rendered like this:

To access the value, which is inside the label, we use next() which finds the very next sibling of each checkbox, which in our case is the label control. The parseFloat( )parses strings into numbers. The result is displayed in a paragraph (tot) using the toFixed() method, which rounds the result to the specified number of decimal places, in our case 2. $('#tot').text("Your Total Amount Is: " + total.toFixed(2)); The output is shown here:

See a Live Demo. This demo has been tested in the following browsers: IE 7, IE 8, Firefox 3, Chrome 2, Safari 4. The entire source code of this article can be downloaded over here

Convert ASP.NET DropDownList into Multi Select ListBox using jQuery

Rating: 29 user(s) have rated this article Posted by: Suprotim Agarwal, on 12/29/2010, in category "jQuery and ASP.NET" Views: this article has been read 37891 times Abstract: In this simple article, we will see how to convert an ASP.NET DropDownList into Multi Select ListBox in order to select multiple items. 40retweet

In this simple article, we will see how to convert an ASP.NET DropDownList into Multi Select ListBox, in order to select multiple items. This article is a chapter from my EBook called 51 Recipes with jQuery and ASP.NET Controls. The chapter has been modified a little to publish it as an article and use the latest jQuery version. Note that for demonstration purposes, I have included jQuery code in the same page. Ideally, these resources should be created in separate folders for maintainability. Its also always best to choose appropriate server side controls at the time of designing the application. If the user turns off JavaScript in his browser, the jQuery code won't work. So use this example with caution. The code shown below has been tested on IE7, IE8, Firefox 3, Chrome 2 and Safari 4. Multiple items cannot be selected in a DropDownList unless you change the default behavior of this control by writing custom code. Its the ListBox control that allows the user to select multiple items when its SelectionMode property is set to multiple. I faced this requirement recently during a client visit. The client was keen on keeping a DropDownList to save screen space. However they also wanted to convert the DropDownList to a ListBox, if the user wanted to select multiple items. So to solve this requirement client-side, a jQuery was used to 'make it appear' that we are converting the DropDownList to a MultiSelect ListBox control on the click of a Button. Let us see the entire code first

As you can see, to convert the DropDownList to a MultiSelect ListBox control on the click of a Button, we just requires a single line of jQuery code as shown here:

Once the DropDownList is converted into a ListBox control, the user can select multiple items and list them by using the code shown below

Before the Button is clicked, the output looks like this:

After the Button is clicked, the DropDownList is converted to a Multi Select Listbox as shown below:

After the user selects multiple values and clicks the Button, the output changes as shown here:

See a Live Demo I hope you found this article useful and I thank you for viewing it. This article was taken from my EBook called 51 Tips, Tricks and Recipes with jQuery and ASP.NET Controls which contains similar recipes that you can use in your applications. The entire source code of this article can be downloaded over here