Share Blog

Wednesday, May 21, 2014

Repeater Control in ASP.Net with C#

Repeater Control:

The Repeater control performs a very common function that most Web developers have encountered in their projects work. Very often you need to display records from a database, and most likely you would use a FOR loop to write the HTML code so that the records can be displayed within a table. Using the Repeater control, this process can very easily be automated.
A Repeater control is a light weight control which can be used for simple reporting purposes. It supports basic event-handling like In it, Load, Unload etc., This also supports some basic formatting of data and can be presented to the user. A Repeater control offers limited level of data editing or selecting capabilities. For such editing and updates ASP .Net offers DataList and DataGrid controls.
A Repeater control can be used to build small and Flexible reports with the templates for the items. It supports the following five templates.

Uses of Repeater Control:

Repeater Control is used to display repeated list of items that are bound to the control and it’s same as gridview and datagridview. Repeater control is lightweight and faster to display data when compared with gridview and datagrid. By using this control we can display data in custom format but it’s not possible in gridview or datagridview and it doesn’t support for paging and sorting.  
The Repeater control works by looping through the records in your data source and then repeating the rendering of its templates called item template. Repeater control contains different types of template fields those are,
1) ItemTemplate
2) AlternatingitemTemplate
3) HeaderTemplate
4) FooterTemplate
5) SeperatorTemplate

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

AlternatingItemTemplate: AlternatingItemTemplates is used to change the background color and styles of AlternatingItems in DataSource collection

HeaderTemplate: HeaderTemplate is used to display Header text for DataSource collection and apply different styles for header text.

FooterTemplate: FooterTemplate is used to display footer element for DataSource collection

SeparatorTemplate: SeparatorTemplate will determine separator element which separates each Item in Item collection. Usually, SeparateTemplate will be <br> html element or <hr> html element.

Demo on Repeater Control

Step1:-


Create a table in SQL DataBase
create table repeater_example(id int primary key,name varchar(50),age int,
salary int,country varchar(100),city varchar(50))
insert into repeater_example values(1,'Shivam',18,1000,'India','Noida'),(2,'Shiv',28,2000,'India','Delhi'),
(3,'Sonam',20,5000,'India','Kanpur'),(4,'Neelam',22,8000,'India','Bhopal'),(5,'Manish',24,9000,'India','Etawah')
select * from repeater_example


------INSERT RECORDS INTABLE-------
Step2:- Drag and Drop Repeater Control on aspx page
Step3:- Design Repeater Control for display record according data table
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Repeater_control_example.aspx.cs" Inherits="Repeater_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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Repeater ID="Repeater1" runat="server">
        <HeaderTemplate>
        <table>
        <tr>
        <td style ="background-color :Aqua ;width:100px;">id</td>
        <td style= "background-color :Aqua ;width :100px">Name</td>
        <td style="background-color :Gray;width:100px">Age</td>
        <td style="background-color :Gray;width:100px">Salary</td>
         <td style="background-color :Gray;width:100px">Country</td>
         <td style="background-color :Gray;width:100px">City</td>
        </tr>
        </table>
        </HeaderTemplate>
        <ItemTemplate>
        <table>
        <tr style ="background-color:transparent;width:100px">
        <td style ="background-color:transparent;width:100px">
        <asp:Label ID="lblid" runat ="server" Text='<%#Bind("id") %>'>'></asp:Label>
        </td>
        <td style ="background-color:transparent;width:100px">
        <asp:Label ID ="lblname" runat ="server" Text ='<%#Bind("name") %>'>'></asp:Label>
        <td style="background-color :transparent ;width:100px">
        <asp:Label ID="lblage" runat ="server" Text='<%#Bind("Age") %>'>'></asp:Label>
        </td>
         <td style ="background-color:transparent;width:100px">
        <asp:Label ID="lblsalary" runat ="server" Text='<%#Bind("Salary") %>'>'></asp:Label>
        </td>
       <td style ="background-color:transparent;width:100px">
        <asp:Label ID="lblcountry" runat ="server" Text='<%#Bind("country") %>'>'></asp:Label>
        </td>
        <td style="background-color :transparent;width:100px">
        <asp:Label ID="lblcity" runat ="server" Text='<%#Bind("City") %>'>'></asp:Label>
        </td>
        </tr>
        </table>
        </ItemTemplate>
        </asp:Repeater>
    </div>
    </form>
</body>
</html>
Design View of Repeater Control
Step 4:- Bind the Repeater Control to DataTable
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;

public partial class Repeater_control_example : System.Web.UI.Page
{
    SqlConnection con = new SqlConnection("Data Source=SUNIL;Initial Catalog=adonetpractices;Integrated Security=True");
    protected void Page_Load(object sender, EventArgs e)
    {
        SqlDataAdapter da = new SqlDataAdapter("select * from repeater_example",con);
        DataSet ds = new DataSet();
        da.Fill(ds);
        Repeater1.DataSource = ds;
        Repeater1.DataBind();
    }
}



Step5:- Run the web page and see output



No comments:

Post a Comment