In Focus

An Introduction to JQuery with ASP.NET

In this article, I am going to show how to get started with JQuery using Visual Studio 2008. The article also shows you how to use Visual Studio 2008 intellisense feature to develop JQuery and ASP.NET applications.


 

In this article, we will learn to get started with JQuery using Visual Studio 2008. The article also helps in using the intellisense feature of Visual Studio 2008 to develop jQuery and ASP.NET applications.

 

What is jQuery?

 

jQuery is a fast, lightweight JavaScript library that is CSS3 compliant and supports many browsers. The jQuery framework is extensible and handles the DOM manipulations, CSS, AJAX, Events and Animations, very nicely. 

 

What is the difference  between JavaScript and jQuery?

 

JavaScript is a language whereas jQuery is a library; written using JavaScript.

 

Let us get an example, which will help you in understanding the use of jQuery with ASP.NET application.

 

First of all download the jQuery library from Cleck Here 

And intellisense documentation Click Here 

 

Make a folder with the name Scripts inside your application. Right click on Scripts folder > Add Existing Item > Browse to the path where you downloaded the jQuery library (jquery-1.3.2.js) and the intellisense documentation (jquery-1.3.2-vsdoc2.js) > Select the files and click Add. The structure will look similar to the following image:

JQuery1.JPG

  Image 1.

 


In this example, I am going to
Display an alert on asp: Button click using jQuery.

 

 Here, code in Default.aspx

 


<%
@ 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>My First Application With JQuery</title>

 

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

 

    <script type="text/javascript">

        $(document).ready(function() {

            $("#Button1").click(function() {

                alert("Welcome jQuery !");

            });

        });

    </script>

 

</head>

<body>

    <form id="form1" runat="server">

    <div>

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

    </div>

    </form>

</body>

</html>

 

 

When you Run the application and click on Button, the displayed alert will be:


jQuery.JPG

Image 2.