Introduction:
In this article I will explain what is repeater control, uses of repeater control and how to bind data to repeater control in asp.net.
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.
To implement repeater control sample first design table in your database as shown below
In this article I will explain what is repeater control, uses of repeater control and how to bind data to repeater control in asp.net.
Description:
In previous posts I explained many articles regarding Gridview, Ajax, JQuery and many more. Now I will explain about what is repeater control, uses of repeater control, bind data to repeater control in asp.net.
What is Repeater Control?In previous posts I explained many articles regarding Gridview, Ajax, JQuery and many more. Now I will explain about what is repeater control, uses of repeater control, bind data to repeater control in asp.net.
Repeater Control is a control which is used to display the repeated list of items
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 it’s 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.
To implement repeater control sample first design table in your database as shown below
Column Name
|
Data Type
|
Allow Nulls
|
Id
|
int(set identity property=true)
|
No
|
UserName
|
varchar(50)
|
Yes
|
Subject
|
nvarchar(MAX)
|
Yes
|
Comment
|
nvarchar(MAX)
|
Yes
|
PostedDate
|
datetime
|
Yes
|
After completion of table creation Open Visual Studio and create new website after that write the following code in your aspx page
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Repeator Control Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Enter Name: </td>
<td><asp:TextBox ID="txtName" runat="server"/></td>
</tr>
<tr>
<td>Enter Subject: </td>
<td><asp:TextBox ID="txtSubject" runat="server"/></td>
</tr>
<tr>
<td valign="top">Enter Comments:</td>
<td><asp:TextBox ID="txtComment" runat="server" Rows="5" Columns="20" TextMode="MultiLine"/></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="RepDetails" runat="server">
<HeaderTemplate>
<table style=" border:1px solid #df5015; width:500px" cellpadding="0">
<tr style="background-color:#df5015; color:White">
<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("Comment") %>'/>
</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("PostedDate")%>'/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
|
After completion of aspx page design add following namespaces in code behind
C# Code
using System;
using System.Data;
using System.Data.SqlClient;
|
After add namespace write the following code
private SqlConnection con = new SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true");
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
BindRepeaterData();
}
}
// This button click event is used to insert comment details and bind data to repeater control
protected void btnSubmit_Click(object sender, EventArgs e)
{
con.Open();
SqlCommand cmd = new SqlCommand("insert into Repeater_Table (UserName,Subject,Comment,PostedDate) values(@userName,@subject,@comment,@postedDate)", con);
cmd.Parameters.AddWithValue("@userName", txtName.Text);
cmd.Parameters.AddWithValue("@subject", txtSubject.Text);
cmd.Parameters.AddWithValue("@comment", txtComment.Text);
cmd.Parameters.AddWithValue("@postedDate", DateTime.Now);
cmd.ExecuteNonQuery();
con.Close();
txtName.Text = string.Empty;
txtSubject.Text = string.Empty;
txtComment.Text = string.Empty;
BindRepeaterData();
}
//Bind Data to Repeater Control
protected void BindRepeaterData()
{
con.Open();
SqlCommand cmd = new SqlCommand("select * from Repeater_Table Order By PostedDate desc", con);
DataSet ds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(ds);
RepDetails.DataSource = ds;
RepDetails.DataBind();
con.Close();
}
|
VB.NET Code
Now run in your application and check the output
Imports System.Data
Imports System.Data.SqlClient
Partial Public Class Default2
Inherits System.Web.UI.Page
Private con As New SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true")
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
BindRepeaterData()
End If
End Sub
' This button click event is used to insert comment details and bind data to repeater control
Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs)
con.Open()
Dim cmd As New SqlCommand("insert into Repeater_Table (UserName,Subject,Comment,PostedDate) values(@userName,@subject,@comment,@postedDate)", con)
cmd.Parameters.AddWithValue("@userName", txtName.Text)
cmd.Parameters.AddWithValue("@subject", txtSubject.Text)
cmd.Parameters.AddWithValue("@comment", txtComment.Text)
cmd.Parameters.AddWithValue("@postedDate", DateTime.Now)
cmd.ExecuteNonQuery()
con.Close()
txtName.Text = String.Empty
txtSubject.Text = String.Empty
txtComment.Text = String.Empty
BindRepeaterData()
End Sub
'Bind Data to Repeater Control
Protected Sub BindRepeaterData()
con.Open()
Dim cmd As New SqlCommand("select * from Repeater_Table Order By PostedDate desc", con)
Dim ds As New DataSet()
Dim da As New SqlDataAdapter(cmd)
da.Fill(ds)
If ds.Tables(0).Rows.Count > 0 Then
RepDetails.Visible = True
RepDetails.DataSource = ds
RepDetails.DataBind()
Else
RepDetails.Visible = False
End If
con.Close()
End Sub
End Class
|
Demo
 |
No comments:
Post a Comment