As powerful and elegant as the Repeater control is, there is no built mechanism for handling how an empty data condition will be displayed. Other controls, for example the GridView, provide properties and templates that will be rendered when the DataSource is void of data. Unfortunately no such behavior is built into the Repeater control. Fortunately, due to the inherent flexibility of the Repeater, it is fairly easy to add this functionality. Within this article, we'll explore using an existing Repeater to display a message when the data collection bound to the repeater is empty.
In the following code example, a Repeater is used to generate a table based on a databound Collection.
<asp:Repeater runat="server" ID="Repeater1">
<HeaderTemplate>
<table width="80%">
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><asp:Label runat="server" Text='<%# Eval("Model") %>' /></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
if (!IsPostBack)
{
List<Car> cars = new List<Car>();
Repeater1.DataSource = cars;
Repeater1.DataBind();
}
Since there haven't been any items added to the "cars" collection, the ItemTemplate will not be used and the Repeater will generate an empty table. Note that the behavior is to render the HeaderTemplate and FooterTemplate even though an empty collection has been bound to the Repeater. The following shows the resulting HTML.
<table width="80%">
</table>
Since the Header will render regardless of if there is are any items in the collection, this is a good place to put the HTML (or ASP.NET controls) that will display when there is no data to display. We will also set the Visible property based on the data count of the Repeater's DataSource.
Building on the previous example, the HeaderTemplate will now contain:
<table width="80%">
<tr runat="server"
visible='<%# ((ICollection)Repeater1.DataSource).Count == 0 ? true : false %>'>
<td>
There is no data to display
</td>
</tr>
There are a couple of items that should be noted in the above example.
- The Repeater has been referenced by it's ID.
- The DataSource property of the Repeater has been cast to an ICollection object. DataSource is defined as type object, but when data is bound to it, it must be of type ICollection. We are using the Count property from this interface to determine if the "Empty Data" message should display.
When there are several controls where the Visible property needs to be set, the logic can be moved to the code-behind for the page. This is shown in the following IsDataEmpty property.
protected bool IsDataEmpty
{
get
{
ICollection list = Repeater1.DataSource as ICollection;
return list.Count == 0 ? true : false;
}
}
The ASPX will change to reference this property as follows:
<table width="80%">
<tr runat="server"
visible='<%# IsDataEmpty %>'>
<td>
There is no data to display
</td>
</tr>
Regardless of which approach you use, the resulting HTML will now look like:
<table width="80%">
<tr>
<td>
There is no data to display
</td>
</tr>
</table>
As shown in the above examples, it is fairly simple to add HTML that will conditionally render based on the presence (or lack) of data bound to a Repeater.