关于Repeater控件的使用
2024-07-21 02:24:40
供稿：网友
关于repeater控件的使用
repeater控件是一个数据显示控件，该控件允许通过为列表中显示的每一项重复使用指定的模板来自定义布局。
要显示数据，必须先创建模板来绑定数据列表，模块定义如下（另见sdk）：
模板
说明
alternatingitemtemplate
与 itemtemplate 元素类似，但在 repeater 控件中隔行（交替项）呈现一次。通过设置 alternatingitemtemplate 元素的样式属性，可以为其指定不同的外观。
footertemplate
在所有数据绑定行呈现之后呈现一次的元素。典型的用途是关闭在 headertemplate 项中打开的元素（使用 </table> 这样的标记）。
注意 footertemplate 不能是数据绑定的。
headertemplate
在所有数据绑定行呈现之前呈现一次的元素。典型的用途是开始一个容器元素（如表）。
注意 headertemplate 项不能是数据绑定的。
itemtemplate
为数据源中的每一行都呈现一次的元素。若要显示 itemtemplate 中的数据，请声明一个或多个 web 服务器控件并设置其数据绑定表达式以使其计算为 repeater 控件（即容器控件）的 datasource 中的字段。以下示例显示一个示例声明，它显示包含 label 控件中的第一个名称的字段。
first name:
<asp:label runat="server"
text="<%# container.dataitem.firstname %>" />
separatortemplate
在各行之间呈现的元素，通常是分行符（<br> 标记）、水平线（<hr> 标记）等。
注意 separatortemplate 项不能是数据绑定的。
注：该控件是不能通过可视化编辑模板的，而datalist的datagrid控件就可以。
下面说一下程序的创建过程：
1、 创建一个web应用程序，将默认的web窗体改名为：repeater.aspx。
2、 切换到“html”视图，输入下列代码：
<%@ page language="c#" codebehind="repeater.aspx.cs" autoeventwireup="false" inherits="teachshow.charpter7.repeater" %>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en" >
<html>
<head>
<title>repeater</title>
<link rel="stylesheet" type="text/css" href="../style.css">
<meta name="generator" content="microsoft visual studio .net 7.1">
<meta name="code_language" content="c#">
<meta name="vs_defaultclientscript" content="javascript">
<meta name="vs_targetschema" content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body ms_positioning="gridlayout">
<form id="form1" method="post" runat="server">
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="272" height="136">
<tr>
<td width="272" height="136">
<div align="center">
<center>
<table border="1" cellpadding="0" cellspacing="0" width="272" height="60" bordercolorlight="#000000"
bordercolordark="#ffffff" class="smallred">
<asp:repeater id="repeater1" runat="server">
<headertemplate>
<tr>
<td width="90" height="30"><font face="宋体">数字</font></td>
<td width="91" height="30"><font face="宋体">平方</font></td>
<td width="91" height="30"><font face="宋体">立方</font></td>
</tr>
</headertemplate>
<itemtemplate>
<tr>
<td width="90" height="30"><%# databinder.eval(container.dataitem,"数字") %></td>
<td width="91" height="30"><%# databinder.eval(container.dataitem,"平方") %></td>
<td width="91" height="30"><%# databinder.eval(container.dataitem,"立方") %></td>
</tr>
</itemtemplate>
</asp:repeater>
</table>
</center>
</div>
</td>
</tr>
</table>
</center>
</div>
</form>
</body>
</html>
解释一下程序中用到的方法：
databinder.eval()方法：该方法用于在运行时计算数据绑定表达式，并且根据浏览器的需要来格式化输出结果。该方法有三个参数：
a、 数据项的命名容器：命名容器是一个对象引用，该对象即是计算表达式所针对的对象。如果绑定是针对列表控件（如repeater、datalist或datagrid）的，则命名容器将始终是container.dataitem。如果绑定是针对页面的，则命名容器是page。
b、 数据字段名：绑定表格的列名（此例如“平方”等）。
c、 格式字符串
如果要求高性能，不建议使用databinder.eval（）方法
3、 打开repeater.aspx.cs文件，输入下面的代码：
using system;
using system.collections;
using system.componentmodel;
using system.data;
using system.drawing;
using system.web;
using system.web.sessionstate;
using system.web.ui;
using system.web.ui.webcontrols;
using system.web.ui.htmlcontrols;
namespace teachshow.charpter7
{
/// <summary>
/// repeater 的摘要说明。
/// </summary>
public class repeater : system.web.ui.page
{
protected system.web.ui.webcontrols.repeater repeater1;
private void page_load(object sender, system.eventargs e)
{
// 在此处放置用户代码以初始化页面
if(!this.ispostback)
{
datatable mydt=new datatable();
datarow mydr;
mydt.columns.add(new datacolumn("数字",typeof(int32)));
mydt.columns.add(new datacolumn("平方",typeof(int32)));
mydt.columns.add(new datacolumn("立方",typeof(int32)));
for(int i=0;i<=10;i++)
{
mydr=mydt.newrow();
mydr[0]=i;
mydr[1]=i*i;
mydr[2]=i*i*i;
mydt.rows.add(mydr);
}
this.repeater1.datasource=mydt;
this.repeater1.databind();
}
}
#region web 窗体设计器生成的代码
override protected void oninit(eventargs e)
{
//
// codegen: 该调用是 asp.net web 窗体设计器所必需的。
//
initializecomponent();
base.oninit(e);
}
/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void initializecomponent()
{
this.repeater1.itemcommand += new system.web.ui.webcontrols.repeatercommandeventhandler(this.repeater1_itemcommand);
this.load += new system.eventhandler(this.page_load);
}
#endregion
private void repeater1_itemcommand(object source, system.web.ui.webcontrols.repeatercommandeventargs e)
{
}
}
}
4、 最后浏览，看看有什么结果？见下表：
数字
平方
立方
0
0
0
1
1
1
2
4
8
3
9
27
4
16
64
5
25
125
6
36
216
7
49
343
8
64
512
9
81
729
10
100
1000
