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 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

CREATE TABLE [dbo].[Comment] (
         NULL,
    [Subject]   [nvarchar](max)   NULL,
    [CommentOn] [nvarchar](max)   NULL,
    [Post_Date] [datetime]        NULL
) ON [PRIMARY];

Repeter_Control_Example.aspx.cs

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;
using System.Configuration;

public partial class Repeter_Control_Example : System.Web.UI.Page
{
    SqlCommand cmd;
    SqlDataAdapter da;
    DataSet ds;
    SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=****");

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            RepeterData();
        }
    }

    protected void btnSubmit_click(object sender, EventArgs e)
    {
        try
        {
            con.Open();
            cmd = new SqlCommand("INSERT INTO Comment (UserName, Subject, CommentOn, Post_Date) VALUES (@userName, @subject, @comment, @date)", con);
            cmd.Parameters.Add("@userName", SqlDbType.NVarChar).Value = txtName.Text.ToString();
            cmd.Parameters.Add("@subject", SqlDbType.NVarChar).Value = txtSubject.Text.ToString();
            cmd.Parameters.Add("@comment", SqlDbType.NVarChar).Value = txtComment.Text.ToString();
            cmd.Parameters.Add("@date", SqlDbType.DateTime).Value = DateTime.Now.Date;
            cmd.ExecuteNonQuery();
            con.Close();
            txtName.Text = string.Empty;
            txtSubject.Text = string.Empty;
            txtComment.Text = string.Empty;
            RepeterData();
        }
        catch (Exception ex)
        {
            txtComment.Text = ex.Message;
        }
    }

    public void RepeterData()
    {
        con.Open();
        cmd = new SqlCommand("SELECT * FROM Comment ORDER BY Post_Date DESC", con);
        DataSet ds = new DataSet();
        da = new SqlDataAdapter(cmd);
        da.Fill(ds);
        RepterDetails.DataSource = ds;
        RepterDetails.DataBind();
    }
}

Repeter_Control_Example.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Repeter_Control_Example.aspx.cs" Inherits="Repeter_Control_Example" %>
<!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 id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <h3>Repeter Control in ASP.NET</h3>
        <div>
            <table>
                <tr>
                    <td>Enter Name:</td>
                    <td><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
                </tr>
                <tr>
                    <td>Enter Subject:</td>
                    <td><asp:TextBox ID="txtSubject" runat="server"></asp:TextBox></td>
                </tr>
                <tr>
                    <td valign="top">Enter Comments:</td>
                    <td><asp:TextBox ID="txtComment" runat="server" Rows="5" Columns="20" TextMode="MultiLine"></asp:TextBox></td>
                </tr>
                <tr>
                    <td></td>
                    <td><asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_click" /></td>
                </tr>
            </table>
        </div>
        <div>
            <asp:Repeater ID="RepterDetails" runat="server">
                <HeaderTemplate>
                    <table style="border:1px solid #0000FF; width:500px" cellpadding="0">
                        <tr style="background-color:#FF6600; color:#000000; font-size: large; font-weight: bold;">
                            <td colspan="2">
                                <b>Comments</b>
                            </td>
                        </tr>
                </HeaderTemplate>
                <ItemTemplate>
                    <tr style="background-color:#EBEFF0">
                        <td>
                            <table style="background-color:#EBEFF0; border-top:1px dotted #df5015; width:500px">
                                <tr>
                                    <td>
                                        Subject:
                                        <asp:Label ID="lblSubject" runat="server" Text='<%# Eval("Subject") %>' Font-Bold="true" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lblComment" runat="server" Text='<%# Eval("CommentOn") %>' />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table style="background-color:#EBEFF0; border-top:1px dotted #df5015; border-bottom:1px solid #df5015; width:500px">
                                <tr>
                                    <td>Post By: <asp:Label ID="lblUser" runat="server" Font-Bold="true" Text='<%# Eval("UserName") %>' /></td>
                                    <td>Created Date: <asp:Label ID="lblDate" runat="server" Font-Bold="true" Text='<%# Eval("Post_Date") %>' /></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2"></td>
                    </tr>
                </ItemTemplate>
                <FooterTemplate>
                    </table>
                </FooterTemplate>
            </asp:Repeater>
        </div>
    </form>
</body>
</html>

Output

Output

For more information, download the attached sample application.


Similar Articles