如果你正在使用asp.net,你一定对datagrid控件非常熟悉。datagrid控件提供了各种特性,通过这些特性可以很容易地在一个web页面上以列表形式显示数据。但是,如果你不想使用html表格形式呢?此时,可以使用一个datagrid的一个鲜为人知的兄弟控件,即repeater控件。repeater控件提供显示你所需要数据的灵活性。
repeater控件是什么?
repeater是一个可重复操作的控件,也就是说,它通过使用模板显示一个数据源的内容,而你可以很容易地配置这些模板。repeater包含如标题和页脚这样的数据,它可以遍历所有的数据选项并应用到模板中。
与datagrid和datalist控件不同,repeater控件并不是由webcontrol类派生而来。所以,它不包括一些通用的格式属性,比如控制字体,颜色,等等。然而,使用repeater控件,html(或者一个样式表)或者asp.net类可以处理这些属性。
html在哪里?
repeater控件与datagrid (以及datalist)控件的主要区别是在于如何处理html。asp.net建立html代码以显示datagrid控件,但repeater允许开发人员决定如何显示数据。所以,你可以选择将数据显示在一个html表格中或者一个顺序列表中。这主要取决于你的选择,但你必须将正确的html插入到asp.net页面中。
模板与datalist一样,repeater控件只支持模板。以下的模板可供选择:
alternatingitemtemplate: 指定如何显示每一其它选项。
itemtemplate: 指定如何显示选项。(alternatingitemtemplate可以覆盖这一模板。)
headertemplate: 建立如何显示标题。
footertemplate: 建立如何显示页脚。
separatortemplate: 指定如何显示不同选项之间的分隔符。
你可以使用这些模板来显示你希望的数据。唯一具有强制性的模板是itemtemplate,所有其它的模板都是具有选择性的。
数据
对于处理一个数据源,repeater控件具有与datagrid与datalist相同的属性:
datamember:获得或者设置与 repeater 控件绑定的相应datasource属性的表格。
datasource:获得或者设置为 repeater 显示提供数据的数据源。
除此之外,还有一个items属性,你可以通过这一属性编程访问repeater数据中单一选项。它返回一个repeateritemcollection对象,为一组repeateritem对象的集合,代表 repeater 数据的每一行。
asp.net web数据控件还有其它一个共性:它们都使用databind方法来生成用户界面。调用这一方法可以返回并显示数据(假设datasource和datamember属性设置正确)。在查看databind方法之前,我们先看看如何在一个web页面中使用一个repeater控件。
使用repeater控件
使用repeater控件的第一步骤是决定我们将要使用的数据源和字段。例如,我们将要使用sql server northwind数据库中的employees列表。web页面将显示职工的完整名字,地址,以及电话号码。html将使用div标记,用 repeater 模板来分隔内容。下面是 web 页面的 html 内容:
<%@ page language="c#" %>
<%@ import namespace="system.data" %>
<%@ import namespace="system.data.sqlclient" %>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en" >
<html><head>
<title>builder.com repeater example</title>
<meta name="generator" content="microsoft visual studio .net 7.1">
<meta name="code_language" content="c#">
<style>
.alternate {
font-weight: bold;
color: black;
font-family: verdana, 'times new roman';
background-color: yellow
}
.row {
font-weight: bold;
color: black;
font-family: verdana, 'times new roman';
background-color: white
}
.footer {
font-weight: bold;
color: red;
font-family: verdana, 'times new roman';
background-color: gray
}
.header {
font-weight: bold;
color: yellow;
font-family: verdana, 'times new roman';
background-color: gray
}
.box {
border-right: blue groove;
border-top: blue groove;
display: block;
vertical-align: baseline;
overflow: auto;
border-left: blue groove;
cursor: wait;
border-bottom: blue groove;
font-family: verdana;
text-align: center
}
body {
background: #333;
}
</style>
<script language="c#" runat="server">
private void page_load(object sender, system.eventargs e) {
if (!ispostback) {
dataset dset = new dataset();
string conn = "server=(local);initial catalog=northwind;uid=ctester;pwd=password";
string qry = "select firstname, lastname, address, city, region, postalcode,
homephone from employees";
sqldataadapter sda = new sqldataadapter(qry, conn);
sda.fill(dset);
repeater1.datasource = dset.tables[0].defaultview;
repeater1.databind();
} }
</script></head>
<body ms_positioning="gridlayout" bgcolor="#00cc99">
<form id="form1" method="post" runat="server">
<div class="box">
<asp:repeater id="repeater1" runat="server">
<headertemplate>
<div class="header" id="header">northwind employees</div>
</headertemplate>
<separatortemplate><hr /></separatortemplate>
<itemtemplate><div class="row">
<%# ((datarowview)container.dataitem)["firstname"] %>
<%# ((datarowview)container.dataitem)["lastname"] %><br>
<%# ((datarowview)container.dataitem)["address"] %><br>
<%# ((datarowview)container.dataitem)["city"] %>,
<%# ((datarowview)container.dataitem)["region"] %>
<%# ((datarowview)container.dataitem)["postalcode"] %><br>
<%# ((datarowview)container.dataitem)["homephone"] %>
</div></itemtemplate>
<alternatingitemtemplate><div class="alternate">
<%# ((datarowview)container.dataitem)["firstname"] %>
<%# ((datarowview)container.dataitem)["lastname"] %><br>
<%# ((datarowview)container.dataitem)["address"] %><br>
<%# ((datarowview)container.dataitem)["city"] %>,
<%# ((datarowview)container.dataitem)["region"] %>
<%# ((datarowview)container.dataitem)["postalcode"] %><br>
<%# ((datarowview)container.dataitem)["homephone"] %>
</div></alternatingitemtemplate>
<footertemplate><div class="footer">
<%# ((dataview)repeater1.datasource).count + " employees found." %>
</div></footertemplate>
</asp:repeater></div></form></body></html>
可以注意到,每个 repeater 行中样式表控制着文字的外观。除此之外,在网页内容中还添加了一个文本框。嵌入式 c# 代码从 repeater 的数据源中获取相应的列。每个数据项都被转换成一个datarowview对象以便显示。
这一页面并不是使用asp.net的“后台代码”性质。由于这一原因,页面引用了两个system.data和system.data.sqlclient空间名称。这对于使用datarowview对象和与 sql server 交互访问是必需的。
当调用页面时就会触发page_load事件。此时会把数据源连接到 repeater 控件上,并查询数据库。每一repeater行的代码从潜在数据源中载入数据,并且web页面显示这些数据。
这一设计使用了样式表(以及 html div 标记),所以更改外观只需要更改必要的样式表代码。为了进一步地将数据和显示分离,你可以在一个独立文件中存储样式表,并以一个html link标记来引用它们。
一个很好的选择
当与其他 asp.net 开发者交流时,开发人员对 repeater 控件知之甚少,这真让我感到惊讶。虽然它不如datagrid功能强大,但它在许多场合中仍然提供了出色的灵活性。repeater 控件缺少编辑和排序功能,但可以通过进一步编程而实现。
新闻热点
疑难解答
图片精选