JQuery in ASP.NET

In the earlier post, we saw an introduction to JQuery. In this post, we will dive into details of how to use JQuery. Visual Studio 2008 currently supports JQuery 1.2.6 version, although the Current version of JQuery is 1.3.1. Download the JQuery.js and JQuery.vsdoc.js files into the Web application. Refer the script files using a Script Manager.

Let’s say we have two label and two textbox controls denoting the UserName and Password.

In JQuery, Selector syntax allows us to select a HTML element easily, unlike the JavaScript where we had GetElementByID and Other logic to get the element from HTML DOM.

If we want to set a style of a Control, like background color of all textboxes, we can grab all textboxes using the “Selector” syntax as $(“:text”) and we can set the style properties inside the script in Header section, as follows.

 

Here pageLoad() comes from Microsoft AJAX library and it is fired once the document is ready and when all the Controls are loaded, earlier than the normal window’s Load event, where all the images are also loaded. Do not be surprised to see the style being set when the screen is loaded.

Visual Studio 2008 supports full intelli-sense for writing JQuery scripts, as follows:

 

 

 

 

 

Here is a summary of different Selector syntaxes:

$(“#firstName”)           ­Selects element with Id firstName

$(“:text”)                    ­Selects all text boxes

$(“.required”)              ­Selects all elements with required class

$(“#grd tr:even”)         ­Select even rows from an element with an Id of grid

JQuery selectors apart from setting the Styles, can also be used for registering event handlers and to change the structure of the document. Since JQuery is cross-browser compatible, it can be used to set the styles of controls because there is not complete compatibility across style-sheets of different browsers.

Lets say we want to set the style of all elements that follow a particular css class on a particular event. Here we will show Red background on Focus. We will decorate the password textbox with the css class “regular”. To set the background style on Focus, we use Selector syntax to grab all controls with css class “required” and register the event handler to the Focus event.

Let us define an eventHandler named “focusHandler” and register it to the “focus” event. The “this” keyword captures the Control in which the event is invoked; in this case, the textbox. Notice that the style is set using the Selector syntax operating on “this” keyword.

Now you should see the Password textbox in red color when the textbox is focused.

Let us play with setting styles of a gridView. We shall have a header style and a row style as follows:

We will add the RowStyle to all even rows of a grid. Let us grab the grid using the Selector syntax for Id and choose the even rows and apply the Style. We haev an addClass method in JQuery to add a cssClass to an element.

 

We also have removeClass method. The following example removes the rowStyle and adds a header style.

Notice that we are calling JQuery methods in a Chain-like fashion. This follows the Builder pattern. This is an important improvement over the Javascript, because there is no necessity to parse the HTML DOM structure which is expensive. We can retrieve a set of elements and then perform a series of operations on the same set of elements.

JQuery supports three kinds of animations – Show/Hide, Slide down/Slide up, Fade in/Fade out.

For more animations, download JQuery UI, which is a separate library which provides the following animations.

  1. Interactions – Draggable, Droppable, Resizeable, Selectable, Sortable
  2. Widgets – Accordion, Dialog, Slider, Tabs, Datepicker, Progressbar
  3. Effects – Blind, Bounce, Clip, Drop, Explode, Fold, Highlight, Pulsate, Scale, Shake, Slide, Transfer

JQuery can be extended using Plug ins. Check out http://plugins.jquery.com which contain the following different plug ins:

In a later post, we will explore the use of Animations and Plugins in JQuery.

To summarize, In this post, we saw

  1. How to use JQuery
  2. What are JQuery selectors
  3. What is Chaining of methods
  4. What are JQuery Animations
  5. What are JQuery plugins

 

 

 

 

 

 

 

 

Leave a comment