Minifycode 2021-10-03 Viewed 1.6K times ASP.NET

In this article, you will learn what is Repeater Control With Example in Asp.Net C#

In this article, how to use Repeater Control With Example in Asp.Net C#.

The Asp.Net Repeater Control displays a list of data fetched from various available sources such as the Database, an XML file or files fetched from a folder.

 

Repeater with <HeaderTemplate>, <ItemTemplate> and <AlternatingItemTemplate> element

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" 
    Inherits="_Default" %>
<!DOCTYPE html>
<html>
<head>
    <title>Asp.Net Repeater Control</title>
</head>
<body>
    <form id="form1" runat="server">
    <div style="font:13px Verdana;width:310px;">
    
        <asp:ScriptManager ID="scriptManager" runat="server" EnablePageMethods="true" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        
            <ContentTemplate>
                <h3>Asp.Net Repeater Control</h3>
                    
                <%--THE REPEATER CONTROL.--%>
                <asp:Repeater id="rp" runat="server">
                    
                    <%--HEADER OF THE REPEATER--%>
                    <HeaderTemplate>
                        <table border="0" width="200px">
                    </HeaderTemplate>

                    <%--SHOWING ITEMS--%>
                    <ItemTemplate>
                        <tr>
                            <td style="padding:2px;
                                border:solid 1px #CCC;">
                            <asp:Label Text='<%# Container.DataItem.ToString() %>' 
                                runat="server"></asp:Label>
                            </td>
                        </tr>
                    </ItemTemplate>

                    <%--ALTERNATE TEMPLATE (SHOWING ITEMS IN DIFFERENT COLOR--%>
                    <AlternatingItemTemplate>
                        <tr>
                            <td style="padding:2px;
                                border:solid 1px #CCC;
                                background:#EAF7FB;
                                width:200px;">

                            <asp:Label Text='<%# Container.DataItem.ToString() %>' 
                                runat="server"></asp:Label>

                            </td>
                        </tr>
                    </AlternatingItemTemplate>

                    <%--REPEATER FOOTER--%>
                    <FooterTemplate>
                        </table>

                        <div style="padding:20px 0;"> 
                            <asp:Label ID="lblFoot" runat="server"></asp:Label>
                        </div>
                    </FooterTemplate>
                </asp:Repeater>

                <%--BUTTON CONTROL--%>
                <asp:Button ID="btVF" Text="View Files" AutoPostBack="true" 
                    OnClick="Show" 
                    Font-Names="sanserif" 
                    Font-Italic="true" 
                    Font-Size="155%" 
                    runat="server" />
            </ContentTemplate>
           
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="PostBackTrigger" />
            </Triggers>
            
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e) {}

    protected void Show(object sender, EventArgs e)
    {
        DirectoryInfo Folder = new DirectoryInfo(Server.MapPath("Files\\"));
        FileInfo[] fileList = Folder.GetFiles("*.*");

        //BIND THE FILE LIST WITH THE REPEATER CONTROL.
        rp.DataSource = fileList;  
        rp.DataBind();
    }
}

 

 

Adding the <AlternatingTemplate> below the <ItemTemplate> will show files with a different background color for every alternate row.

 

<AlternatingItemTemplate>
    <div style="padding:3px; border:solid 1px #FFF; background:#black">
        <asp:Label Text='<%# Container.DataItem.ToString() %>' runat="server"></asp:Label>
    </div>
</AlternatingItemTemplate>

 

</AlternatingItemTemplate>
<SeparatorTemplate><hr />
</SeparatorTemplate>

 

Add the <HeaderTemplate> element just above the <ItemTemplate>

 

<HeaderTemplate>
    <div style="padding-bottom:20px"><strong>Files</strong> (Header)</div>
</HeaderTemplate>

 

Repeater with <FooterTemplate> element

 

<FooterTemplate>
    <div style="padding-top:20px"><asp:Label ID="lblFooter" runat="server"></asp:Label></div>
</FooterTemplate>

 

Code Behind In C#

 

Control ft = rp.Controls[rep.Controls.Count - 1].Controls[0];
Label lbl_Footer = ft.FindControl("lblFooter") as Label;
lbl_Footer.Text = "Showing total <b>" + fileList.Length + "</b> files in the Footer.";

 

Repeater Control With Example in Asp.Net C#:- Asp.Net Repeater Control displays a list of data fetched from various available sources such as the Database, an XML file or files fetched from a folder.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html> <head> <title>Asp.Net Repeater Control</title> </head> <body> <form id="form1" runat="server"> <div style="font:13px Verdana;width:310px;"> <asp:ScriptManager ID="scriptManager" runat="server" EnablePageMethods="true" /> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <h3>Asp.Net Repeater Control</h3> <%--THE REPEATER CONTROL.--%> <asp:Repeater id="rp" runat="server"> <%--HEADER OF THE REPEATER--%> <HeaderTemplate> <table border="0" width="200px"> </HeaderTemplate> <%--SHOWING ITEMS--%> <ItemTemplate> <tr> <td style="padding:2px; border:solid 1px #CCC;"> <asp:Label Text='<%# Container.DataItem.ToString() %>' runat="server"></asp:Label> </td> </tr> </ItemTemplate> <%--ALTERNATE TEMPLATE (SHOWING ITEMS IN DIFFERENT COLOR--%> <AlternatingItemTemplate> <tr> <td style="padding:2px; border:solid 1px #CCC; background:#EAF7FB; width:200px;"> <asp:Label Text='<%# Container.DataItem.ToString() %>' runat="server"></asp:Label> </td> </tr> </AlternatingItemTemplate> <%--REPEATER FOOTER--%> <FooterTemplate> </table> <div style="padding:20px 0;"> <asp:Label ID="lblFoot" runat="server"></asp:Label> </div> </FooterTemplate> </asp:Repeater> <%--BUTTON CONTROL--%> <asp:Button ID="btVF" Text="View Files" AutoPostBack="true" OnClick="Show" Font-Names="sanserif" Font-Italic="true" Font-Size="155%" runat="server" /> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="PostBackTrigger" /> </Triggers> </asp:UpdatePanel> </div> </form> </body> </html> using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.IO; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) {} protected void Show(object sender, EventArgs e) { DirectoryInfo Folder = new DirectoryInfo(Server.MapPath("Files\\")); FileInfo[] fileList = Folder.GetFiles("*.*"); //BIND THE FILE LIST WITH THE REPEATER CONTROL. rp.DataSource = fileList; rp.DataBind(); } } Adding the <AlternatingTemplate> below the <ItemTemplate> will show files with a different background color for every alternate row. <AlternatingItemTemplate> <div style="padding:3px; border:solid 1px #FFF; background:#black"> <asp:Label Text='<%# Container.DataItem.ToString() %>' runat="server"></asp:Label> </div> </AlternatingItemTemplate> </AlternatingItemTemplate> <SeparatorTemplate><hr /> </SeparatorTemplate> Add the <HeaderTemplate> element just above the <ItemTemplate> <HeaderTemplate> <div style="padding-bottom:20px"><strong>Files</strong> (Header)</div> </HeaderTemplate> Repeater with <FooterTemplate> element <FooterTemplate> <div style="padding-top:20px"><asp:Label ID="lblFooter" runat="server"></asp:Label></div> </FooterTemplate> Code Behind In C# Control ft = rp.Controls[rep.Controls.Count - 1].Controls[0]; Label lbl_Footer = ft.FindControl("lblFooter") as Label; lbl_Footer.Text = "Showing total <b>" + fileList.Length + "</b> files in the Footer.";