HighOnCoding.com: Using BlockUI Plugin with JQuery Ajax API

Using BlockUI Plugin with JQuery Ajax API

AzamSharp
Published Date: 5/27/2009 10:24:42 AM
Views: 3717

Abstract:
In the last article we introduced the JQuery BlockUI plugin and demonstrated how it can help us creating a better modal popup. We also demonstrated how to use the BlockUI with the GridView control and use it as a confirmation box. In this article we are going use the BlockUI with respect to the Ajax requests.
Why BlockUI with Ajax Requests?

The purpose of blocking the user interface while the Ajax request is in progress gives user a notification that some processing is being done behind the scenes. This will ensure that user does not interfere with the processing and allow the request to be completed.

Using Ajax to Display List of Products on the Screen:

We are going to use the Northwind database Products table to display the products on the screen. We are using LINQ to SQL as our data access layer but you are free to use a different data access layer for your application. Here is the screenshot of the LINQ to SQL class diagram.

As, you can see we only have two tables "Categories" and "Products". Categories and Products have a one to many relationship as a single Category can have many products.

Now, let's implement our BlockUI DIV which is displayed when the Ajax call is in progress.

The above DIV is pretty basic and you can make it much better by applying styles to it.

Now, it is time to implement the Ajax request. We will be using the JQuery Ajax API in this article but please feel free to use the Ajax framework of your choice. Here is the small portion of the Ajax request:

The GetProducts method is fired when the Ajax request is executed. Let's see the implementation of the GetProducts method which is contained in the AjaxService.asmx file.

The code above is very simple as it just gets the products from the Northwind database and serialize it using the JavaScriptSerializer. Unfortunately, the result of this request is a status code 500 error. Take a look at the screenshot below:

The screenshot shows that the error is related to a circular reference. This is because the Category object has a reference to the Product object and the Product object has a reference to the Category object. The JavaScriptSerializer is not smart enough to resolve this conflict and throws a circular reference exception.

There are many ways to solve this problem and we inclined towards creating a light weight Data Transfer Object (DTO). The purpose of the DTO object is to provide the basic properties of the domain objects to the presentation layer. We have created an extension method called ToDTO<T> which is responsible for creating the DTO's for the domain objects.

First, let's create the ProductDTO class which represents the basic properties we need on the presentation layer.

And here is the implementation of the ToDTO extension method:

Now, we can change our GetProducts method in the AjaxService.asmx to utilize the ToDTO<T> method as shown below:

The extension method gives easy access for the domain object to convert itself into a DTO object. Here is the JQuery Ajax call to request a list of products.

The loadProducts function is fired when the user clicks the HTML button. The loadProducts uses the BlockUI plugin to block the user interface. An Ajax request is issued which fires the GetProducts method in the AjaxService.asmx webservice. When the request is completed the $.unblockUI() method is fired which unblocks the user interface. On request success the response is evaluated into an object and iterated over to create a list item to display the product name.

Below you can see the animation screenshot. We have put the thread on sleep for 3 seconds so that you can experience the effect.

Conclusion:

In this article we learned how to use the BlockUI JQuery plugin with Ajax requests. The BlockUI provides an easy way to notify the user that processing is in place. We also learned how to map our simple domain objects into plain DTO's. This will eliminate circular dependency and provide us with a simple reusable object which can be easily used on the presentation layer.

References:

1) GridView Confirmation Box Using JQuery BlockUI
2) Extended Screencast on JQuery Whole 38 Minutes!
3) A Look into JQuery Ajax API
4) BlockUI
5) JQuery

[Download Sample]

Comments/Feedbacks


	Subject: question Name: ferhat Date: 8/27/2009 1:39:18 AM Comment: i didn't understand that: "response.d" (especially d property) in js function. what does it do?


	Subject: Re: Question Name: Mohammad Azam Date: 8/29/2009 8:17:48 PM Comment: Hi Ferhat, The response.d contains the response received from the async call.