Repeater Control in ASP.Net: Part 1

Introduction

The Repeater control is entirely template driven. We can format the rendered output of the control in any way. For example, we can use the Repeater control to display records in a bulleted list, a set of HTML tables, or even in a comma-delimited list too.

Displaying Data with Repeater Control

To display data with the Repeater control, we must create an ItemTemplate. For example, the page given below displays the contents of the BOOK_LIST database table.

Repeater1.gif

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">

    <style type="text/css">
    html
    {
        background-color:silver;
    }
    .content
    {
        width:600px;
        border:solid 1px black;
        background-color:#eeeeee;
    }
    .books
    {
        margin:20px 10px;
        padding:10px;
        border:dashed 2px black;
        background-color:white;
    }
    </style>

    <title></title>
</head>
<
body>
    <form id="form1" runat="server">

    <div id="content">

    <asp:Repeater
        id="rptBooks"
        DataSourceID="SqlDataSource1"
        Runat="server">
        <ItemTemplate>
        <div class="books">
        <b><u ><%# Eval("TITLE")%></u></b>
        <br />
        <b>Serial Number:</b>
        <%# Eval("ID")%>
        <br />
        <b>Author:</b>
        <%# Eval("AUTHOR")%>
        <br />
        <b>PRICE:</b>
        <%# Eval("PRICE")%>
        </div>
        </ItemTemplate>
    </asp:Repeater>

        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>"
            ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
            SelectCommand="SELECT [ID], [TITLE], [AUTHOR], [PRICE] FROM [BOOK_LIST]">
        </asp:SqlDataSource>

    </div>
    </form>
</body>
</
html>

In above example, Repeater control is used to display each record in a separate HTML <div> tag. A databinding expression is used to display the value of each column. Declarative databinding is used to bind the Repeater to the SqlDataSource. We also can databind a Repeater control programmatically. For example, the page given below contains a Repeater control that renders a JavaScript array. The Repeater control is programmatically databound to the list of files in the Photos directory.

Repeater1.1.gif

All the photographs that you are watching in above Internet Explorer screenshots are mine. I recommend you to use Internet Explorer to see Microsoft's Fading Effect. All the images above in Internet Explorer screenshots being displayed with Repeater Control. Here is the code that I have used. Download the project from above for more details.

<%@ Page Language="VB" %>

<%@ Import Namespace="System.IO" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<script runat="server">

    Sub Page_Load()
        If Not Page.IsPostBack Then
            Dim dir As New DirectoryInfo(MapPath("~/Photos"))
            rptPhotos.DataSource = dir.GetFiles("*.jpg")
            rptPhotos.DataBind()
        End If
    End Sub
</script>
<
html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <style type="text/css">
        .photo
        {
            width:400px;
            background-color:white;
            filter:progid:DXImageTransform.Microsoft.Fade(duration=1);
        }
    </style>
    <script type="text/javascript">
        var photos = new Array();
        window.setInterval(showImage, 3000);

        function showImage() {
            if (photos.length > 0) {
                var index = Math.floor(Math.random() * photos.length);
                var image = document.getElementById('imgPhoto');
                image.src = photos[index];
                if (image.filters) {
                    image.filters[0].Apply();
                    image.filters[0].Play();
                }
            }
        }
    </script>
    <title>Show Repeater Photos</title>
</head>
<
body>
    <form id="form1" runat="server">
    <div>

    <img id="imgPhoto" alt="" class="photo" />
    <script type="text/javascript">
    <asp:Repeater
        id="rptPhotos"
        Runat="server">
        <ItemTemplate>
        <%# Eval("Name", "photos.push('Photos/{0}')") %>
        </ItemTemplate>
    </asp:Repeater>
    showImage();
    </script>

    </div>
    </form>
</body>
</
html>

Note: Continue in next part.

HAVE A GREAT CODING!