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.
<%@ 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.
image
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.
Comments
Post a Comment