The Repeater control performs a very common function that most Web developers have encountered in their projects. Very often you need to display records from a database, and most likely you would use a FOR loop to write the HTML code so that the records can be displayed within a table. Using the Repeater control, this process can very easily be automated.
Using the Repeater Control
The repeater control can be found within the Toolbox in Visual Studio .NET
Simply drag and drop the control onto the Web Form. To customize the Repeater control, switch to HTML view
Simply drag and drop the control onto the Web Form. To customize the Repeater control, switch to HTML view
It have five standard templates named:
<HeaderTemplate>, <ItemTemplate>, <SeparatorTemplate>, <AlternatingItemTemplates> and <FooterItem>
Let's now add the <HeaderTemplate>, <ItemTemplate>, <SeparatorTemplate>, <AlternatingItemTemplates> and <FooterItem> elements to our Repeater control:
<asp:Repeater id="Repeater1" runat="server">
<HeaderTemplate>
<table border="1">
<tr bgcolor="#ffcc99">
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr bgcolor="#ffcccc">
<td><%# DataBinder.Eval(Container.DataItem, "au_id") %></td>
<td><%# DataBinder.Eval(Container.DataItem, "au_fname") %></td>
<td><%# DataBinder.Eval(Container.DataItem, "au_lname") %></td>
<td><%# DataBinder.Eval(Container.DataItem, "address") %></td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr bgcolor="#ccff99">
<td><%# DataBinder.Eval(Container.DataItem, "au_id") %></td>
<td><%# DataBinder.Eval(Container.DataItem, "au_fname") %></td>
<td><%# DataBinder.Eval(Container.DataItem, "au_lname") %></td>
<td><%# DataBinder.Eval(Container.DataItem, "address") %></td>
</tr>
</AlternatingItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
What I will do is to bind the Repeater control to a DataSet (we will do this shortly). To populate each row of the table with a record from the DataSet, I used:
In this case, "au_id" refers to the name of a column in the DataSet.
Finally, add a SqlDataAdapter control to your project and connect it to the Authors table within the Pubs database. In the Page_Load event, add in the following codes:
Private Sub Page_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) _
Handles MyBase.Load
If Not IsPostBack Then
Dim ds As New DataSet
SqlDataAdapter1.SelectCommand.CommandText = _
"SELECT * FROM Authors"
SqlDataAdapter1.Fill(ds, "employee_record")
Repeater1.DataSource = ds
Repeater1.DataBind()
End If
End Sub
The <separatortemplate> element allows you to inject a separator between rows of records. For example, you might wish to insert a horizontal rule between records, as the following shows:
...
</ItemTemplate>
<SeparatorTemplate>
<tr>
<td><hr></td>
<td><hr></td>
<td><hr></td>
<td><hr></td>
</tr>
</SeparatorTemplate>
<AlternatingItemTemplate>
...
Adding Button Controls to a Repeater
You can also add Button controls to a Repeater. For example, you might use a Button control to represent an Author ID, and when the button is clicked, display more information about the author.
Let's modify our HTML source to include a Button control. Change the line (there are a total of two such lines in our HTML source):
<td><%# DataBinder.Eval(Container.DataItem, "au_id") %></td>
to:
<td><asp:Button CommandName="ID"
Text=<%# DataBinder.Eval(Container.DataItem, "au_id") %>
runat=server/></td>
The above line will add a Button control within the Repeater control. The CommandName property is used to uniquely identify the button; if there is more than one Button control, each control must have a different CommandName.
Next, we need to modify the <asp:Repeater> element so that it knows which event to fire when the Button control is clicked. We need to specify the OnItemCommand property, indicating the event to service when the button is clicked:
<asp:Repeater id="Repeater1"
OnItemCommand="Button_ItemCommand" runat="server">
Lastly, code the routine for the Button_ItemCommand event:
Sub Button_ItemCommand(ByVal Sender As Object, _
ByVal e As RepeaterCommandEventArgs)
If e.CommandName = "ID" Then
Response.Write("ID selected is " & _
CType(e.CommandSource, Button).Text())
End If
End SubLabels: ASP.Net, Data Repeater |
