jquery in asp.net

What is jQuery?

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. More Difference Click Here 

Advantages of using JQuery in web application?

1. It Improve the performance of the web application

2. It is light weight

3. Its language independent - It can be use with many different language, eg: Asp.Net, PHP, HTML, JSP,etc

4. It is browser compatible - Runs in most browser.

5. It is easy to learn - it uses javascript syntax.

6. You can do complex UI functionality with few lines of code.

7. You can implement ajax within your web application.  It can be used to avoid round trip (avoid page post back) yet able to perform database operation.

8. It is open source library, which is also officially integrated in visual studio 2010.

9. You will find lot of JQuery functionality shared other developers, which helps you to avoid in reinventing the wheel.

And much more...

1) How to use JQuery in Asp.net Web Application? 

Creating your first Hello World application in JQuery

Step 1: Open Visual Studio

Step 2: Create a new web application project (Web site...)

Step 3: Open master page of your web application.

Put this line of code, above </head>

<script type="text/javascript" language="Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Above line adds JQuery library reference to your web application, in simple terms with above line you web application understands JQuery syntax and work accordingly.

Step 4: Put following line of code in you content page inside <asp:Content>.  Below line will display "Hello World" alert when page loads.

<script language="javascript" type="text/javascript">

        $(document).ready(function () {

            alert("Hello World");             

        });

    </script>

Understanding  $(document).ready(function ()

If you want an JQuery event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.

$(document) - means page on which JQuery code lies.

.ready() - means page is loaded and your JQuery code is ready to be executed.

And for that reason you may find that most of JQuery code lies within

<script language="javascript" type="text/javascript">

        $(document).ready(function () {

         JQUERY CODE GOES HERE

});

</script>

So finally you will be able to display alert on page load in your asp.net web application with JQuery.

May be this question might comes to your mind, I can show "Hello World" alert without using JQuery then what is fun of using JQuery?

Well its too early to judge, since this article is for beginners i have explained with simple example there is lot more coming.

Where can I download jQuery?

You can Directlly download the jquery from this link

jquery-1.4.1-vsdoc.js

jquery-1.4.1.js 

jquery-1.4.1.min.js

If you are using visual stdio 2010 then you will not required fro download any type of  jquery

because in scripts folder all jquery is available  .

Most Probably we use only  jquery-1.4.1.js  this jquery library

2)  Simple Example for using a jquery

Open Visual Studio 2010 > File > New > Website > Choose ‘ASP.NET website ' from the templates > Choose your language (C# or VB) > Enter the location > Ok.
if scripts folder not available then perform this task
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.4.1.js) and the intellisense documentation (jquery-1.4.1-vsdoc.js) > Select the files and click Add. The structure will look similar to the following:

Now drag and drop the jquery 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.4.1.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:

examples

Example 1 – Display an alert on asp:Button click using jQueryAdd a Button element to the page as shown below:
 <asp:Button ID="Button1" runat="server" Text="Button" />
Drag and drop a button control on the form
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 How Are You");

        });

        });

    </script>

Ouptup