Understanding the Repeater Control in ASP.NET

As we all know to display data on a web application is important as per performance perspective. There are several data controls available in ASP.NET like GridView, DetailsView, FormView, Repeater, etc. But between all of these the Repeaters are much faster than others.

A Repeater Control is used to show the data as repeated mode. Data can bound from any type of data source like database, xml, etc.

It has several properties to define the Repeater control data but DataSource property is used to bind the data with Repeater. It provides different kinds of the templates for displaying the data. It doesn’t provide the auto code for paging, shorting, etc. You just need to write the manual code to achieve this.

ItemTemplate: It is used to render once per row of data.

AlternatingItemTemplate: It is used to render alternate row of data. You can change some styling with alternate row.

HeaderTemplate: It is used to render you header data which comes before your ItemTemplate data.

FooterTemplate: It is used to show details of that type of data which comes in the footer part. It always comes after the ItemTemplate data.

SeperatorTemplate: It is used to make separation between each line like you can place line breaks using this template.

Create an ASP.NETWeb Forms application “RepeaterControlDemo” using Visual Studio 2015 and add a new Web Form.

new

Provide the name for the page as Employee.aspx. Here we will add the Repeater control and bind the data from the database.

item

When you add new web form, the default template for the page as in the following.

web

Add Repeater Control

You can add Repeater using two ways, first you can direct drag and drop the Repeater Control from the ToolBox.

ToolBox

Or you can write code manually. I always prefer to write the whole code manually.

As I am going to bind the data with Repeater from the database, so you can modify the Employee.aspx page as in the following code,

Employee.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Employee.aspx.cs" Inherits="RepeaterControlDemo.Employee" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater ID="rptEmployee" runat="server">
<HeaderTemplate>
<table border="1">
<tr>
<th scope="col" style="width: 80px">Employee Id
</th>
<th scope="col" style="width: 120px">Name
</th>
<th scope="col" style="width: 100px">Email
</th>
<th scope="col" style="width: 120px">Age
</th>
<th scope="col" style="width: 100px">Address
</th>
<th scope="col" style="width: 100px">Department Name
</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label ID="lblEmployeeId" runat="server" Text='<%# Eval("Id") %>' />
</td>
<td>
<asp:Label ID="lblEmployeeName" runat="server" Text='<%# Eval("Name") %>' />
</td>
<td>
<asp:Label ID="lblEmail" runat="server" Text='<%# Eval("Email") %>' />
</td>
<td>
<asp:Label ID="lblAge" runat="server" Text='<%# Eval("Age") %>' />
</td>
<td>
<asp:Label ID="lblAddress" runat="server" Text='<%# Eval("Address") %>' />
</td>
<td>
<asp:Label ID="lblDepartment" runat="server" Text='<%# Eval("DepartmentName") %>' />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>

Employee.aspx.cs

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace RepeaterControlDemo
{
public partial class Employee: System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
BindEmployeeData();
}
}
private void BindEmployeeData()
{
string connection = ConfigurationManager.ConnectionStrings["myconnection"].ConnectionString;
using(SqlConnection con = new SqlConnection(connection))
{
using(SqlCommand objCommand = new SqlCommand("SELECT * FROM Employees emp INNER JOIN Department dep ON emp.Departmentid=dep.DepartmentId", con))
{
using(SqlDataAdapter objSqlDataAdapter = new SqlDataAdapter(objCommand))
{
DataTable dt = new DataTable();
dt.Columns.Add("Id");
dt.Columns.Add("Name");
dt.Columns.Add("Email");
dt.Columns.Add("Age");
dt.Columns.Add("Address");
dt.Columns.Add("DepartmentName");
objSqlDataAdapter.Fill(dt);
rptEmployee.DataSource = dt;
rptEmployee.DataBind();
}
}
}
}
}
}

Web.Config

<connectionStrings>
<add name="myconnection" connectionString="Data Source=My-Computer;Initial Catalog=TestEmployee;Integrated Security=True; User Id=sa; Password=mukeshkumar" providerName="System.Data.SqlClient" />
</connectionStrings>

So, now you can run the project to see how repeater control displays your data.

You can add the AlternatingItemTemplate and provide the different look and feel for alternate rows,

<AlternatingItemTemplate>
<tr style="background-color:#0094ff">
<td>
<asp:Label ID="lblEmployeeId" runat="server" Text='<%# Eval("Id") %>' />
</td>
<td>
<asp:Label ID="lblEmployeeName" runat="server" Text='<%# Eval("Name") %>' />
</td>
<td>
<asp:Label ID="lblEmail" runat="server" Text='<%# Eval("Email") %>' />
</td>
<td>
<asp:Label ID="lblAge" runat="server" Text='<%# Eval("Age") %>' />
</td>
<td>
<asp:Label ID="lblAddress" runat="server" Text='<%# Eval("Address") %>' />
</td>
<td>
<asp:Label ID="lblDepartment" runat="server" Text='<%# Eval("DepartmentName") %>' />
</td>
</tr>
</AlternatingItemTemplate>

We can also add the HeaderTemplate and FooterTemplate to make it beautiful.

HeaderTemplate

<HeaderTemplate>
<table border="1">
<tr>
<th scope="col" style="width: 80px">Employee Id
</th>
<th scope="col" style="width: 120px">Name
</th>
<th scope="col" style="width: 100px">Email
</th>
<th scope="col" style="width: 120px">Age
</th>
<th scope="col" style="width: 100px">Address
</th>
<th scope="col" style="width: 100px">Department Name
</th>
</tr>
</HeaderTemplate>

FooterTemplate

<FooterTemplate>
<tr>
<td colspan="6">
This is footer section
</td>
</tr>
</table>
</FooterTemplate>

Conclusion

So, today we learned about Repeater Control. How to bind data with Repeater control as well as we learned about different kinds of template in Repeater.

Suggest, what do you think?

Thanks for reading this article, hope you have enjoyed it. Please share your valuable feedback and suggestion through comments.

9 Comments

Join the conversation! Your thoughts help the community grow.

Ankur Mistry11y ago
good one
Gowtham K11y ago
Good Share
Sridhar Sharma11y ago
Nice Share
Sibeesh Venu11y ago
Nice Share
Gowtham Rajamanickam11y ago
Good One
Yaduveer Saini11y ago
This article very helpful for me....
Amandeep singh11y ago
good one
Aishwarya D11y ago
Nice
Humayun Kabir Mamun11y ago
Nice...