Introduction To Repeater Control in ASP.NET

Nuelson Penuel Thursday, September 17, 2020 ASP.Net


Table Of Contents
Summary
What is Repeater Control
ASP.Net Repeater Control Example

Summary

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

What is Repeater Control

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.

ASP.Net Repeater Control Example

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