Repeater Control in Asp.Net

February 27th, 2013
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. This container resembles the GridView control in many ways, particularly the data binding part.

Here in this article we’ll demonstrate how to use a Repeater Control for fetching files from a folder and display it in a vertical format. The most fascinating part about this control is the way it can be used for various purposes with such ease.

Repeater Control in Asp.Net

The Repeater control comes with 5 different templates for various purposes.

1) <HeaderTemplate> </HeaderTemplate>: This is the first element whose cotents will show up as the Header of the list and will be display only once.

2) <ItemTemplate> </ItemTemplate>: The actual list of data fetched from the source will be repeatedly displayed by the ItemTemplate element.

3) <AlternatingItemTemplate> </AlternatingItemTemplate>: Add this element immediately after the ItemTemplate. It also shows data repeatedly at the alternative row in the list of elements.

4) <SeparatorTemplate> </SeparatorTemplate>: This element will show a separator between each row of data, like a horizontal line.

5) <FooterTemplate> </FooterTemplate>: Finally the footer of the list and like the Header Template, this element will also show up just once as the footer of the entire list.

Each of the elements will be used in this article with a piece of demo. So we will use ItemTemplate to start with. An AJAX control called the “UpdatePanel” along with a “Button” a “Label” will used to fetch and display data from the server. We are just trying to do a controlled call back to the server, without refreshing the entire web page.

Ref: Since we mentioned about the “UpdatePanel”, you must be interested in learning more about How to do Partial PostBack using an UpdatePanel control.

Start Visual Studio and create a “New Website” in your choosen language (Vb or C#). In the project folder create a new folder called “Misc Files” and dump few files in it. The list of we files are talking about, will be fetced from this folder and displayed using the Repeater Control.

In the design mode click the “Toolbox” button to show a list of controls. First drag and drop the “ScriptManager” control from the “AJAX Extention” on the web page followed by the “UpdatePanel” control. The “UpdatePanel” control won’t work till you add the “ScriptManger” control.

Drag and drop a “Button” control followed by the “Repeater” control inside the “UpdatePanel” control. The “Repeater” control will be found inside “Data” in the “Toolbox”.

Repeater with the <ItemTemplate> element
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>

<html>
<head>
    <title>Showing List of Files with Asp.Net Repeater Control</title>
</head>
<body>
    <form id="form1" runat="server">
    <div style="font-family:Verdana;font-size:12px;width:200px">
    
        <asp:ScriptManager ID="scriptManager" runat="server" EnablePageMethods="true" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <h3>Showing a List of Files using Asp.Net Repeater Control</h3>
                <asp:Button ID="btVF" Text="View Files" AutoPostBack="true" OnClick="Show" runat="server" />
                                <br /><br />
                <%--THE REPEATER CONTROL.--%>
                <asp:Repeater id="rep" runat="server">
                    <%--ITEMTEMPLATE--%>
                    <ItemTemplate>
                        <table border="0" width="200px">
                            <tr><td style="padding:2px; border:solid 1px #CCC">
                                <asp:Label Text='<%# Container.DataItem.ToString() %>' runat="server"></asp:Label>
                            </td></tr>
                        </table>
                    </ItemTemplate>
                </asp:Repeater>
            </ContentTemplate>
            
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btVF" />
            </Triggers>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

In the above design we are using an Asp.Net “Label” control to show the files. The “Repeater” control’s “DataItem” or simply the “items”, will be assigned to the “Label’s” text.

Add “using System.IO;” namespace in the beginning for “C#” and “Imports System.IO” for “Vb.Net”

C#
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)
    {
        // SHOW THE ENTIRE LIST FILES FROM THE FOLDER.
        DirectoryInfo Fold = new DirectoryInfo(Server.MapPath("Misc Files\\"));
        FileInfo[] fileList = Fold.GetFiles("*.*");

        //BIND THE FILE LIST WITH THE REPEATER CONTROL.
        rep.DataSource = fileList;  
        rep.DataBind();
    }
}               
Vb.Net
Option Explicit On
Imports System.IO

Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Show(ByVal sender As Object, ByVal args As EventArgs)
        ' SHOW THE ENTIRE LIST FILES FROM THE FOLDER.

        Dim Fold As New DirectoryInfo(Server.MapPath("Misc Files\"))
        Dim fileList As FileInfo() = Fold.GetFiles("*.*")

        ' BIND THE FILE LIST WITH THE REPEATER CONTROL.
        rep.DataSource = fileList
        rep.DataBind()
    End Sub
End Class       
Repeater with <HeaderTemplate> element

Add the “HeaderTemplate” element just above the “ItemTemplate”

<HeaderTemplate>
    <div style="padding-bottom:10px"><strong>Misc. Files</strong> (Header)</div>
</HeaderTemplate>
Repeater with <AlternatingTemplate> element

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

<AlternatingItemTemplate>
    <div style="padding:2px; border:solid 1px #CCC; background:#EAF7FB">
        <asp:Label Text='<%# Container.DataItem.ToString() %>' runat="server"></asp:Label>
    </div>
</AlternatingItemTemplate>
Repeater with <SeperatorTemplate> element

Though this demo does not need any separator with the Repeater Control, (since the rows have “borders”), we will just show you how to use it inside the control. Just add the “SeperatorTemplate” element below either the “ItemTemplate” or the “AlternatingItemTemplate”. That’s up to you.

</AlternatingItemTemplate>
<SeparatorTemplate><hr /></SeparatorTemplate>  <%--SHOWING A HORIZONATAL LINE.--%>
And finaly the Repeater with <FooterTemplate> element

We will show the total count of items at the end of the list. So the “FooterTemplate” will be an ideal choice to display total files fetched from the folder.

Just add the “FooterTemplate” inside the “Repeater” control.

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

To make the above “FooterTemplate” to show the total file count, add the below code in the “Show” procedure in the code behind.

Code Behind (C#)
// ADD THIS CODE AFTER BINDING THE FILE LIST WITH REPEATER CONTROL.
Control ft = rep.Controls[rep.Controls.Count - 1].Controls[0];
Label lblFooter = ft.FindControl("lblFoot") as Label;
lblFooter.Text = "Showing total <b>" + fileList.Length + "</b> files in the Footer.";
Code Behind (Vb.Net)
// ADD THIS CODE AFTER BINDING THE FILE LIST WITH REPEATER CONTROL.
Dim ft As Control = rep.Controls(rep.Controls.Count - 1).Controls(0)
Dim lblFooter As Label = TryCast(ft.FindControl("lblFoot"), Label)
lblFooter.Text = "Showing total <b>" & fileList.Length & "</b> files in the Footer."

That is it.

advertise here
comments powered by Disqus

Join our Google Plus Community and be a part of a discussion!