Post
Ask Question

How To Use Repeater Control in ASP.NET

Introduction

A Repeater is a Data-bound control. Data-bound controls are container controls. It creates a link between the Data Source and the presentation UI to display the data. The repeater control is used to display a repeated list of items.

A Repeater has five inline templates to format it:

  1. <HeaderTemplate> - Displays Header text for a Data Source collection and applies a different style for the Header text.
  2. <AlternatingItemTemplate> - Changes the background color or style of alternating items in a Data Source collection.
  3. <Itemtemplate> - It defines how the each item is rendered from the Data Source collection.
  4. <SeperatorTemplate> - It will determine the separator element that separates each item in the item collection. It will be a <br> or <Hr> HTML element.
  5. <FooterTemplate> - Displays a footer element for the Data Source collection.

Now, in this article I am describing the Repeater control in ASP.NET and how to create a comment page in ASP.NET .

First I created a database "EmpDetail". Then I created a table in the database. 

Table Query

  1. CREATE TABLE [dbo].[Comment](  
  2.        [UserName] [nvarchar](50) NULL,  
  3.        [Subject] [nvarchar](max) NULL,  
  4.        [CommentOn] [nvarchar](max) NULL,  
  5.        [Post_Date] [datetime] NULL  
  6. ) ON [PRIMARY]  

Repeter_Control_Example.aspx.cs

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Data;  
  8. using System.Data.SqlClient;  
  9. using System.Configuration;  
  10. public partial class Repeter_Control_Example : System.Web.UI.Page  
  11. {  
  12.     SqlCommand cmd;  
  13.     SqlDataAdapter da;  
  14.     DataSet ds;  
  15.     SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=****");  
  16.     protected void Page_Load(object sender, EventArgs e)  
  17.     {  
  18.         if (!IsPostBack)  
  19.         {  
  20.             RepeterData();  
  21.         }  
  22.     }  
  23.     protected void btnSubmit_click(object sender, EventArgs e)  
  24.     {  
  25.         try  
  26.         {  
  27.             con.Open();  
  28.             cmd = new SqlCommand("insert into Comment (UserName,Subject,CommentOn,Post_Date) values(@userName,@subject,@comment,@date)", con);  
  29.             cmd.Parameters.Add("@userName", SqlDbType.NVarChar).Value = txtName.Text.ToString();  
  30.             cmd.Parameters.Add("@subject", SqlDbType.NVarChar).Value = txtSubject.Text.ToString();  
  31.             cmd.Parameters.Add("@comment", SqlDbType.NVarChar).Value = txtComment.Text.ToString();  
  32.             cmd.Parameters.Add("@date", SqlDbType.DateTime).Value = DateTime.Now.Date;  
  33.             cmd.ExecuteNonQuery();  
  34.             con.Close();  
  35.             txtName.Text = string.Empty;  
  36.             txtSubject.Text = string.Empty;  
  37.             txtComment.Text = string.Empty;  
  38.             RepeterData();  
  39.         }  
  40.         catch (Exception ex)  
  41.         {  
  42.             txtComment.Text = ex.Message;  
  43.         }  
  44.     }  
  45.     public void RepeterData()  
  46.     {  
  47.         con.Open();  
  48.         cmd = new SqlCommand("Select * from Comment Order By Post_Date desc", con);  
  49.         DataSet ds = new DataSet();  
  50.         da = new SqlDataAdapter(cmd);  
  51.         da.Fill(ds);  
  52.         RepterDetails.DataSource = ds;  
  53.         RepterDetails.DataBind();  
  54.     }  
  55. }  
Repeter_Control_Example.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Repeter_Control_Example.aspx.cs" Inherits="Repeter_Control_Example" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head id="Head1" runat="server">  
  5.     <title></title>  
  6. </head>  
  7. <body>  
  8.     <form id="form1" runat="server">  
  9.     <h3>Repeter Control in ASP.NET</h3>  
  10.     <div">  
  11.     <table>  
  12.     <tr>  
  13.     <td>Enter Name:</td>  
  14.     <td><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>  
  15.     </tr>  
  16.       <tr>  
  17.     <td>Enter Subject:</td>  
  18.     <td><asp:TextBox ID="txtSubject" runat="server"></asp:TextBox></td>  
  19.     </tr>  
  20.       <tr>  
  21.     <td valign="top">Enter Comments:</td>  
  22.     <td><asp:TextBox ID="txtComment" runat="server" Rows="5" Columns="20" TextMode="MultiLine"></asp:TextBox></td>  
  23.     </tr>  
  24.       <tr>  
  25.     <td></td>  
  26.     <td><asp:Button ID="btnSubmit" runat="server" Text="Summit" OnClick="btnSubmit_click" /></td>  
  27.     </tr>  
  28.     </table>  
  29.     </div>  
  30.     <div>  
  31.     <asp:Repeater ID="RepterDetails" runat="server">  
  32.     <HeaderTemplate>  
  33.     <table style="border:1px solid #0000FF; width:500px" cellpadding="0">  
  34.     <tr style="background-color:#FF6600; color:#000000; font-size: large; font-weight: bold;">  
  35.     <td colspan="2">  
  36.     <b>Comments</b>  
  37.     </td>  
  38.     </tr>  
  39.     </HeaderTemplate>  
  40.     <ItemTemplate>  
  41.     <tr style="background-color:#EBEFF0">  
  42.     <td>  
  43.     <table style="background-color:#EBEFF0;border-top:1px dotted #df5015; width:500px" >  
  44.     <tr>  
  45.     <td >  
  46.     Subject:  
  47.     <asp:Label ID="lblSubject" runat="server" Text='<%#Eval("Subject") %>' Font-Bold="true"/>  
  48.     </td>  
  49.     </tr>  
  50.     </table>  
  51.     </td>  
  52.     </tr>  
  53.     <tr>  
  54.     <td>  
  55.     <asp:Label ID="lblComment" runat="server" Text='<%#Eval("CommentOn") %>'/>  
  56.     </td>  
  57.     </tr>  
  58.     <tr>  
  59.     <td>  
  60.     <table style="background-color:#EBEFF0;border-top:1px dotted #df5015;border-bottom:1px solid #df5015; width:500px" >  
  61.     <tr>  
  62.     <td >Post By: <asp:Label ID="lblUser" runat="server" Font-Bold="true" Text='<%#Eval("UserName") %>'/></td>  
  63.     <td >Created Date:<asp:Label ID="lblDate" runat="server" Font-Bold="true" Text='<%#Eval("Post_Date") %>'/></td>  
  64.     </tr>  
  65.     </table>  
  66.     </td>  
  67.     </tr>  
  68.     <tr>  
  69.     <td colspan="2"> </td>  
  70.     </tr>  
  71.     </ItemTemplate>  
  72.     <FooterTemplate>  
  73.     </table>  
  74.     </FooterTemplate>  
  75.     </asp:Repeater>  
  76.     </div>  
  77.     </form>  
  78. </body>  
  79. </html>  
Output

 


RepeterExample.gif

For more information, download the attached sample application.


Similar Articles