JQuery Tutorials

Select Deselect GridView Rows using a Checkbox in JQuery

22 January 2011
29305 Views

Many websites require functionality for letting their site visitors to select and deselect all the rows in GridView using a single checkbox normally available in the header row. You may have seen the examples of such functionality in Yahoo Mail or Hotmail inbox where you can select all the emails by clicking the single Checkbox on top of the email's grid. In this tutorial, I will show you how you can provide this functionality in ASP.NET GridView control using few lines of JQuery code.
Select Deselect GridView Rows using a Checkbox in JQuery

Accessing ASP.NET CheckBoxList Control at Client Side using JQuery

11 January 2011
38110 Views

JQuery is truly a fantastic technology introduced for web developers in last few years. If you have been using it in your ASP.NET projects for some time, you may have already been playing many cool tricks on your web pages by combining it with powerful ASP.NET server side controls. It’s fairly straight forward to use JQuery with controls such as buttons, textboxes etc.. However, some of the ASP.NET controls make life very difficult due to the HTML they render on the page. One such control is ASP.NET CheckBoxList control and in this tutorial I will show you how you can use JQuery to get the selected checkbox item's labels as well as their values.
Accessing ASP.NET CheckBoxList Control at Client Side using JQuery


Sorting ASP.NET GridView Control using JQuery Tablesorter Plugin

24 December 2010
37174 Views

Displaying records in a tabular format is very common functionality of modern websites. Almost all the websites you visit these days have data to display in a table or datagrid and most of them also required the functionality of sorting records based on any column. Last week I had a chance to work with one of a popular JQuery plugin called Tablesorter and I was so impressed that I decided to write a full tutorial on it. In this tutorial, I will show you how you can use JQuery Tablesorter plugin with ASP.NET GridView control to provide client side sorting functionality to your site visitors.
Sorting ASP.NET GridView Control using JQuery Tablesorter Plugin

Editing ASP.NET ListView Control using JQuery AJAX and Web Services

16 December 2010
63731 Views

JQuery is growing in stature day by day and so as the number of interesting scenarios in which it can be used in modern web applications. One of the very common UI requirements is to display the tabular data on page in controls such as ASP.NET GridView or ListView and then provides record editing facility using a popup dialog through which user can update data in the backend database as well as in the front end control asynchronously without a full server post back. There are very few tutorials online, which shows how to put together a complete example of using ASP.NET ListView control to display data, JQuery code to display Popup Dialog, AJAX code to send asynchronous calls to the server, ADO.NET code to select/update backend database and ASP.NET web service. In this tutorial, I will show you how to use all these pieces of the jigsaw puzzle together to implement a complete online record editing scenario.
Editing ASP.NET ListView Control using JQuery AJAX and Web Services

Creating Popup Dialog Windows using JQuery

19 November 2010
304608 Views

If you are a regular internet user and specially visit sites like Facebook, Twitter, Yahoo Mail, I am sure you are familiar with the popup dialog windows appears on the screen asking you different options or display information or warning messages. Popup dialog windows are child windows and commonly used in GUI systems and User Interface designs to interact with the user without disturbing the main application or window workflow. In this tutorial, I will show you how you can create simple and modal popup dialog windows using JQuery.
Creating Popup Dialog Windows using JQuery

Display Flickr Photo Feeds in ASP.NET using JQuery

12 November 2010
24822 Views

Flickr is world’s largest and most popular photos hosting and sharing website, which provides a platform to many amateur and professional photographers to share their work with people all over the world. It has millions of photos in its database, and it provides photo feeds to thousands of websites and blogs every day. If you are an experience developer you can use Flickr API to spice up any website or blog with high quality photos, and if you scared off Flickr API then don’t worry Flickr has public photos feed available to you, which returns photos based on matching keywords in a pretty straight forward manner. In this tutorial, I will show you how you can mix the magic of JQuery and JSON with Flickr photo feeds to retrieve and display photos ASP.NET.
Display Flickr Photo Feeds in ASP.NET using JQuery

Using JQuery, AJAX, JSON and ASP.NET Web Services

06 November 2010
100349 Views

Due to the latest paradigm shift in web development, more and more websites are loading and displaying all types of dynamic contents on the web pages. Web 2.0 based websites such as Gmail. Facebook and Twitter have not only changed the user’s expectations but also forced developers to learn more dynamic and exciting ways to build web applications. Client side web technologies like AJAX, XHTML, DOM, JavaScript and JQuery are now mandatory ingredients of every web developer resume. In my previous tutorial, I have shown you how you can call ASP.NET web services using JQuery AJAX capabilities. In this tutorial, I will show you how you can pass parameters to web services and how you can use JSON data returned from web services to display dynamic contents on web page.
Using JQuery, AJAX, JSON and ASP.NET Web Services

Calling ASP.NET Web Services using JQuery AJAX

31 October 2010
61563 Views

I hope you have probably heard about AJAX by now, or at least you have used an AJAX based web application such as Gmail or Yahoo Mail, etc. AJAX has changed the way we developed web sites in the past by giving them responsiveness similar to Desktop applications. In Plain English, AJAX means that instead of waiting for the whole web page to load you can load and display only what you need to. Technically speaking, it’s a technique to communicate with servers through JavaScript asynchronously and handle external data. In this tutorial, I will show you how you can call ASP.NET web service using JQuery, which is the most popular and widely used JavaScript library.
Calling ASP.NET Web Services using JQuery AJAX

ASP.NET GridView Mouseover Hover Effect using JQuery

30 October 2010
30653 Views

JQuery API has many CSS related functions, which can be used to create many UI effects in the modern web applications. The most common of those methods are addClass, removeClass and toggleClass, which add, remove or toggle CSS classes to any matched element. In this Tutorial, I will show you how you can create a simple mouseover hover effect on ASP.NET GridView Rows using JQuery CSS related methods.
ASP.NET GridView Mouseover Hover Effect using JQuery

Introducing JQuery for ASP.NET Developers

24 October 2010
48834 Views

If you are a web designer or developer or you are involved with any kind of website development, I am sure you have heard about "JQuery" from your clients, from your friends or colleagues or from any online article. JQuery is a lightweight open source JavaScript library that in a relatively short span of time has become one of the most popular libraries on the web. This is my first tutorial on JQuery and I am targeting all those ASP.NET developers who want to use JQuery in their projects but still don’t know from where to start.
Introducing JQuery for ASP.NET Developers