What is Repeater Control in Asp.Net...?

Introduction
Here, I will explain, What is Repeater control in Asp.Net, What are the uses of Reater control and How to bind data to Repeater control in Asp.Net.

Description

What is Repeater Control
The Repeater control is used to display a repeated list of items that are bound to the control. The Repeater control may be bound to a database table, an XML file, or another list of items.

Repeater is Data Bind Control. Data bind Controls are container controls. Data binding is the process of creating a link between the data source and the presentation UI to display the data. Asp.Net provides rich and wide variety of controls, which can be bound to the data.

Uses of Repeater Control
We know that Repeater Controls are used to display the list if itemsthat bound to the controland it's same as GridView and DataGridView. Repeater control is lightweight and faster to display data when compared with GridView and DataGrid. We can display data in Custom format but it's not poissible in GridView or DataGridView controls and it's doesn't support for pagging and sorting.

Repeater Control have 5 entity which you can say templates.
1. Header Template  2. Item Template  3. AlternatingItemTemplate  4. Seperator Template  5. Footer Template

1. ItemTemplate: ItemTemplate defines how the each item is rendered from data source.

2. AlternatingItemTemplate: AlternatingItemTemplates is used to change the styles of Alternate Items in Data Source collection

3. Header Template: Header Template is used for Header text for Data Source collection and apply styles for header text.

4. Footer Template: Footer Template is used to display footer element for Data Source collection.

5. SeparatorTemplate: SeparatorTemplate will determine separator element which separates each Item in Item collection.

Some points about Repeater Control

• It is used to display back-end result set. It is used to display multiple tuple.
• It is unformatted control. The Repeater control is a basic templated data-bound list. It has no built-in layout or styles, so you must explicitly declare all lay out, formatting. and style tags within the control's templates.
• The Repeater control is the only Web control that allows you to split markup tags across the templates. to create a table using templates, include the begin table tag (<table>) in the Header Template, a single table row tag (<tr>) in the Item template, and the end table tag (</table>) in the Footer Template.
• The Repeater control has no built-in selection capabilities or editing support. You can use the ItemCommand event to process events that are raised from the templates to the control.

Repeater Control Example in Asp.Net using C#
Before we start to explain, how to use Repeater control and bind data to the control. You neew a table in database. Here I have a table Products_Dts. We bind the product details in repeater control. You can use the following SQL query shown below to create a sample table.

    CREATE TABLE [dbo].[Products_Dts](
      [ProductId] [int] IDENTITY(1,1) NOT NULL,
      [ProductName] [varchar](50) NULL,
      [BrandName] [varchar](50) NULL,
      [Description] [varchar](max) NULL,
      [launchDate] [varchar](20) NULL,
      CONSTRAINT [PK_Poducts_Dts] PRIMARY KEY CLUSTERED
      (
        [ProductId] ASC
      )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF,   
      ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
    ) ON [PRIMARY]

After creating table in your database. Open your Visual Studio and create a new website. After that add new item and select a WebForm and save it. Now we design .aspx page with three TextBox, button and a Repeater controls. The HTML markup of the .aspx page is as shown below

   <div class="cdClearFix">
        <div class="cdLeft">
            <table>
                <tr>
                    <td colspan="2">                      
                            <span style="font-size: large; font-weight: bold; color: Navy;">Enter 
                                     Product Details:</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        Product Name:
                    </td>
                    <td>
                        <asp:TextBox ID="txtProductName" Width="250px" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Brand Name:
                    </td>
                    <td>
                        <asp:TextBox ID="txtProductBrand" Width="250px" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td valign="top">
                        Product Description:
                    </td>
                    <td>
                        <asp:TextBox ID="txtDescription" runat="server" Width="250px" Height="70px" 
                                TextMode="MultiLine" />
                    </td>
                </tr>
                </tr>
                    <td>
                    </td>
                    <td>
                        <asp:ImageButton runat="server" ID="btnSubmit" Text="Save" Width="92px" 
                                ImageUrl="~/images/btn_submit.gif" OnClick="btnSubmit_Click"  
                                Style="margin-left: 0px" AlternateText="Sumbit" />
                    </td>
                </tr>
            </table>
        </div>
        <div class="cdRight">        <p>
            <span style="font-size: large; font-weight: bold; color: Navy;">Display Product Details
                Using Repeater Control:</span></p>
            <asp:Repeater ID="repShowDetails" runat="server">
                <HeaderTemplate>
                    <table style="border: 1px solid #0000FF; width: 500px; border-top: 1px dotted  
                              #0000FF; border-bottom: 1px solid #0000FF;" cellpadding="0">
                        <tr style="background-color: #0000FF; color: #FFF">
                            <td colspan="2">
                                <b>Details</b>
                            </td>
                        </tr>
                </HeaderTemplate>
                <ItemTemplate>
                    <tr style="background-color: #EBEFF0">
                        <td>
                            <table style="background-color: #2A7FFF; color: White; border-top: 1px 
                                     dotted #2A7FFF; border-bottom: 1px solid #2A7FFF;">
                                <tr>
                                    <td>
                                        Product Name:
                                        <asp:Label ID="lblSubject" runat="server" Text='<%#Eval 
                                               ("ProductName") %>' Font-Bold="true" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lblComment" runat="server" Text='<%#Eval("Description") 
                                    %>' />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table style="background-color: #C3C3C3; border-top: 1px dotted  
                                     #C3C3C3; border-bottom: 1px solid #C3C3C3; width: 500px">
                                <tr>
                                    <td>
                                        Introduced By:
                                        <asp:Label ID="lblProduct" runat="server" Font-Bold="true"
                                               Text='<%#Eval("BrandName") %>' />
                                     </td>
                                    <td>
                                        Launch Date:
                                        <asp:Label ID="lblDate" runat="server" Font-Bold="true"
                                               Text='<%#Eval("LaunchDate") %>' />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>                    <tr>
                        <td colspan="2">
                            &nbsp;
                        </td>
                    </tr>
                </ItemTemplate>
                <FooterTemplate>
                    </table>
                </FooterTemplate>
           </asp:Repeater>
        </div>
    </div>

In the above code, you can see that, I am using div with cdClearFix class. After this, divide this into two div panels, Left & Right with cdLeft & cdRight classes. So include the followin g style as shown below, inside the head tag (<html></html>).

    <style type="text/css">
        .cdClearFix {
            zoom: 1;
        }
        .cdClearFix:after {
            clear: both;
            content: ".";
            display: block;
            visibility: hidden;
        }
        .cdLeft {
            float: left;
        }
        .cdRight {
            float: right;
        }
    </style>

In the left div, I have use TextBox, and Button controls for inserting the product details into the database. And in right div, use Repeater control for bind data from database.

The Repeater control, is the only Web control that allows you to split markup tags across the templates. For this here I am using Table structure inside the Repeater control for displaying the data. Here I include the begin table tag (<table>) in the Header Template, a multiple table row tag (<tr>) in the Item template, and the end table tag (</table>) in the Footer Template.

After completion of .aspx page design, add the following namespaces in code behind page.

   using System;
   using System.Data;
   using System.Data.SqlClient;
   using System.Configuration;

System namespaces contains many commonly-used types. These are separate from the language-level aliases in the C# language. System can be referenced with different syntax forms. It is usually specified with a using System directive.

System.Data namespaces contain classes for accessing and managing data from multiple data source.

System.Data.SqlClient namespace is the.NET Framework Data Provider for SQL Server. The.NET Framework Data Provider for SQL Server describes a collection of classes used to access a SQL Server database in the managed space.

System.Configuration namespace contains the classes that are used to programmatically access .NET Framework configuration files. It also supplies objects for providing custom section handlers and handling errors in configuration files.

After add the above namespaces, write the following code, shown below, in code behind page for insert an product details at button OnClick event and bind data to the repeater control at page load event.

    string strcon = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
     protected void Page_Load(object sender, EventArgs e)
     {
        if (!IsPostBack)
        {
            BindRepeaterData();
        }
     }
     protected void BindRepeaterData()
     {
        SqlConnection connection = new (strcon);
        connection.Open();
        SqlCommand cmd = new SqlCommand ("Select * From Products_Dts Order By LaunchDate Desc",
           connection);
        DataSet ds = new DataSet ();
        SqlDataAdapterda = new SqlDataAdapter(cmd);
        da.Fill(ds);
        repShowDetails.DataSource = ds;
        repShowDetails.DataBind();
        connection.Close();
     }
     protected void btnSubmit_Click(object sender, ImageClickEventArgs e)
     {
        SqlConnection connection = new SqlConnection (strcon);
        connection.Open();
        SqlCommand cmd = new SqlCommand ("Insert Into Products_Dts
           (ProductName,BrandName,Description,LaunchDate)
           values(@ProductName,@BrandName,@Description,@LaunchDate)", connection);
        cmd.Parameters.AddWithValue("@ProductName", txtProductName.Text);
        cmd.Parameters.AddWithValue("@BrandName", txtProductBrand.Text);
        cmd.Parameters.AddWithValue("@Description", txtDescription.Text);
        cmd.Parameters.AddWithValue("@LaunchDate", DateTime.Now.ToShortDateString());
        cmd.ExecuteNonQuery();
        connection.Close();
        ClearFields();
        BindRepeaterData();
     }
     private void ClearFields()
     {
        txtProductName.Text = string.Empty;
        txtProductBrand.Text = string.Empty;
        txtDescription.Text = string.Empty;
     }

And write or add the connection string in your web.config file and Change the connection string according to your database and data source. The connection string would be like

    <connectionStrings>
       <add name="ConnectionString" connectionString="Data Source=SHEKHAR-PC;Initial
                 Catalog=TEMP;Persist Security Info=True;User ID=sa;Password=trucom@123"
                 providerName="System.Data.SqlClient" />
   </connectionStrings>

I hope that this article would have helped you in understanding the Repeater Control in Asp.Net....If you like this article, Please share it with others......Thanks!

OutPut

Out
I hope that this article would have helped you in understanding the Repeater Control in Asp.Net. Please share it if you like it.....Thanks!