Data binding in ASP.NET Repeater control using SQLDataSource control

Introduction

In this article I will explain how to bind data to a repeater control in ASP.NET

Description

Repeater control displays repeated set of data from the data source. It can display data in any form as per our need, in a table layout, a div layout, a comma-separated list, an xml format, ordered list, unordered list etc. Repeater control is completely template based. It does not have any default layout. So we need to define a template to display data in the Repeater control.

Repeater control supports five templates, HeaderTemplate, ItemTemplate, AlternatingItemTemplate, SeparatorTmplate and FooterTemplate

Template Description
HeaderTemplate HeaderTemplate renders header of the Repeater control. It is called once for every Repeater control. For example, in a table layout it can be used to render opening <table> tag.
ItemTemplate ItemTemplate renders data row of the Repeater control. It is called for every record in the data source. For example, it can be used to render data records in <tr><td></td></tr> tags for every rows.
AlternatingItemTemplate AlternatingItemTemplate is called for every alternate record in the data source. For example, it can be used to change background of every alternate rows.
SeparatorTemplate SeparatorTemplate is used to provide a separator between records. For example, a horizontal ruler can be used to separate rows of the Repeater control.
FooterTemplate FooterTemplate is used to render footer of the Repeater control. It is also called once for every Repeater control like HeaderTemplate. For example, it can be used to render closing </table> tag.

Step 1:

Create a New ASP.NET project

ASP.NET New Project

Step 2:

Drag a SqlDataSource control on the form and write following

&lt;%--Add a connection string &quot;ConString&quot; in the web.config as per your database--%&gt;
&lt;asp:SqlDataSource
    ID=&quot;SqlDataSource1&quot;
    runat=&quot;server&quot;
    ConnectionString=&quot;&lt;%$ ConnectionStrings:ConString %&gt;&quot;
    SelectCommand=&quot;SELECT TOP 10 EmployeeID, LastName, FirstName, DepartmentID, Salary, HireDate FROM Employees&quot;&gt;
&lt;/asp:SqlDataSource&gt;

SqlDataSource is used to get data from the Employees table which we will bind to the Repeater control. You can use any other table.

Step 3:

Drag a Repeater control on the form and write following in the HTML source to render Repeater control as table

&lt;asp:Repeater
    ID=&quot;Repeater1&quot;
    runat=&quot;server&quot;
    DataSourceID=&quot;SqlDataSource1&quot;&gt;
    &lt;HeaderTemplate&gt;
        &lt;table&gt;
            &lt;tr style=&quot;background-color:Purple; color:White;&quot;&gt;
                &lt;td&gt;Employee ID&lt;/td&gt;
                &lt;td&gt;First Name&lt;/td&gt;
                &lt;td&gt;Last Name&lt;/td&gt;
                &lt;td&gt;Department ID&lt;/td&gt;
                &lt;td&gt;Salary&lt;/td&gt;
                &lt;td&gt;Hire Date&lt;/td&gt;
            &lt;/tr&gt;
    &lt;/HeaderTemplate&gt;
    &lt;ItemTemplate&gt;
        &lt;tr&gt;
            &lt;td&gt;&lt;%#Eval(&quot;EmployeeID&quot;) %&gt;&lt;/td&gt;
            &lt;td&gt;&lt;%#Eval(&quot;FirstName&quot;) %&gt;&lt;/td&gt;
            &lt;td&gt;&lt;%#Eval(&quot;LastName&quot;) %&gt;&lt;/td&gt;
            &lt;td&gt;&lt;%#Eval(&quot;DepartmentID&quot;) %&gt;&lt;/td&gt;
            &lt;td&gt;&lt;%#Eval(&quot;Salary&quot;) %&gt;&lt;/td&gt;
            &lt;td&gt;&lt;%#Eval(&quot;HireDate&quot;) %&gt;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ItemTemplate&gt;
    &lt;AlternatingItemTemplate&gt;
        &lt;tr style=&quot;background-color:Silver;color:White;&quot;&gt;
            &lt;td&gt;&lt;%#Eval(&quot;EmployeeID&quot;) %&gt;&lt;/td&gt;
            &lt;td&gt;&lt;%#Eval(&quot;FirstName&quot;) %&gt;&lt;/td&gt;
            &lt;td&gt;&lt;%#Eval(&quot;LastName&quot;) %&gt;&lt;/td&gt;
            &lt;td&gt;&lt;%#Eval(&quot;DepartmentID&quot;) %&gt;&lt;/td&gt;
            &lt;td&gt;&lt;%#Eval(&quot;Salary&quot;) %&gt;&lt;/td&gt;
            &lt;td&gt;&lt;%#Eval(&quot;HireDate&quot;) %&gt;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/AlternatingItemTemplate&gt;
    &lt;FooterTemplate&gt;
        &lt;/table&gt;
    &lt;/FooterTemplate&gt;
&lt;/asp:Repeater&gt;

Here, we are using a SqlDataSource control as the data source of the Repeater control so we have set DataSourceID of the Repeater control to SqlDataSource1. In the <HeaderTemplate>, opening tag of table and the table header is rendered. In the <ItemTemplate>, one table row is defined which uses Eval() method to get data from the data source. This block is repeated for every row in the data source and prints all the rows. <AlternatingItemTemplate> is used to change the background color of alternate rows.  And <Footer> template is used to render the closing tag of the table.

Complete HTML Source:

&lt;%@ Page Language=&quot;C#&quot; AutoEventWireup=&quot;true&quot; CodeBehind=&quot;WebForm1.aspx.cs&quot; Inherits=&quot;RepeaterExample.WebForm1&quot; %&gt;
&lt;!DOCTYPE&gt;
&lt;html&gt;
&lt;head runat=&quot;server&quot;&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;style type=&quot;text/css&quot;&gt;
        table
        {
            width:600px;
            border-spacing:0;
            border-collapse:collapse;
            border:1px solid navy;
        }
        td
        {
            width:100px;
        }

    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;form id=&quot;form1&quot; runat=&quot;server&quot;&gt;
    &lt;asp:Repeater
        ID=&quot;Repeater1&quot;
        runat=&quot;server&quot;
        DataSourceID=&quot;SqlDataSource1&quot;&gt;
        &lt;HeaderTemplate&gt;
            &lt;table&gt;
                &lt;tr style=&quot;background-color:Purple; color:White;&quot;&gt;
                    &lt;td&gt;Employee ID&lt;/td&gt;
                    &lt;td&gt;First Name&lt;/td&gt;
                    &lt;td&gt;Last Name&lt;/td&gt;
                    &lt;td&gt;Department ID&lt;/td&gt;
                    &lt;td&gt;Salary&lt;/td&gt;
                    &lt;td&gt;Hire Date&lt;/td&gt;
                &lt;/tr&gt;
        &lt;/HeaderTemplate&gt;
        &lt;ItemTemplate&gt;
            &lt;tr&gt;
                &lt;td&gt;&lt;%#Eval(&quot;EmployeeID&quot;) %&gt;&lt;/td&gt;
                &lt;td&gt;&lt;%#Eval(&quot;FirstName&quot;) %&gt;&lt;/td&gt;
                &lt;td&gt;&lt;%#Eval(&quot;LastName&quot;) %&gt;&lt;/td&gt;
                &lt;td&gt;&lt;%#Eval(&quot;DepartmentID&quot;) %&gt;&lt;/td&gt;
                &lt;td&gt;&lt;%#Eval(&quot;Salary&quot;) %&gt;&lt;/td&gt;
                &lt;td&gt;&lt;%#Eval(&quot;HireDate&quot;) %&gt;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/ItemTemplate&gt;
        &lt;AlternatingItemTemplate&gt;
            &lt;tr style=&quot;background-color:Silver;color:White;&quot;&gt;
                &lt;td&gt;&lt;%#Eval(&quot;EmployeeID&quot;) %&gt;&lt;/td&gt;
                &lt;td&gt;&lt;%#Eval(&quot;FirstName&quot;) %&gt;&lt;/td&gt;
                &lt;td&gt;&lt;%#Eval(&quot;LastName&quot;) %&gt;&lt;/td&gt;
                &lt;td&gt;&lt;%#Eval(&quot;DepartmentID&quot;) %&gt;&lt;/td&gt;
                &lt;td&gt;&lt;%#Eval(&quot;Salary&quot;) %&gt;&lt;/td&gt;
                &lt;td&gt;&lt;%#Eval(&quot;HireDate&quot;) %&gt;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/AlternatingItemTemplate&gt;
        &lt;FooterTemplate&gt;
            &lt;/table&gt;
        &lt;/FooterTemplate&gt;
    &lt;/asp:Repeater&gt;

    &lt;%--Add a connection string &quot;ConString&quot; in the web.config as per your database--%&gt;
    &lt;asp:SqlDataSource
        ID=&quot;SqlDataSource1&quot;
        runat=&quot;server&quot;
        ConnectionString=&quot;&lt;%$ ConnectionStrings:ConString %&gt;&quot;
        SelectCommand=&quot;SELECT TOP 10 EmployeeID, LastName, FirstName, DepartmentID, Salary, HireDate FROM Employees&quot;&gt;
    &lt;/asp:SqlDataSource&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

Output:

Repeater control table layout

One thought on “Data binding in ASP.NET Repeater control using SQLDataSource control

Leave a Reply

Your email address will not be published. Required fields are marked *