ASP.NET 4 Unleased - p 66 ppsx

Displaying Data with the Repeater Control To display data with the Repeater control, you must create an ItemTemplate.. For example, the page in Listing 13.1 displays the contents of the

Trang 1

Displaying Data with the Repeater Control

To display data with the Repeater control, you must create an ItemTemplate For

example, the page in Listing 13.1 displays the contents of the Movies database table (see

Figure 13.1)

LISTING 13.1 ShowRepeater.aspx

<%@ Page Language=”C#” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

html

{

background-color:silver;

}

.content

{

width:600px;

border:solid 1px black;

background-color:#eeeeee;

}

FIGURE 13.1 Displaying data with a Repeater control

Trang 2

.movies

{

margin:20px 10px;

padding:10px;

border:dashed 2px black;

background-color:white;

}

</style>

<title>Show Repeater</title>

</head>

<body>

<asp:Repeater

id=”rptMovies”

DataSourceID=”srcMovies”

Runat=”server”>

<b>Directed by:</b> <%# Eval(“Director”) %>

<br />

<b>Box Office Totals:</b> <%# Eval(“BoxOfficeTotals”,”{0:c}”) %>

</div>

</ItemTemplate>

</asp:Repeater>

<asp:SqlDataSource

id=”srcMovies”

ConnectionString=”<%$ ConnectionStrings:Movies %>”

SelectCommand=”SELECT Title,Director,BoxOfficeTotals

FROM Movies”

Runat=”server” />

</div>

</form>

</body>

</html>

The Repeater control in Listing 13.1 displays each record in a separate HTML <div> tag A

databinding expression is used to display the value of each column

In Listing 13.1, declarative databinding is used to bind the Repeater to the

SqlDataSource You also can databind a Repeater control programmatically

Trang 3

For example, the page in Listing 13.2 contains a Repeater control that renders a JavaScript

array The Repeater control is programmatically databound to the list of files in the

Photos directory

LISTING 13.2 ShowRepeaterPhotos.aspx

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

void Page_Load()

{

if (!Page.IsPostBack)

{

DirectoryInfo dir = new DirectoryInfo(MapPath(“~/Photos”));

rptPhotos.DataSource = dir.GetFiles(“*.jpg”);

rptPhotos.DataBind();

}

</script>

.photo

{

width:400px;

filter:progid:DXImageTransform.Microsoft.Fade(duration=2);

}

</style>

var photos = new Array();

window.setInterval(showImage, 5000);

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();

Trang 4

image.filters[0].Play();

}

</script>

<title>Show Repeater Photos</title>

</head>

<body>

<div>

<asp:Repeater

id=”rptPhotos”

Runat=”server”>

<%# Eval(“Name”, “photos.push(‘Photos/{0}’)”) %>

</ItemTemplate>

</asp:Repeater>

showImage();

</script>

</div>

</form>

</body>

</html>

The page in Listing 13.2 randomly displays a different photo every 5 seconds A random

image is selected from the JavaScript array and displayed by the JavaScript showImage()

function An Internet Explorer transition filter is used to create a fade-in effect

WEB STANDARDS NOTE

The transition filter is an Internet Explorer-only extension to Cascading Style Sheets

(CSS) The page still works with Opera and Firefox, but you don’t get the fade-in effect

Using Templates with the Repeater Control

The Repeater control supports five different types of templates:

Trang 5

You are required to use only an ItemTemplate; the other types of templates can be used at

your own discretion The order in which you declare the templates in the Repeater

control does not matter

You can use the SeparatorTemplate to create a banding effect (as in old-time computer

paper) In other words, you can use the SeparatorTemplate to display alternating rows

with a different background color This approach is illustrated by the page in Listing 13.3

(see Figure 13.2)

FIGURE 13.2 Displaying an HTML table with the Repeater control

LISTING 13.3 ShowRepeaterTable.aspx

html

{

Trang 6

}

.content

{

width:600px;

}

.movies

{

border-collapse:collapse;

}

.movies th,.movies td

{

padding:10px;

border-bottom:1px solid black;

}

.alternating

{

background-color:#eeeeee;

}

</style>

<title>Show Repeater Table</title>

</head>

<body>

<asp:Repeater

id=”rptMovies”

Runat=”server”>

<tr>

<th>Movie Title</th>

<th>Movie Director</th>

<th>Box Office Totals</th>

</tr>

</HeaderTemplate>

<tr>

Trang 7

</tr>

</ItemTemplate>

</tr>

</AlternatingItemTemplate>

</table>

</FooterTemplate>

</asp:Repeater>

<asp:SqlDataSource

id=”srcMovies”

SelectCommand=”SELECT Title,Director,BoxOfficeTotals

FROM Movies”

</div>

</form>

</body>

</html>

The Repeater control in Listing 13.3 renders an HTML table in which every other row

appears with a gray background color This Repeater control uses four out of five of the

templates supported by Repeater: the ItemTemplate, AlternatingItemTemplate,

HeaderTemplate, and FooterTemplate

The AlternatingItemTemplate contains almost exactly the same content as the

ItemTemplate The only difference is that the <tr> tag includes a class attribute that

changes its background color

The SeparatorTemplate is used to add content between each data item from the data

source For example, the page in Listing 13.4 uses a SeparatorItemTemplate to create a tab

strip with the Repeater control (see Figure 13.3)

Trang 8

LISTING 13.4 ShowSeparatorTemplate.aspx

html

{

}

.content

{

width:600px;

height:400px;

padding:10px;

}

a

{

color:blue;

FIGURE 13.3 Displaying a tab strip with the Repeater control

Trang 9

}

</style>

<title>Show SeparatorTemplate</title>

</head>

<body>

<asp:Repeater

id=”rptMovieCategories”

DataSourceID=”srcMovieCategories”

Runat=”server”>

<asp:HyperLink

id=”lnkMenu”

Text=’<%#Eval(“Name”)%>’

NavigateUrl=’<%#Eval(“Id”,”ShowSeparatorTemplate.aspx?id={0}”)%>’

</ItemTemplate>

 | 

</SeparatorTemplate>

</asp:Repeater>

<asp:Repeater

id=”rptMovies”

Runat=”server”>

<ul>

</HeaderTemplate>

</ItemTemplate>

</ul>

</FooterTemplate>

</asp:Repeater>

<asp:SqlDataSource

id=”srcMovieCategories”

SelectCommand=”SELECT Id, Name

FROM MovieCategories”

Trang 10

<asp:SqlDataSource

id=”srcMovies”

SelectCommand=”SELECT Title FROM Movies

WHERE CategoryId=@CategoryId”

Runat=”server”>

<asp:QueryStringParameter

Name=”CategoryId”

QueryStringField=”Id” />

</SelectParameters>

</asp:SqlDataSource>

</div>

</form>

</body>

</html>

The page in Listing 13.4 contains two Repeater controls The first Repeater control

displays a tab strip of movie categories The second Repeater control displays a bulleted

list of matching movies

Handling Repeater Control Events

The Repeater control supports the following events:

event

The page in Listing 13.5 illustrates how you can use the DataBinding, ItemCommand, and

ItemDataBound events This page uses a Repeater control to update, delete, and insert

database records (see Figure 13.4)

Tiêu đề	Using The Repeater And DataList Controls
Trường học	University of Example
Chuyên ngành	Computer Science
Thể loại	Essay
Năm xuất bản	2025
Thành phố	Example City

Định dạng
Số trang	10
Dung lượng	623,28 KB