Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How to use repeater control in ASP.NET

Author: Rudy Pinson
Download Source Code : 1277_RepeaterControlExample.zip

ASP.NET provides rich set of controls for data binding. Repeater control gives you the flexibility to define layout for the data in your own way.

 

Repeater control is used to display repeated list of items. It is an iterative control as it iterates through list of items and displays it. It is an unformatted control which provides the facility to explicitly declare format, style and layout to display data. A repeater control can be bound to a database table, XML file or any list of items. I will show you repeater control with a database table binding.

Repeater control is a template based control. It has 5 templates that are used to format.

HeaderTemplate
 
It is used to display the header for each item column. It will be displayed once at the top.
 
ItemTemplate
 
It is used to display items that are rendered from data source.  
 
AlternatingItemTemplate
 
It is used to display alternating items that means every second row of data. It allows you to change alternate item background color or layout.
 
SeparatorTemplate
 
It is used to separate each item in item collection.
 
FooterTemplate
 
It is used to display items that you want once at the bottom.
 
Below is the example to display data using repeater control. You can also download complete source code.
 
  1. Create a new Web Site in Visual Studio 2010 either in C# or VB.NET
  2. Add a Web Form to Web Site
  3. Write a function in code behind file to get data from SQL Server NORTHWIND sample database and bind this function to repeater control. The code behind file will be like this:

    C#

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    using System.Data.SqlClient;
     
    public partial class _Default : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {
            Repeater1.DataSource = ProductData();
            Repeater1.DataBind();
     
        }
     
        private DataTable ProductData() {
            SqlConnection con = new SqlConnection("Data Source=MyPC;Initial Catalog=C:\\SQL SERVER 2000 SAMPLE DATABASES\\NORTHWND.MDF;Integrated Security=True");
            con.Open();
            string sql = "SELECT * FROM Products";
            SqlCommand cmd = new SqlCommand(sql, con);
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            da.Fill(dt);
            con.Close();
            return dt;
        }
    }


    VB.NET
     
    Imports System.Data
    Imports System.Data.SqlClient
    Partial Class _Default
        Inherits System.Web.UI.Page
     
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
            Repeater1.DataSource = ProductData()
            Repeater1.DataBind()
        End Sub
     
     
        Private Function ProductData() As DataTable
            Dim con As SqlConnection = New SqlConnection("Data Source=MyPC;Initial Catalog=C:\SQL SERVER 2000 SAMPLE DATABASES\NORTHWND.MDF;Integrated Security=True")
            con.Open()
            Dim sql As String = "SELECT * FROM Products"
            Dim cmd As SqlCommand = New SqlCommand(sql, con)
            Dim da As SqlDataAdapter = New SqlDataAdapter(cmd)
            Dim dt As DataTable = New DataTable()
            da.Fill(dt)
            con.Close()
            Return dt
        End Function
    End Class
     
    First import required namespaces for data and SQL. Write a function to get data from data base as you can see, I have written ProductData() function. You may change data source according to your requirements but you must have to provide data source to repeater and then bind this data. If you want to use this function for data source, you must need to have NORTHWIND Sample data base and must have to provide correct connection string.
     
  4. Next step is to add a repeater control in your aspx page. You need to add HeaderTemplate, ItemTemplate and SeparatorTemplate in repeater control for this example.  The source view of aspx page will be like below.

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Repeater Control Example</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <table>
            <asp:Repeater ID="Repeater1" runat="server">
                <HeaderTemplate>
                        <tr>
                            <td>Product ID</td>
                            <td>Product Name</td>
                            <td>Supplier ID</td>
                            <td>Category ID</td>
                            <td>Unit Price</td>
                            <td>Units in Stock</td>
                        </tr>
                </HeaderTemplate>
                <ItemTemplate>
                <tr>
                    <td>
                         <%#DataBinder.Eval(Container,"DataItem.ProductID")%>
                    </td>
                    <td>
                         <%#DataBinder.Eval(Container,"DataItem.ProductName")%>
                    </td>
                    <td>
                         <%#DataBinder.Eval(Container,"DataItem.SupplierID")%>
                    </td>
                    <td>
                         <%#DataBinder.Eval(Container,"DataItem.CategoryID")%>
                    </td>
                    <td>
                         <%#DataBinder.Eval(Container,"DataItem.UnitPrice")%>
                    </td>
                    <td>
                    <%#DataBinder.Eval(Container,"DataItem.UnitsInStock")%>
                    </td>
                </tr>
                </ItemTemplate>
                <SeparatorTemplate>
                <tr>
                <td><hr/></td>
                <td><hr/></td>
                <td><hr/></td>
                <td><hr/></td>
                <td><hr/></td>
                <td><hr/></td>
                </tr>
                </SeparatorTemplate>
            </asp:Repeater>
        </table>
        </div>
        </form>
    </body>
    </html>
     
  5.  View the Web Site in browser and see the result.

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How to download file from server in ASP.NET

Disclaimer - Privacy
© 2002-2017 DevASP.net