Registration open for April 2018 batches of ASP.NET MVC and Design Patterns instructor-led online courses. Conducted by Bipin Joshi on weekends. Register today ! Click here for more details.

Introduction to jQuery for ASP.NET Developers

If you are keeping yourself updated with the latest in the .NET sphere, you
are probably aware that Microsoft has provided an inbuilt support for jQuery in
Visual Studio 2010. Though it was possible to use jQuery with ASP.NET even
before VS 2010, formally including jQuery as a part of website created using
VS2010 means that more and more developers are going to learn and use it. If you
haven't tried jQuery yet this article series will teach you everything needed to
master jQuery and use it in ASP.NET applications.

What is jQuery?

"jQuery is a fast and concise JavaScript Library that simplifies HTML
document traversing, event handling, animating, and Ajax interactions for rapid
web development. jQuery is designed to change the way that you write
JavaScript."

Let's try to understand this description of jQuery in a bit detail.

jQuery is a JavaScript library

As a ASP.NET developer you must have used JavaScript in one way or the other.
The standard JavaScript no doubt helps you code rich and responsive web pages
but the amount of code that you need to write is often too much. For example, if
you wish to write a fancy popup menu from ground up using JavaScript it might be
a time consuming task. To simplify such development and make you more productive
several JavaScript libraries are available and jQuery is one of them. There are
others such as Mootools, Prototype and Dojo. The fact that Microsoft is
supporting jQuery in its products and investing resources into it clearly
indicates its popularity. As you would expect jQuery is cross-browser and
supports all leading browsers including IE 6+, FF 2+, Chrome, Safari 3+ and
Opera 9+.

jQuery is fast and concise

jQuery is highly optimized library. Moreover it is compact. The production
version of jQuery 1.4.3 is just 26 KB and development version 179 KB. This
compactness means less data to be downloaded at client side without compromising
stunning UI effects.

Scope of jQuery

jQuery simplifies HTML DOM navigation considerably. For example,
document.getElementById("Text1") becomes just $("#Text1"). Simple. Isn't it?
Most of the JavaScript functionality goes in client side event handlers. jQuery
is handy when it comes to event handling. If you are thinking about your AJAX
functionality don't worry. jQuery allows you to make AJAX calls to ASP.NET Web
Services, WCF services or even page methods. If needed jQuery can be used along
with ASP.NET AJAX.

jQuery is designed to change the way that you write JavaScript

That's true! jQuery dramatically changes the way you write JavaScript code.
Initially you may find syntax of jQuery bit odd but once you get hang of it you
will probably never look at any other library (or at least to the traditional
way of writing JavaScript). For example, a common JavaScript file contains too
many small to huge functions and you keep calling them individually whenever
required. With jQuery the "chain" of operations makes your code compact and
handy.

Ok. Enough of introduction. Now, let's complete the "hello world" ritual :-)
In next section you will build a simple ASP.NET webform with some server
controls on it that perform a trivial job of displaying "Hello world".

Download jQuery

Before you start any development with jQuery you need to download its latest
version. You can do so by visiting
http://jquery.com and then downloading "Development" version. If you are
using VS2010 then you need not download anything because when you create a new
website by default jQuery library is already added for you (see screenshot
below)

In the above screenshot jquery-1.4.1.js is the development version,
jquery-1.4.1.min.js is minified production version and jquery-1.4.1-vsdoc.js is
the VS2010 IntelliSense file that enables IntelliSense for jQuery (see below).

In the remainder of this article I will be using VS2008. If you are using
VS2010 then just cleanup the default website by removing master page and other
unwanted stuff.

Design a simple web form

Create a new website in VS2008 and create a new folder named Scripts. Copy
the downloaded jQuery file in the Scripts folder. Though you can place it
anywhere inside your website it is recommended to keep all JavaScript files
under one folder typically named Scripts. The default name for the jQuery file
is jquery-1.4.3.js but you can change it to something else if you so wish.

Now open the default web form and add a <script> tag in its <head> section as
shown below :

The first line is where jQuery magic starts. The $ sign is a shortcut to base
object jQuery. So, $(...) is actually same as jQuery(...). If you ever coded in
ASP.NET AJAX this concept should be familiar to you. The ready() is an event
that fires when the wen page under consideration is fully loaded and its various
elements are ready to be accessed. The event handler for ready event is supplied
in the parenthesis as OnPageReady. OnPageReady() is a normal JavaScript function
that wires an event handler for the client side click event of the button. It
does so again by using $ shortcut. This time, however, ID of the button control
is specified prefixing it with #. The click is an event and you specify its
handler as OnButtonClick. The event handler receives an event object giving more
information about the event. The OnButtonClick() is another function that simply
displays "Hello World from jQuery!" using JavaScript alert. The OnButtonClick
function
also calls event.preventDefault() method so as to prevent web form postback that
normally would have happened due to Button web server control.

This is a compact version of the code that achieves the same functionality.
Here, instead of defining separate functions you have written all the code there
itself. You may compare this code with anonymous methods of C#.

Adding something more...

Now that the "Hello world" ritual is over let's add some extra features to
our code. Begin by defining the following CSS class in your web form:

The CSS class NoFocus will be applied to the textbox when it doesn't have
focus whereas CSS class Focus will be applied when the textbox receives the
focus. To accomplish this change the preceding code (compact version) as shown
below:

Notice the lines marked in bold letters. The click event handler of the
button now displays whatever has been entered in the textbox. To retrieve
textbox value you use val() method. Initially the textbox won't have focus and
its CSS class should be NoFocus. This is done using addClass() method. The
focus() and blur() event handlers simply add and remove the appropriate classes
using addClass() and removeClass() methods respectively.

The following figure shows a sample run of the web page with the modified
code.

That's all for this part. In the next part you will learn about jQuery
Selectors and how to use their power while selecting certain elements from a web
page.

Bipin Joshi is a software consultant, trainer, author and yoga mentor having 22+ years of experience in software development. He also conducts online courses on ASP.NET MVC, ASP.NET Core and Design Patterns. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced the Yoga way of life he also teaches Ajapa Yoga to interested individuals. To know more about him click here.