Published: 09 Jul 2007
By: Kazi Manzur Rashid
Download Sample Code

Demonstrates how to develop a Data Bound Templated Control with ASP.NET AJAX.

Introduction

In this article, I will show you how to create a Repeater Control with ASP.NET AJAX. The Control mimics on the client side the original ASP.NET Repeater Control. Why do we need another Repeater control when there is already a first class Repeater available with the ASP.NET? Let me explain it in the following section.

Background

ASP.NET AJAX is a great platform for developing Rich Internet Applications (RIAs). It replaces the traditional full Page refresh with a partial page refresh model where only the updated part of the page gets refreshed. There are two ways to develop Ajax Applications:

  • Server Centric Development Model
  • Client Centric Development Model

In Server Centric Development or UpdatePanel model, the developer creates the pages with regular Controls wrapped in one or more UpdatePanels. This approach adds extra overhead in the regular page life cycle, which is required to generate the changes of the updated part of the page. From the developer point of view, it is rather easy and takes less time to implement Ajax with this model, compared to Client Centric Development.

On the other hand, in the Client Centric Development model, the developer calls Web Services, which return the data. The data is quite small compared to the Server Centric Development Model, as it doesn't contain the HTML that the UpdatePanel returns. The refreshing logic resides in JavaScript code on the client side, and thus offloads the web server from any rendering responsibility. This makes it possible to create more scalable web applications compared to the Server Centric Model. However, implementing this approach takes more time, as the developer does not get the various benefits of the Server Centric Development Model; such as a rich set of Controls, Design time support, familiar APIs and so on.

The Ajax Control Toolkit contains some valuable Controls, but it does not contain Controls that work with data. Currently there is no way to work with the data Controls such as the GridView, DataList or Repeater in the Client Centric Development model. The reason is that these Controls do not have any object model on the client side, which we can leverage with JavaScript. In this article, I will show how to create a simple yet powerful data-bound templated Repeater with ASP.NET AJAX. This Control exposes the same object model on the client side which developers are familiar with from the server side object.

Functionality

The Control will provide the following features:

  • Allow developers to define the HeaderTemplate, ItemTemplate, AlternateTemplate, SeparatorTemplate and FooterTemplate in Visual Studio like those used in the server side Repeater Control.
  • Support setting of a DataSource (a JavaScript Array, most of the time returned from a Web Service call). The Control is populated when the DataBind() method is called.
  • Raise the ItemCreated and ItemDataBound event when rendering the control. The item that is currently rendered will be passed in these events so that the developer can have a chance for further processing the data.
  • Full design time support in Visual Studio.

Server Side

Let's begin with the server side. Creating a templated Control is not an issue. Many references are available both in MSDN and in the online .NET Community sites. All it takes is exposing some ITemplate properties. The Repeater Control exposes the following ones:

The next step is to render the template so that we can repeat it on the client side when rendering the Control along with the data. Rendering an ITemplate is quite simple. You may have already done it quite a few times if you've already built some data-bound templated controls. The rendering of this Control is a bit different; instead of adding the template as a child Control, we only need the HTML generated by that template. The following code shows how to generate the HTMLs from an ITemplate:

The last and final step on the server side is injecting the HTML generated by all the ITemplates in the script descriptor, so that we can use it on the client side. For example, for the following Control declaration in an .aspx page:

The $create statement generated by ASP.NET AJAX will look like the following:

Note: Please don't get upset with the u003c and u003e characters. These are the encoded values of < and /> characters.

Client Side

The main challenge on the client side is rendering the template with the data while allowing the developer to access the DOM elements of each template instance in the ItemCreated and ItemDataBound events. On the server side, the INamingContainer interface ensures that all child Controls marked with runat="server" have a unique ID when they are rendered. However, there is no built-in support for unique ID generation on the client side. This is why we need to roll our own logic.

On the Client Side, we have the templates in separate HTML snippets. In order to ensure the Unique ID generation; we first have to convert this HTML into a programmable object. The best way to convert it is creating a temporary DOM element and assigning its innerHTML property to the server generated template. Next, we iterate the child nodes of the temporary DOM element to replace the ID with our custom Naming Container logic, and add the child nodes to the Control. Finally, we create an instance of RepeaterItem for each template and store it in the Items collection. Then, we fire the ItemCreated and ItemDataBound events. The following code shows how it is done:

The following figure shows the Object Model of the Ajax Repeater.

Figure 1: Object model of the Ajax Repeater

RepeaterOM.jpg

An Example

In this section, I have provided a simple Video Search Service, which scans YouTube.com, MetaCafe.com, and DailyMotion.com etc for a given keyword. The following figure shows a screenshot of a search performed with my favorite band, Pink Floyd, as the keyword.

Figure 2: The Video Search Service

VideoSearch.jpg

The purpose of this sample is to show you a side by side comparison of the Server Centric and the Client Centric Development Models. In Server Centric Development Model, we are using the original Repeater, Update Panel and Update Progress controls. In the Client Centric Development Model, we are using the Ajax Repeater along with the Web Service. First, let's see the .aspx files.

Listing 6: ServerCentricDevelopment.aspx

Listing 7: ClientCentricDevelopment.aspx

As you can see, the .aspx files are almost identical, except that we are using regular DOM elements instead of ASP.NET Server Controls in the Client Centric Development Model. Now, let's see the codebehind of these two files.

Listing 8: ServerCentricDevelopment.aspx

Listing 9: ClientCentricDevelopment.aspx

The code is also almost identical. In the Client Centric Development Model we are using the DataSource, DataBind and ItemDataBound events of the Ajax Repeater to find the proper DOM element to bind the data.

Now, let's see the Data Transmission part of both these models. This will make you understand why the Client Centric model is far superior to the Server Centric model. I have set the debug mode to false and turned on caching and compression of the ScriptReshourceHandler in the web.config. The following screenshots shows the loaded files in Firebug.

Figure 3: ServerCentricDevelopment.aspx

ServerInitial.jpg

Figure 4: ClientCentricDevelopment.aspx

ClientInitial.jpg

As you can see in the initial loading in the Client Centric Model requires less files to load. For example, we do not have to load the MicrosoftAjaxWebForms.js file since we are not using the Partial Rendering.

The following screenshots show the data transmitted when showing the first page of search results for the keyword Pink Floyd.

Figure 5: ServerCentricDevelopment.aspx

ServerResult.jpg

Figure 6: ClientCentricDevelopment.aspx

ClientResult.jpg

As you can see, in the Client Centric Model we are downloading 11K less data for the same search results. This 11K is nothing but the unnecessary HTML tags and ViewState that the update panel returns.

What is Missing?

At the time of writing this article, the Repeater Control does not have the following features:

  • It does not support the overlapping HTML tags. For example, a table start tag in the header template and the end tag in the footer template.
  • Does not expose the ItemCommand event.

Summary

The provided Repeater Control is part of the AjaxDataControls Project hosted at CodePlex. While working in Pageflakes, we have tried various ways to ease our pain in the Client Centric Development model, but none of this proves to be scalable. One good example is Omar Al Zabir Dropthings . Certainly this kind of Controls will boost the development times with the Client Centric Model, as well as the Application scalability.

References

<<  Previous Article Continue reading and see our next or previous articles Next Article >>

About Kazi Manzur Rashid

Kazi Manzur Rashid, Nickname Amit is a Diehard fan of Microsoft Technology. He started programming with Visual Basic 5.0 back in 1996. Since then he has developed many diversified solutions in his professional career, which spans from Anti-Spyware Tool to Personalized Start Page. Currently He is wor...

This author has published 10 articles on DotNetSlackers. View other articles or the complete profile here.

Other articles in this category


Animating a Web Form using ASP.NET AJAX
In this article you will learn how to animate a webform using asp.net ajax.
Jquery Ajax
JQuery makes communicating with the server very, very easy. JQuery uses get(), getJSON(), and post(...
jQuery Deferred Objects Promise Callbacks
jQuery Deferred/Promise objects untangle spaghetti-like asynchronous code.
jQuery in Action 2nd edition: Queuing functions for execution
This article is taken from the book jQuery in Action, second edition. This segment shows how you can...
Test120Jan
This is my custom article

You might also be interested in the following related blog posts


Ajaxion - Standalone AJAX - Part 2 of 2 - C# and Java Example read more
DevReach Follow-up, Part I read more
Speeding up AJAX Applications read more
Ajax Control Toolkit: new controls, bug fixes read more
Make SharePoint 2007 Act Like SharePoint 2010, Updated read more
Free Webinar on RadGrid for ASP.NET AJAX optimization - October 1st read more
Gaia Ajax 3.6 Alpha released: Ajax GridView and Adaptive Rendering ++ read more
Announcing the Microsoft AJAX CDN read more
Telerik Announced Official Version of Visual Style Builder for AJAX Controls read more
Make SharePoint 2007 Act Like SharePoint 2010 (sort of ...) read more
Top
 
 
 

Discussion


Subject Author Date
placeholder I like it Mustafa Noman 7/9/2007 6:51 AM
Re: Kazi Manzur Rashid 7/9/2007 8:29 AM
placeholder Sharing Idea Mohammad Sayeed Ahmed 7/9/2007 4:12 PM
yes i have ckecked all Mustafa Noman 7/10/2007 5:30 AM
placeholder wow! Davi Lee 7/11/2007 11:05 PM
Re: Wow Sonu Kapoor 7/11/2007 11:14 PM
placeholder It works great. Bob Mazzo 7/19/2007 10:00 AM
Good article and control, but I have a weird error. Peter P 7/19/2007 5:17 PM
placeholder Re:Good article and control, but I have a weird error. Peter P 7/19/2007 5:43 PM
Re: It works great Kazi Manzur Rashid 7/19/2007 6:32 PM
placeholder Re: Good article and control, but I have a weird error Kazi Manzur Rashid 7/19/2007 6:38 PM
Re:Good article and control, but I have a weird error. Peter P 7/19/2007 6:57 PM
placeholder Asp.net Repeater Bob Mazzo 7/26/2007 11:37 AM
Re:Asp.net Repeater Kazi Manzur Rashid 7/26/2007 4:22 PM
placeholder example with database Amizh Thini 7/29/2007 9:09 AM
Re: example with database Kazi Manzur Rashid 7/29/2007 1:52 PM
placeholder Microsoft .Net Solutions, Microsoft .Net Programming, Dotnet Solutions Dharmesh Acharya 7/30/2007 7:58 AM
Repeater issue Bob Mazzo 8/1/2007 10:15 AM
placeholder About performance Nach Bsch 8/1/2007 7:36 PM
About performance 2 Nach Bsch 8/1/2007 7:41 PM
placeholder Re: Repeater issue Kazi Manzur Rashid 8/1/2007 8:03 PM
Re: About performance Kazi Manzur Rashid 8/1/2007 8:11 PM
placeholder More on performance Nach Bsch 8/1/2007 8:13 PM
Thanks for answering! Nach Bsch 8/1/2007 8:20 PM
placeholder Re: Thanks for answering Kazi Manzur Rashid 8/1/2007 8:33 PM
Re: Re: Thanks for answering Nach Bsch 8/1/2007 8:40 PM
placeholder Controls are freezing Bob Mazzo 8/16/2007 10:50 AM
Question Duarte Nunes 8/25/2007 6:11 PM

Please login to rate or to leave a comment.