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

Posted by: Suprotim Agarwal , on 11/18/2008, in Category jQuery and ASP.NET
Views: 878305
Abstract: This article is a guide for getting started with jQuery using ASP.NET and Visual Studio 2008/2010. The article also shows you how to use Visual Studio intellisense feature to develop jQuery and ASP.NET applications.
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".
Update2: A newer version of this article is available over here: Getting started with jQuery and jQuery UI – Back to Basics


 

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
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 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:
jQuery Structure
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
jQueryRef
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:
jQuery Intellisense
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:
jQuery Hello World
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
jQuery Intellisense VS
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:
jQuery Animation
jQuery Animation
Well that’s 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.
 

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
jQuery 3 - New Features and Performance Improvements

HTML Table and jQuery – Handy Code Snippets

jQuery Event Handling Basics - Difference between Bind, Live, Delegate and On

Select / Deselect All CheckBoxes using jQuery

jQuery UI DatePicker - Tips and Tricks

jQuery TreeView with Expand Collapse Icons

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for Fifteen consecutive years. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.

Get in touch with him on Twitter @suprotimagarwal or at LinkedIn



Page copy protected against web site content infringement by Copyscape



Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by Lineker Tomazeli on Tuesday, November 18, 2008 8:18 AM
Thanks man... Good explanation
Comment posted by Pitra Kanjz on Wednesday, November 19, 2008 1:00 AM
I always think to use jquery but did not find how. Now i will..(pardon my english) very very good.
Comment posted by Kumar on Saturday, November 22, 2008 2:00 AM
Hi,
Thanks a lot for great article . I have been trying to learn it from past few days,and this article clears all my doubts.
Simple way to explain what jquery is .Hope we get more article on jquery in near future.

Thanks
Kumar
Comment posted by Suprotim Agarwal on Sunday, November 23, 2008 10:14 PM
Pitra, Kumar: Thanks. You will be seeing a lot of jquery stuff soon. Stay Tuned!
Comment posted by sudarshan on Wednesday, November 26, 2008 4:11 AM
very nice article, espically for beginners. Thanks a lot.
Comment posted by Killer on Thursday, December 4, 2008 6:48 PM
This article does a poor job at explaining for beginners why they should use jQuery. What advantage does it have over other things and why is it so great?

A comparison of old way to new way would be more obvious for the beginner. Author does not give this.

It seems that jQuery just gives you something more difficult to refactor or manage.
Comment posted by Suprotim Agarwal on Friday, December 5, 2008 10:25 AM
Killer: Thanks for your comments. The intension of the article is to introduce jQuery from a Visual Studio 2008 perspective and how Microsoft is taking initiatives to provide users with a smooth experience.

A detailed Introduction to jQuery with benefits and examples can be found over here:  http://jquery.com/
Comment posted by Rajendra on Saturday, December 27, 2008 8:24 AM
Dear
I am unable to download VS2008 SP1 hotfix. Can U email me the script as a zip.
Thanks
Comment posted by Suprotim Agarwal on Tuesday, December 30, 2008 3:16 AM
Rajendra: I just checked the link again and was able to download the hotfix without any issues. Please could you try again.
Comment posted by Anisha on Friday, January 23, 2009 12:02 AM
Nice article .JQuery seems to be vey interesting
Comment posted by kevin on Saturday, January 24, 2009 6:57 PM
the thing is when the server control is within a template, the ID of each item is dynamically created.
the $('#serverControlID') becomes not that useful. The problem can be solved using > or class selectors. But there are times you have to write more codes in order to make it work with asp.net. I am very glad MS finally decide to include JQuery as part of VS. Can wait for the final product.
Comment posted by Morad Farshid on Thursday, January 29, 2009 5:43 PM
For someone just starting with jquery and wishing to use it with ASP.NET this artilce is a must read. Excellent. Everything works as described.
Comment posted by dustin on Friday, February 6, 2009 6:08 PM
Nyce, but you should really WARN the newbees here about the uselessness of Jquery in msft's gawd-awful postbacks...

document.ready things are GONE when you post back.

I love JQuery but sheesh! what a pain to use it with asp.net in the real world!
Comment posted by Jerad on Tuesday, February 10, 2009 3:15 PM
How are you able to use the asp control ID's in the jquery code?  

It only works for me when I either use the generated id (eg ctl00$ContentPlaceHolder1$button1), or some other workaround like button1.ClientID
Comment posted by Jerad on Tuesday, February 10, 2009 3:17 PM
"How are you able to use the asp control ID's in the jquery code? "

It works as in the example when you don't use a master page (my site uses them, and I always have, so if you use one, I guess you'll have to find a workaround, bummer)
Comment posted by qis on Thursday, February 12, 2009 9:59 AM
I installed Hotfix and alsp sp1 foe visual web developer express 2008 and .Net framework. I am getting the intellisence but not able to make your code work. is there any thing i am missing.

BR
Comment posted by Suprotim Agarwal on Thursday, February 12, 2009 11:00 AM
Jerad: Here's an article that should help you out: http://john-sheehan.com/blog/custom-jquery-selector-for-aspnet-webforms/

qis: Can you use the Contact form and mail me the code. I will have a look at why it ain't working.
Comment posted by anoop on Saturday, February 14, 2009 2:10 AM
can we use this in visual studio 2005
Comment posted by anoop on Saturday, February 14, 2009 2:11 AM
can we use this in visual studio 2005
Comment posted by cetchells on Saturday, February 14, 2009 6:58 AM
Small note, but if you download the compressed version of jquery with the .min.js extension, remove the .min part of the file name. Then it works.
Comment posted by Dave Hanna on Thursday, February 26, 2009 10:48 AM
The Hotfix for Intellisense support apparently does not apply to the Visual Studio Team System.  (When I try to install it,it says "None of the products addressed by this update are installed on this computer."  And the Knowledge base article says it applies only to Visual Studio 2008 and Visual Web Developer 2008 and not to any other version of VS.)
Do you know if there is a way to get intellisense support in the Team System?
Comment posted by mayuresh on Wednesday, March 4, 2009 4:08 PM
Adding the same code to a child page inheriting a master page..cause the page to referesh on postback

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

    <script src="../Scripts/jquery-1.2.6.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">

        $(document).ready(function() {

        $("ctl00$ctl00_ContentPlaceHolder1_btnShowAlert").click(function() {
            alert("Show Hello");
            })

        });        
        
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <br />
    <asp:Button ID="btnShowAlert" runat="server" Text="Show Alert" />
    
</asp:Content>
Comment posted by Tan on Friday, March 6, 2009 5:40 AM
Thanks a lot.
Very simple and easy to understand. Presented nicely.
Tan
Comment posted by Harold Chattaway on Saturday, March 14, 2009 10:34 PM
I have just confirmed also that the Jquery intellisense does not work in Team system Development edition as noted by Dave Hanna. It does seem to work if you have a separate .js file with your script code and place a "/// <reference path="jquery.js" />" in the top of the code. This hooks up the Intellisense file. But Intellisense does not work in a aspx page! PITA! Works fine in VS 2008 sp1 Professional though.

Comment posted by Bino on Monday, March 23, 2009 11:45 PM
Why do we need to use JQuery, if just an alert requires these many lines of coding, and even the syntax is entirely different. I dont know y people are creating things based on existing items with different syntax as they wish.
Comment posted by Suprotim Agarwal on Tuesday, March 24, 2009 3:00 AM
Bino: As mentioned in the article, "Well that’s it for an introduction. Remember that this article is only an introduction and in no way demonstrates the capabilities of jQuery. " ..Did you check out the other articles or the jQuery site http://jquery.com to see what jQuery can do?
Comment posted by Avinash on Wednesday, April 8, 2009 8:36 AM
I followed the above steps, however I am not getting intellisense, any idea why?
Comment posted by avinash on Wednesday, April 8, 2009 8:43 AM
when I install the hotfix, its showing this error:

"None of the products that are addressed by this software update are installed on this computer. Click Cancel to exit setup."
Comment posted by abhilashca on Wednesday, April 29, 2009 6:47 AM
Nice post to start jQuery.
Really simple.
But, even after installing the hotfix, I's not able to get the intellisense.
Thanks.
Comment posted by Azad on Thursday, April 30, 2009 7:07 AM
Thanks,It's really helpful for beginners.
Comment posted by wozi on Thursday, May 7, 2009 10:02 AM
Avinash, do you have 1.3.2 version? If yes, change file name
jquery-1.3.2-vsdoc2.js
to:
jquery-1.3.2-vsdoc.js
Comment posted by hoangthangdl on Thursday, May 21, 2009 1:51 PM
very good...
Comment posted by Michael on Thursday, July 23, 2009 1:33 AM
I use VS Team System 2008 SP1  (Version 9.0.30729.1 SP) and everything is working great for me.
Comment posted by Sudhanshu Tripathi on Friday, July 31, 2009 7:35 AM
<script type="text/javascript" src="Script/jquery-1.2.6.js">
<script type="text/javascript">
        $(document).ready(function() {
        $("#Button1").click(function() {
            alert("Hello world!");
        });

        });
    </script>

<asp:Button ID="Button1" runat="server" Text="Button" />

The above code is not executing on button click.
how to show alert messgae on button click using jquery
Comment posted by hai on Monday, August 10, 2009 1:29 AM
<script type="text/javascript">
  alert("Hello world!"); </script>
Comment posted by Manoj Bisht on Monday, October 19, 2009 10:02 AM
Excellent article for beginner's but i'm unable to download VS2008 SP1 hotfix. The link is n't at work. Please let me know where i can download this one
Comment posted by Banai Gurjar on Wednesday, November 25, 2009 11:20 AM
you should not use to difficult way to jquery,because all of beginner is no brilent mind so they easaly get it and implement,,so i hope you will introduce a normal way to jquery in next implementation
Thanks
Comment posted by Neeraj on Wednesday, December 16, 2009 4:25 AM
Hi dear,

Great explanation.
Comment posted by Konrad on Tuesday, January 5, 2010 10:23 AM
Something important when referencing server controls,
if you have a asp:Button control, $("#Button1") won't work.
You need to use this $("#<%= Button1.ClientID %>")
Comment posted by Sarnendu De on Wednesday, January 6, 2010 12:42 AM
Hi Konrad,
$("#Button1") is working fine both in Visual Studio 2008 and 2010 Beta. In general it is working for server controls also.
Thanks
Sarnendu De
Comment posted by Sarnendu De on Wednesday, January 6, 2010 1:02 AM
Hi Sudhanshu,
Code you posted is working fine.Please check js file in src is in correct folder.
Same code like your but in visual studio 2010 Beta, works in 2008 also:
<script type="text/javascript" src="Scripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#Button1").click(function(event)
  {
    alert("Welcome to jQuery");
  });
});
</script>
<asp:Button ID="Button1" runat="server" Text="Button" />
Thanks
Sarnendu De
Comment posted by Sarnendu De on Wednesday, January 6, 2010 1:10 AM
In Visual Studio 2008, we need to add a folder Scripts and add javascript file but in Visual Studio 2010 Beta it is integrated and Scripts folder with js files jquery-1.3.2.js,jquery-1.3.2.min.js,jquery-1.3.2-vsdoc.js will be there.
Thanks
Sarnendu De
Comment posted by Rita V on Wednesday, January 13, 2010 5:46 PM
I have visual studio 2008 SP1 and I have also downloaded  jquery-1.2.6.js,
jquery-1.2.6-vsdoc.js and hotfix. Following your sample,the alret message doesn't pop up?
What else I need to do?
Comment posted by Rita V on Wednesday, January 13, 2010 5:51 PM
I downloaded jquery-1.3.2.js version and it is working fine.
Thanks!
Comment posted by karl on Tuesday, January 26, 2010 2:55 AM
nice article,you teached me how to use jquery. :) thanks a lot!
Comment posted by gdgfdgfd on Monday, February 8, 2010 1:45 AM
nice article,you teached me how to use jquery. :) thanks a lot!
Comment posted by tyrty on Wednesday, February 10, 2010 9:09 AM
nice article,you teached me how to use jquery. :) thanks a lot!
Comment posted by Gangadhar G M on Tuesday, April 13, 2010 4:10 AM
Nice article Thanks
Come to know What is JQuery...lastly... :)
Comment posted by Andrea on Tuesday, April 20, 2010 7:43 AM
Nice article, but remember that is not possible to use asp component ID in JQuery, because its dinamically assigned. In my opinion, I prefer to use HTML simple control (like <input type="button" ..../>).
Comment posted by Qutub on Thursday, April 22, 2010 3:14 AM
Thanks a lot.
Appretiate your presentation skills
Comment posted by Kasim Mohamed on Thursday, April 22, 2010 7:31 AM
Very good article for beginner
Thanks...
Comment posted by Arshi on Saturday, May 15, 2010 2:07 AM
Nice articale.Thank u very much.
Comment posted by Nice article Thanks on Wednesday, May 19, 2010 1:17 AM
Nice article Thanks
Come to know What is JQuery...lastly... :)
Comment posted by young-hyun on Thursday, May 27, 2010 5:23 AM
<script src="jquery-1.3.2.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
    $(document).ready(function() {
    $('#<%= Button1.ClientID %>').click(function() {
        alert("Hello world!");
    });

    });
</script>
Comment posted by Abhishek on Thursday, May 27, 2010 11:00 AM
WONDERFUL article... I was so scared whenever I heard the term jQuery as I thought it was something very difficult. This article just made it so simple. Thank you so much. You are the BEST !!
Comment posted by ajay kumar singh on Tuesday, June 22, 2010 4:14 AM
thanks to you for basic knowledge for jquery
Comment posted by Arindam on Wednesday, June 30, 2010 8:05 AM
Thanks a lot. I have been trying to learn it from past few days,and this article gave me a good overall idea.  
Comment posted by i put the following code but its not working on Saturday, July 31, 2010 9:24 AM
<script type = "text/javascript" src = "~/Scripts/jquery-1.3.2-vsdoc.js" ></script>
    
    <script type="text/javascript">
        $(document).ready(function() {

        });
    </script>
     <script type="text/javascript">
         $(document).ready(function() {
             // add code here
         });
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
        $("#Button1").click(function() {
            alert("Hello world!");
        });

    });
  </script>

  <asp:Button ID="Button1" runat="server" Text="Button" style="height: 26px" />
Comment posted by Paul Pacurar on Monday, August 2, 2010 7:13 AM
If anyone is working like me, in VS2010 with ASP.NET MVC2 know that this article doesn't help very much. In fact it leads to a lot of confusion (for beginners, at least). Where to add the button? The script directive? I didn't work for me, or I got various errors.. Does anyone know what to do (systematically) in order to use jQuery in a MVC2 web app?
Thanks
Comment posted by onyango on Friday, August 20, 2010 7:45 AM
Great article very good. I am a beginner and things were just very OK . I love it.
Comment posted by pickatutorial.com on Wednesday, October 6, 2010 11:08 AM
Very useful article. Thanks for sharing.
Comment posted by Sam............. on Monday, October 18, 2010 2:19 AM
Very useful article. Thanks for beginner............:)
Comment posted by Nagaraju varma.v on Wednesday, October 27, 2010 8:06 AM
good explanation
Comment posted by gsdi on Thursday, November 18, 2010 4:20 AM
ndiov
Comment posted by Ninja Brazil on Tuesday, November 23, 2010 2:18 PM
Very good article!

Very simple and powerfull!
Comment posted by Deepthi Somani on Friday, December 3, 2010 5:38 AM
hi all,
Even after followed the above method i didn't got the Jquery Intellisense in Visual Studio 2008,plz help me...
Comment posted by Suprotim Agarwal on Friday, December 3, 2010 10:56 PM
Deepthi: Did you try Intellisense over CDN as explained in one of my articles here http://www.devcurry.com/2010/02/visual-studio-jquery-intellisense-over.html
Comment posted by Sushain Chhangani on Tuesday, December 21, 2010 1:42 PM
Hi all,

Nice article Suprotim. I work in LA. I have a doubt and will be obliged if you can solve it. One of my menu bar items redirects to a page (dashboard.aspx) on click wihich is sql intensive. In other words, it takes time for the page to load (~30secs). I wanna show like a loading image with grayed out background so that UI looks like it's working. The menu bar item is placed in the masterpage.

Any suggestion??

Comment posted by Jim on Tuesday, December 21, 2010 5:26 PM
Thanks for getting me started with JQuery
Comment posted by Suprotim Agarwal on Thursday, December 23, 2010 3:08 AM
Sushain: Thanks. You can use a jQuery Progress Bar http://docs.jquery.com/UI/Progressbar. Malcolm has written an article here Using the jQuery ProgressBar Widget in ASP.NET Applications- http://www.dotnetcurry.com/ShowArticle.aspx?ID=384

Also check this article for an asp.net ajax approach - http://www.dotnetcurry.com/ShowArticle.aspx?ID=227
Comment posted by Sushain on Wednesday, December 29, 2010 1:12 AM
Thanks Suprotim. I appreciate your response. Will try it out.
Comment posted by Rajesh on Friday, February 4, 2011 5:43 AM
hi it is nice information. i am using vs2005, please can you advice how can i call aspbutton server side click event.
Comment posted by mahesh on Wednesday, February 9, 2011 1:42 PM
Hi Suprotim,

Can you please check why following code not working ?

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script src="Scripts/jquery-1.4.4-vsdoc.js" type="text/javascript" />
    <script src="Scripts/jquery-1.4.4.js" type="text/javascript"></script>  
  
        <script type="text/javascript">
            $(document).ready(function() {
                $("#Button1").click(function() {
                    alert("Hello world!");
                });

            });
    </script>

    
</head>
<body>
    <asp:Button ID="Button1" runat="server" Text="Button" />


</body>

</html>
Comment posted by mahesh on Wednesday, February 9, 2011 1:44 PM
Sorry forgoet to put the form tag in above code

<%@ Page Language="C#" AutoEventWireup="false"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script src="Scripts/jquery-1.4.4-vsdoc.js" type="text/javascript" />
    <script src="Scripts/jquery-1.4.4.js" type="text/javascript"></script>  
  
        <script type="text/javascript">
            $(document).ready(function() {
                $("#Button1").click(function() {
                    alert("Hello world!");
                });

            });
    </script>

    
</head>
<body>
<form runat="server">
    <asp:Button ID="Button1" runat="server" Text="Button" />
</form>

</body>

</html>
Comment posted by mahesh on Wednesday, February 9, 2011 1:46 PM
And I am running the above code on VS 2008 with SP1 and the hotfix you mentioned in the Site.
Comment posted by Suprotim Agarwal on Friday, February 11, 2011 6:36 AM
Mahesh: Do not add a reference to the <script src="Scripts/jquery-1.4.4-vsdoc.js" type="text/javascript" /> in your code. Visual Studio automatically picks that file if it's in the same folder as the jQuery file. Also make sure that you have a Scripts folder which has the jQuery file you are referencing (in your case jquery-1.4.4.js)

Alternatively you can also use the jQuery file hosted on a CDN. here's an example

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>  
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js" type="text/javascript"></script>  
  
        <script type="text/javascript">
            $(document).ready(function () {
                $("#Button1").click(function () {
                    alert("Hello world!");
                });

            });
    </script>      
</head>
<body>
<form id="Form1" runat="server">
    <asp:Button ID="Button1" runat="server" Text="Button" />
</form>
</body>
</html>

Note: Current version of jQuery is jQuery 1.5
Comment posted by Paresh on Monday, February 14, 2011 11:26 PM
<script type="text/javascript" src="~/Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#Button1").click(function () {
            alert("Hello world!");
        });

    });
</script>


<asp:Button ID="Button1" Text="Click" runat="server" />

I am not getting alert message when i click on button.
Can u tell what is error?
Comment posted by thedrs on Wednesday, February 16, 2011 3:53 AM
Paresh - as one of the comments above says:

use $("#<%= Button1.ClientID %>")
instead of
$("#Button1")

Also if you are using a master page with content blocks on child pages, see the comment referring to that too.
Comment posted by Hemanth on Friday, February 18, 2011 1:36 AM
Explained how to get start with using jquery.
Thanks for informative article.
Comment posted by Amir Nasiruddin on Thursday, May 12, 2011 2:03 AM
superb link

http://weblogs.asp.net/scottgu/archive/2008/11/21/jquery-intellisense-in-vs-2008.aspx
Comment posted by Amir Nasiruddin Sayanik on Thursday, May 12, 2011 2:05 AM
http://www.dotnetcurry.com/ShowArticle.aspx?ID=231
Comment posted by ramu on Friday, August 12, 2011 5:11 AM
<script src="App_Data/script/jquery-1.2.6.js" type="text/javascript"/>
     <script type="text/javascript">
    
      $(document).ready(function()
      {
      $(("#<%= Button1.ClientID %>").click(function()
      {
       alert("helloworld");
       });
       });
why it is not working
please give me reason
Comment posted by ramu on Friday, August 12, 2011 5:11 AM
<script src="App_Data/script/jquery-1.2.6.js" type="text/javascript"/>
     <script type="text/javascript">
    
      $(document).ready(function()
      {
      $(("#<%= Button1.ClientID %>").click(function()
      {
       alert("helloworld");
       });
       });
why it is not working
please give me reason
Comment posted by Dheeraj @ Techreuters.com on Sunday, September 18, 2011 5:38 AM
I am Little bit cinfused, If we are using $('#Button1') for finding server control and same for html control.
Than wat makes difference between these two controls.
Comment posted by Dheeraj Bansal @ Techreuters.com on Sunday, September 18, 2011 5:47 AM
@ Ramu it is not working because you have to use Button1.ClientClick proeprty at the code behind file.
Comment posted by smallville costume on Friday, October 21, 2011 3:01 AM
Good post. This is a very interesting article.
Comment posted by Raja on Monday, November 28, 2011 1:03 AM
<head>
    <title>Test</title>
    <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnClick").click(function () {
                $("#pnlTest").show();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="btnClick" runat="server" Text="Click" />
        <asp:Panel ID="pnlTest" style="display:none;" runat="server" BorderColor="Blue">
            <asp:Label ID="lblTest" runat="server" Text="Hello World" ForeColor="Teal" Font-Names="Verdana"></asp:Label>          
        </asp:Panel>
    </div>
    </form>
</body>

What's the problem in above code. After clicking the button it's showing the panel, but it's making immediately panel going to be hide.
Can anybody  please tellme
Thanks in Advance.
Raja
Comment posted by jayakrishna on Monday, November 28, 2011 11:21 PM
Hi Raja,

Just please add this code "return false" under $("#pnlTest").show();.
Because your calling the function on button click. So when you click on button the page will reload again so the pannel will automatically hide.
Comment posted by Raja on Tuesday, November 29, 2011 12:06 AM
Thank you Jayakrishna, it's workig fine.
Comment posted by jayakrishna on Tuesday, November 29, 2011 3:01 AM
no probs raja. If u need anything for jquery i help you..
Comment posted by Raja on Wednesday, November 30, 2011 3:39 AM
JQueryJSON
-----------
<script type="text/javascript" src="Scripts/jquery-1.2.6.js"> </script>
    <script language="javascript">
        $(document).ready(function () {
            $("#ddlCountry").change(function () {
                $("#ddlState").html("");
                var countryID = $("#ddlCountry > option[@selected]").attr("value");
                if (countryID != 0) {
                    $.getJSON('LoadStates.ashx?countryID=' + countryID, function (states) {

                        $.each(states, function () {
                            $("#ddlState").append($("<option></option>").val(this['ID']).html(this['Name']));
                        });
                    });
                }
            });

            $("#ddlState").change(function () {
                $("#ddlCity").html("");

                var stateID = $("#ddlState > option[@selected]").attr("value");
                if (stateID != 0) {
                    $.getJSON('LoadCities.ashx?stateID=' + stateID, function (states) {

                        $.each(states, function () {
                            $("#ddlCity").append($("<option></option>").val(this['ID']).html(this['Name']));
                        });

                    });
                }
            });
        });
    </script>


in my aspx page i have 3 dropdownlist controls(country,state,city) and i am binding the data for country in pageload from database.
In  LoadStates.ashx
--------------------
public class LoadStates : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        Int32 countryID = Convert.ToInt32(context.Request.QueryString["countryID"]);
        DataSet lvDs = new Bal().GetStates(countryID);

        StringBuilder strStates = new StringBuilder();

        if (lvDs.Tables[0].Rows.Count > 0)
        {
            strStates.Append("[");

            strStates.Append("{");
            strStates.Append("\"Name\":\"--Select--\",");
            strStates.Append("\"ID\":\"0\"");
            strStates.Append("},");

            for (int i = 0; i < lvDs.Tables[0].Rows.Count; i++)
            {
                strStates.Append("{");
                strStates.Append("\"Name\":\"" + lvDs.Tables[0].Rows[i]["state_name"] + "\",");
                strStates.Append("\"ID\":\"" + lvDs.Tables[0].Rows[i]["state_id"] + "\"");
                strStates.Append("},");
            }

            strStates.Append("]");
        }

        context.Response.ContentType = "application/json";
        context.Response.ContentEncoding = Encoding.UTF8;
        context.Response.Write(strStates.ToString());
        context.Response.End();

    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

------------------- same like in LoadCities.ashx also
but after selecting the country am getting error at '$("#ddlState").append($("<option></option>").val(this['ID']).html(this['Name']));'
error is 'Microsoft JScript runtime error: Object doesn't support this property or method'

but the dropdown's was getting loaded. If i write static code in LoadStates.ashx something like as below am not getting any error. Can u please tell me the solution.

Static Values
-------------
public class LoadCities : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        string StateID = context.Request.QueryString["StateID"];        
        //Contact Database to get th elist of cities based on StateID
        StringBuilder strCities = new StringBuilder();
        if (StateID == "1")
        {
            strCities.Append("[");

            strCities.Append("{");
            strCities.Append("\"City\":\"Chennai\",");
            strCities.Append("\"ID\":\"1\"");
            strCities.Append("},");

            strCities.Append("{");
            strCities.Append("\"City\":\"Coimbatore\",");
            strCities.Append("\"ID\":\"2\"");
            strCities.Append("}");

            strCities.Append("]");
        }
        else if (StateID == "2")
        {
            strCities.Append("[");

            strCities.Append("{");
            strCities.Append("\"City\":\"Bangalore\",");
            strCities.Append("\"ID\":\"1\"");
            strCities.Append("},");

            strCities.Append("{");
            strCities.Append("\"City\":\"Belgaum\",");
            strCities.Append("\"ID\":\"2\"");
            strCities.Append("}");

            strCities.Append("]");
        }
        context.Response.ContentType = "application/json";
        context.Response.ContentEncoding = Encoding.UTF8;
        context.Response.Write(strCities.ToString());
        context.Response.End();
    }
    public bool IsReusable {
        get {
            return false;
        }
    }
}

Comment posted by gopi on Thursday, December 8, 2011 5:52 AM
hi
  i want to validate the text box using jquery..can any one help me...
Comment posted by Raja on Tuesday, December 13, 2011 3:33 AM
I am getting the following error while using JQuery. And this error was coming in IE8 only. It works fine in firefox.
'microsoft jscript runtime error object doesn't support this property or method '
and my code is
<script type="text/javascript">
        $(document).ready(function () {
            $('#<%=btnRegister.ClientID %>').button();
            $('#<%=btnSignIn.ClientID %>').button();
        });
    </script>
and i have added JQuery referece also.
Please anybody help me...


Comment posted by Viktor on Tuesday, December 13, 2011 3:43 PM
great!!! tanks for the article in a fabulosus job
Comment posted by Bvenkat Jeewesh on Wednesday, January 4, 2012 5:16 AM
Sir,I m creating online shopoping cart in asp.net.i have already display product items in datalist through paging. I have two button used in datalist one is ViewDetails and another is  AddToCart. Sir, I m using PopUP windows using Jquery when click on ViewDetails button. Now How to Display Particular Product Images When i will click On ViewDetails button.
Please Solve my Problem.

With Warm Regards
Bvenkat Jeewesh
Junior Programmer
Comment posted by Hamid on Saturday, March 10, 2012 4:54 AM
is it possible that every time you click the button the words change?
Comment posted by charles on Tuesday, March 20, 2012 5:46 AM
please help me recommend a book for me
to study jquery, am a beingner and i hope i
will study it very well.
Comment posted by gasdf on Sunday, April 15, 2012 3:52 AM
Very Interesting
Comment posted by Siddique Baig on Tuesday, April 17, 2012 7:52 PM
very useful dude! it`s cleared my mind but i am looking, how to use ASP.NET Menu Control with JQuery in order to create Accordion menu, Could you please help on this
Comment posted by sunny on Sunday, April 29, 2012 12:14 PM
Can Any tell me the code to hide and show the list items of asp:listbox control using jquery not by using postback
Comment posted by Hemik on Tuesday, May 8, 2012 3:18 AM
Thanks...It's really very nice work... :)
Comment posted by Sudhanshu on Saturday, May 19, 2012 6:34 AM
Your example is not full proof. Sorry. you dont take into account the master page.
Comment posted by ahamd (www.datanesia.com on Monday, July 2, 2012 2:28 AM
very good inform
Comment posted by sakshi on Friday, July 6, 2012 2:04 AM
easy to learn
Comment posted by JKT on Tuesday, July 17, 2012 3:56 PM
THANKS
Comment posted by mani on Wednesday, July 18, 2012 12:49 AM
chill dude use full stuff Thank you
Comment posted by Shantu Gadhavi on Wednesday, August 1, 2012 2:32 AM
Thanks a lot Now I understand the actual meaning of JQuery.. Againg Thanks a lot.. Its very helpful to me.
Comment posted by Rupali on Saturday, August 18, 2012 4:48 AM
Very Nice Article
Thanks
Comment posted by puskar gupta on Wednesday, August 22, 2012 4:52 AM
Thanks a lot Now I understand the actual meaning of JQuery.. Againg Thanks a lot.. Its very helpful to me
Comment posted by puskar gupta on Wednesday, August 22, 2012 4:52 AM
Thanks a lot Now I understand the actual meaning of JQuery.. Againg Thanks a lot.. Its very helpful to me
Comment posted by Sayan on Sunday, September 30, 2012 12:17 PM
Here are few jquery examples that you can experiment with

<a href="http://fundapass.blogspot.in/search/label/Jquery">Jquery examples</a>
Comment posted by anwar on Saturday, November 10, 2012 3:40 AM
fine
Comment posted by Sachin on Monday, March 18, 2013 4:43 AM
Sorry Sir But It's not working........
Comment posted by Jack Ingman on Thursday, May 2, 2013 3:21 AM
Thanks, but why do you type ‘$(‘. when only $( is needed.
Comment posted by slkl on Wednesday, May 15, 2013 2:47 AM
,kjkljkl
Comment posted by qwe on Wednesday, June 19, 2013 3:08 AM
I installed Hotfix and alsp sp1 foe visual web developer express 2008 and .Net framework. I am getting the intellisence but not able to make your code work. is there any thing i am missing.
Comment posted by qwe on Wednesday, June 19, 2013 5:03 AM
I am not getting alert message when i click on button.
Can u tell what is error?
Comment posted by asp.net developer on Friday, June 28, 2013 7:59 AM
http://dotnetslackers.com/articles/ajax/Using-jQuery-with-ASP-NET.aspx

this site is very useful for this solution
thanks & regards,
alliancetekinc @ http://alliancetek.com/
Comment posted by pooja soni on Monday, July 22, 2013 1:03 AM
Good explanations with example..nice
Comment posted by Diana on Wednesday, August 7, 2013 5:50 AM
Hi Suprotim,
Its a nice article and very good effort!!
I am so happy to see the article.

I want to know some more things regarding jquery
I am very new to this.
I am developing a website which has got static pages and dynamic pages.
But now the issue is I have used jquery for sliding the pages by updating the panels.

Now the problem is, I am not able to use multiple forms for my dynamic pages.
Its giving an error as There should be only one server side tag(runat ="server")

How can I load multiple asp.net forms using jquery??


Thanks in Advance
Comment posted by sk on Wednesday, August 14, 2013 6:39 AM
good but but
Comment posted by chrin songheang on Friday, November 1, 2013 1:06 AM
Hello I learn Query
Comment posted by SK on Tuesday, November 5, 2013 1:44 AM
Your article is very lucid. I tried to do following, but btn click alert is not happening, just the form is getting submitted. Can you pl point out what is going wrong ?
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Misc.aspx.cs" Inherits="WebApplication1.Misc" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
        <script type="text/javascript" src="Scripts/jquery-1.4.1.js" />
        <script type="text/javascript">
            $(document).ready(function () {
                $("#myBtn1").click(function () {
                    alert("I am clicked");
                });
            });
        </script>
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Button runat="server" ID="myBtn1" Text="My Button" />
    </div>
    </form>
  
</body>
</html>
Comment posted by SK on Tuesday, November 5, 2013 2:23 AM
It's crazy ! After adding the word 'event' as $("#myBtn1").click(function(event)  the code started working. Now even w/o it or writing eeve or xyz, the code works. I am using VS2010 Express. Following code works -
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Misc.aspx.cs" Inherits="WebApplication1.Misc" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
        <script type="text/javascript" src="Scripts/jquery-1.4.1.js" ></script>    
        <script language="javascript" type="text/javascript">
            $(document).ready(function () {
                $("#myBtn1").click(function (eve) {
                    alert("I am clicked from JQry");
                });
            });
        </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Button runat="server" ID="myBtn1" Text="My Button" onclick="myBtn1_Click" />
    </div>
    </form>
  
</body>
</html>
Comment posted by SK on Tuesday, November 5, 2013 2:51 AM
First alert will come, next myBtn1_Click from code-behind will fire.
Comment posted by Pranja on Tuesday, December 24, 2013 11:44 AM
Thanks a Lot.really it so helpfull for Beginner like me.
Its a nice article and very good effort!!
I am so happy to see the article and with the help of this article i am understand to use jquery.
once again thanks.
Comment posted by Aditya Sharma on Monday, December 30, 2013 9:55 PM
Your sample program is not working....
Comment posted by Bob A on Thursday, March 20, 2014 2:15 PM
The controls must have the ClientIDMode='Static' attribute set.
Comment posted by eer on Thursday, August 7, 2014 4:47 AM
sddf
Comment posted by Digu on Saturday, September 27, 2014 11:50 PM
I want to display the Hello world in a Label but on clicking the button the page gets refreshed and the text disappears.
What should I do. Please Help
Comment posted by henry on Wednesday, April 29, 2015 9:12 PM
Do you have any insight about putting a databound. Formview onto a jquery modal dialog, on an asp.net web form? No luck finding the most basic of actionable guidance. Thank you
Comment posted by Suprotim Agarwal on Wednesday, April 29, 2015 10:53 PM
@henry A couple of articles written a while ago but it should help

http://www.devcurry.com/2012/07/aspnet-mvc-displaying-partial-views.html
http://www.dotnetcurry.com/showarticle.aspx?ID=1048
http://www.devcurry.com/2012/08/aspnet-mvc-partial-views-jquery.html