JQuery Tutorials

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.