Repeater Control With Example in Asp.Net C#

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.";

 

2021-10-03