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!