X



Home>Tutorial>

Introduction To Repeater Control in ASP.NET

Nuelson Penuel Thursday, September 17, 2020 ASP.Net

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
how to use asp.net repeater control
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

| | Views(1278)

See Demo | Download File


Add your comment. Indicate code using code tag


Words: 0 | Chars: 0 | Reading Duration: 0



Images Attachment




Emmason Integratded Services(2017-2024)
All Rights Reserved
Designed and Maintained By Emmason Integrated Services