In this article, I will show you how to create a
Repeater Control with
AJAX. The Control mimics on the client side the original
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.
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.
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
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.
The Control will provide the following features:
- Allow developers to define the
FooterTemplate in Visual Studio like those used in the server side Repeater Control.
- Support setting of a
DataBind() method is called.
- Raise the
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.
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
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
$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.
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
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
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
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,
Floyd, as the keyword.
Figure 2: The Video Search Service
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
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
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
Figure 4: ClientCentricDevelopment.aspx
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
Figure 5: ServerCentricDevelopment.aspx
Figure 6: ClientCentricDevelopment.aspx
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
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.
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.
You might also be interested in the following related blog posts
Ajaxion - Standalone AJAX - Part 2 of 2 - C# and Java Example
DevReach Follow-up, Part I
Speeding up AJAX Applications
Ajax Control Toolkit: new controls, bug fixes
Make SharePoint 2007 Act Like SharePoint 2010, Updated
Free Webinar on RadGrid for ASP.NET AJAX optimization - October 1st
Gaia Ajax 3.6 Alpha released: Ajax GridView and Adaptive Rendering ++
Announcing the Microsoft AJAX CDN
Telerik Announced Official Version of Visual Style Builder for AJAX Controls
Make SharePoint 2007 Act Like SharePoint 2010 (sort of ...)
Please login to rate or to leave a comment.