In this article, I am going to show you how to use Repeater control in ASP.NET and how to bind data to this control. You can as well download the complete app using Download File link Button
In ASP.Net, a repeater control is a data-bound control that is used to display information or data in a repeated manner.
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.
The Repeater control has five templates such as;
- HeaderTemplate: Use to displays Header text for a Data Source collection and applies a different style for the Header text.
- AlternatingItemTemplate: It is used to change the background color or style of alternating items in a Data Source collection.
- Itemtemplate: This template defines how the each item is rendered from the Data Source collection.
- SeperatorTemplate: This template is used to determine the separator element that separates each item in the item collection.
- FooterTemplate: This displays a footer element for the Data Source collection.
Now that you have understand what repeater control is and its various templates, let us create a simple application that will bind data to a repeater control and displayed them as well.
To learn about DataList Control check
how to use DataList Control
For this tutorial, you should create a Microsoft Access database with following specifications.
Database name: dbInfo
Table name: tblInfo
If you don't know how to create database then check
how to create database in Microsoft Access
| Field Names |
Data Types |
| pName |
Text |
| Gender |
Text |
| Country |
Text |
| Course |
Text |
Now that you have created the database, you should also create the website.
Below is the HTML source
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
Name<br />
<asp:TextBox ID="txtname" runat="server"></asp:TextBox>
</td>
<td>Gender
<asp:DropDownList ID="drpgender" runat="server">
<asp:ListItem>Select</asp:ListItem>
<asp:ListItem>Male</asp:ListItem>
<asp:ListItem>Female</asp:ListItem>
</asp:DropDownList></td>
</tr>
<tr>
<td>
Country<br />
<asp:TextBox ID="txtcountry" runat="server"></asp:TextBox>
</td>
<td>
<asp:DropDownList ID="drpcourse" runat="server">
<asp:ListItem>Select</asp:ListItem>
<asp:ListItem>Computer Science</asp:ListItem>
<asp:ListItem>Electrical Electronics</asp:ListItem>
<asp:ListItem>Telecommunications</asp:ListItem>
</asp:DropDownList></td>
</tr>
<tr>
<td>
<asp:Button ID="btnsubmit" runat="server" Text="Submit Details" /></td>
</tr>
</table>
<br />
<asp:Label ID="lblstatus" Visible="false" runat="server" Text="Label"></asp:Label><br />
<table >
<tr style="background-color:#0094ff;color:#fff; width:100%">
<td>Name
<td>Gender
<td>Country
<td>Course
</tr>
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<tr style="background-color:dimgray;color:#fff; width:100%">
<td><%# Eval("pname")%>
<td><%# Eval("gender")%>
<td><%# Eval("country")%>
<td><%# Eval("course")%>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</div>
</form>
</body>
</html>
In the codebehind, Import the following Namespaces
Imports System.Data
Imports System.Data.OleDb
Then add this to the General Declaration section
Dim con As New OleDb.OleDbConnection '("Provider=Microsoft.Jet.OleDb.4.0; Data Source='" & Server.MapPath("/db/dbInfo.mdb") & "'")
Double click on the btnsubmit and type the following or paste the codes
Protected Sub btnsubmit_Click(sender As Object, e As EventArgs) Handles btnsubmit.Click
Dim cmd As New OleDb.OleDbCommand
Try
con.ConnectionString = "Provider=Microsoft.Jet.OleDb.4.0; Data Source='" & Server.MapPath("/db/dbInfo.mdb") & "'"
con.Open()
cmd.CommandText = "INSERT INTO tblinfo(pname,country,gender,course)VALUES(@pname,@country,@gender,@course)"
cmd.Connection = con
cmd.Parameters.AddWithValue("@pname", txtname.Text)
cmd.Parameters.AddWithValue("@country", txtcountry.Text)
cmd.Parameters.AddWithValue("@gender", drpgender.Text)
cmd.Parameters.AddWithValue("@course", drpcourse.Text)
cmd.ExecuteReader()
Finally
cmd.Dispose()
con.Dispose()
Response.Redirect(Request.Url.AbsoluteUri)
End Try
End Sub
Create a procedure called BindInfoToRepeater as follows
Sub BindInfoToRepeater()
Dim cmd As New OleDb.OleDbCommand
Try
con.ConnectionString = "Provider=Microsoft.Jet.OleDb.4.0; Data Source='" & Server.MapPath("/db/dbInfo.mdb") & "'"
con.Open()
cmd.CommandText = "SELECT*FROM tblinfo"
cmd.Connection = con
Repeater1.DataSource = cmd.ExecuteReader()
Repeater1.DataBind()
Catch ex As Exception
ScriptManager.RegisterStartupScript(Page, Page.GetType, "1111", "alert('Error occured');", True)
Finally
cmd.Dispose()
con.Dispose()
End Try
End Sub
Now that you have created the BindInfoToRepeater procedure, you need to call this subroutine on page load event
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
BindInfoToRepeater()
End Sub
And the following code to the Repeater1 pre_render event to show count of total records saved
Protected Sub Repeater1_PreRender(sender As Object, e As EventArgs) Handles Repeater1.PreRender
If Repeater1.Controls.Count <= 0 Then
lblstatus.Text = "No records saved yet"
lblstatus.ForeColor = Drawing.Color.Red
lblstatus.Visible = True
Else
lblstatus.Text = "Total records: " & Repeater1.Controls.Count
lblstatus.ForeColor = Drawing.Color.Green
lblstatus.Visible = True
End If
End Sub
And the output is below
And the complete codebehind is below
Imports System.Data
Imports System.Data.OleDb
Partial Class _Default
Inherits System.Web.UI.Page
Dim con As New OleDb.OleDbConnection '("Provider=Microsoft.Jet.OleDb.4.0; Data Source='" & Server.MapPath("/db/dbInfo.mdb") & "'")
Protected Sub btnsubmit_Click(sender As Object, e As EventArgs) Handles btnsubmit.Click
Dim cmd As New OleDb.OleDbCommand
Try
con.ConnectionString = "Provider=Microsoft.Jet.OleDb.4.0; Data Source='" & Server.MapPath("/db/dbInfo.mdb") & "'"
con.Open()
cmd.CommandText = "INSERT INTO tblinfo(pname,country,gender,course)VALUES(@pname,@country,@gender,@course)"
cmd.Connection = con
cmd.Parameters.AddWithValue("@pname", txtname.Text)
cmd.Parameters.AddWithValue("@country", txtcountry.Text)
cmd.Parameters.AddWithValue("@gender", drpgender.Text)
cmd.Parameters.AddWithValue("@course", drpcourse.Text)
cmd.ExecuteReader()
Finally
cmd.Dispose()
con.Dispose()
Response.Redirect(Request.Url.AbsoluteUri)
End Try
End Sub
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
BindInfoToRepeater()
End Sub
Sub BindInfoToRepeater()
Dim cmd As New OleDb.OleDbCommand
Try
con.ConnectionString = "Provider=Microsoft.Jet.OleDb.4.0; Data Source='" & Server.MapPath("/db/dbInfo.mdb") & "'"
con.Open()
cmd.CommandText = "SELECT*FROM tblinfo"
cmd.Connection = con
Repeater1.DataSource = cmd.ExecuteReader()
Repeater1.DataBind()
Catch ex As Exception
ScriptManager.RegisterStartupScript(Page, Page.GetType, "1111", "alert('Error occured');", True)
Finally
cmd.Dispose()
con.Dispose()
End Try
End Sub
Protected Sub Repeater1_PreRender(sender As Object, e As EventArgs) Handles Repeater1.PreRender
If Repeater1.Controls.Count <= 0 Then
lblstatus.Text = "No records saved yet"
lblstatus.ForeColor = Drawing.Color.Red
lblstatus.Visible = True
Else
lblstatus.Text = "Total records: " & Repeater1.Controls.Count
lblstatus.ForeColor = Drawing.Color.Green
lblstatus.Visible = True
End If
End Sub
End Class
That is all. Thanks for reading