To list small collection of records on the page with custom layout, we can use asp:Repeater control. This article explains how to use asp:Repeater control.
Repeater
Repeater control is a data-bound control that provides us maximum amount of flexibility in terms of layout in rendering the collection of records. As the name would suggest, this control is meant for displaying /repeating the similar kind of data again and again. This is quite powerful control but not very widely used and the probable reasons could be (i) there is more work to do for developer in this case compared to other list controls. (ii) For many scenarios, other controls would be preferable because of re-usability, customizability etc
Get 500+ ASP.NET web development Tips & Tricks and ASP.NET Online training from ASP.NET experts.
In the previous article, we learnt about How to paginate records in DetailsView?. In this article, we shall learn how list small collection of records on the page with custom layout using asp:Repeater control.
ASPX PAGE
<asp:Repeater ID="Repeater1" runat="server" EnableViewState="false">
<ItemTemplate>
<div style="border:2px dotted #c0c0c0;padding:10px;margin:10px;">
<b><%# Eval("FirstName") + " " + Eval("LastName") %></b><br />
Age: <%# Eval("Age") %><br />
Number : <%# Eval("AutoId") %><br />
Is Active : <%# Eval("Active") %>
</div>
</ItemTemplate>
</asp:Repeater>
In the above code snippet, on the .aspx page we have a asp:Repeater control where we have
defineid our data layout in the ItemTemplate and separator layout in SeparatorTemplate.
ItemTemplate is used to define the data template in which the records displays.
SeparatorTemplate is used to define the separator template that appears as a separator after each record.
AlternateItemTemplate is used to define the data template layout for every alternate record.
CODE BEHIND
string _connStr = ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GetData();
}
}
private void GetData()
{
DataTable table = new DataTable();
// get the connection
using (SqlConnection conn = new SqlConnection(_connStr))
{
// write the sql statement to execute
string sql = "SELECT AutoId, FirstName, LastName, Age, Active FROM PersonalDetail ORDER By AutoId";
// instantiate the command object to fire
using (SqlCommand cmd = new SqlCommand(sql, conn))
{
// get the adapter object and attach the command object to it
using (SqlDataAdapter ad = new SqlDataAdapter(cmd))
{
// fire Fill method to fetch the data and fill into DataTable
ad.Fill(table);
}
}
}
Repeater1.DataSource = table;
Repeater1.DataBind();
}
The code behind use ADO.NET to retrieve the data from the database and sets the data source of the Repeater control. When we run the page, my output looks something similar to below picture.
OUTPUT

Hope this article was useful. Thanks for reading.
Keep reading my forth coming articles. To read my series of articles on ASP.NET,click here.