關于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
