用Repeater控件顯示數(shù)據(jù)
發(fā)表時(shí)間：2024-01-15 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]如果你正在使用ASP.NET，你一定對(duì)DataGrid控件非常熟悉。DataGrid控件提供了各種特性，通過(guò)這些特性可以很容易地在一個(gè)Web頁(yè)面上以列表形式顯示數(shù)據(jù)。但是，如果你不想使用HTML表格形式呢？此時(shí)，可以使用一個(gè)DataGrid的一個(gè)鮮為人知的兄弟控件，即Repeater控件。Repe...
如果你正在使用ASP.NET，你一定對(duì)DataGrid控件非常熟悉。DataGrid控件提供了各種特性，通過(guò)這些特性可以很容易地在一個(gè)Web頁(yè)面上以列表形式顯示數(shù)據(jù)。但是，如果你不想使用HTML表格形式呢？此時(shí)，可以使用一個(gè)DataGrid的一個(gè)鮮為人知的兄弟控件，即Repeater控件。Repeater控件提供顯示你所需要數(shù)據(jù)的靈活性。
Repeater控件是什么？
Repeater是一個(gè)可重復(fù)操作的控件，也就是說(shuō)，它通過(guò)使用模板顯示一個(gè)數(shù)據(jù)源的內(nèi)容，而你可以很容易地配置這些模板。Repeater包含如標(biāo)題和頁(yè)腳這樣的數(shù)據(jù)，它可以遍歷所有的數(shù)據(jù)選項(xiàng)并應(yīng)用到模板中。
與DataGrid和DataList控件不同，Repeater控件并不是由WebControl類(lèi)派生而來(lái)。所以，它不包括一些通用的格式屬性，比如控制字體，顏色，等等。然而，使用Repeater控件，HTML(或者一個(gè)樣式表)或者ASP.NET類(lèi)可以處理這些屬性。
HTML在哪里？
Repeater控件與DataGrid (以及DataList)控件的主要區(qū)別是在于如何處理HTML。ASP.NET建立HTML代碼以顯示DataGrid控件，但Repeater允許開(kāi)發(fā)人員決定如何顯示數(shù)據(jù)。所以，你可以選擇將數(shù)據(jù)顯示在一個(gè)HTML表格中或者一個(gè)順序列表中。這主要取決于你的選擇，但你必須將正確的HTML插入到ASP.NET頁(yè)面中。
模板與DataList一樣，Repeater控件只支持模板。以下的模板可供選擇：
AlternatingItemTemplate: 指定如何顯示每一其它選項(xiàng)。
ItemTemplate: 指定如何顯示選項(xiàng)。(AlternatingItemTemplate可以覆蓋這一模板。)
HeaderTemplate: 建立如何顯示標(biāo)題。
FooterTemplate: 建立如何顯示頁(yè)腳。
SeparatorTemplate: 指定如何顯示不同選項(xiàng)之間的分隔符。
你可以使用這些模板來(lái)顯示你希望的數(shù)據(jù)。唯一具有強(qiáng)制性的模板是ItemTemplate，所有其它的模板都是具有選擇性的。
數(shù)據(jù)
對(duì)于處理一個(gè)數(shù)據(jù)源，Repeater控件具有與DataGrid與DataList相同的屬性：
DataMember：獲得或者設(shè)置與 Repeater 控件綁定的相應(yīng)DataSource屬性的表格。
DataSource：獲得或者設(shè)置為 Repeater 顯示提供數(shù)據(jù)的數(shù)據(jù)源。
除此之外，還有一個(gè)Items屬性，你可以通過(guò)這一屬性編程訪(fǎng)問(wèn)Repeater數(shù)據(jù)中單一選項(xiàng)。它返回一個(gè)RepeaterItemCollection對(duì)象，為一組RepeaterItem對(duì)象的集合，代表 Repeater 數(shù)據(jù)的每一行。
ASP.NET Web數(shù)據(jù)控件還有其它一個(gè)共性：它們都使用DataBind方法來(lái)生成用戶(hù)界面。調(diào)用這一方法可以返回并顯示數(shù)據(jù)(假設(shè)DataSource和DataMember屬性設(shè)置正確)。在查看DataBind方法之前，我們先看看如何在一個(gè)Web頁(yè)面中使用一個(gè)Repeater控件。
使用Repeater控件
使用Repeater控件的第一步驟是決定我們將要使用的數(shù)據(jù)源和字段。例如，我們將要使用SQL Server Northwind數(shù)據(jù)庫(kù)中的Employees列表。Web頁(yè)面將顯示職工的完整名字，地址，以及電話(huà)號(hào)碼。HTML將使用DIV標(biāo)記，用 Repeater 模板來(lái)分隔內(nèi)容。下面是 Web 頁(yè)面的 HTML 內(nèi)容：
<%@ 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>
可以注意到，每個(gè) Repeater 行中樣式表控制著文字的外觀。除此之外，在網(wǎng)頁(yè)內(nèi)容中還添加了一個(gè)文本框。嵌入式 C# 代碼從 Repeater 的數(shù)據(jù)源中獲取相應(yīng)的列。每個(gè)數(shù)據(jù)項(xiàng)都被轉(zhuǎn)換成一個(gè)DataRowView對(duì)象以便顯示。
這一頁(yè)面并不是使用ASP.NET的“后臺(tái)代碼”性質(zhì)。由于這一原因，頁(yè)面引用了兩個(gè)System.Data和System.Data.SqlClient空間名稱(chēng)。這對(duì)于使用DataRowView對(duì)象和與 SQL Server 交互訪(fǎng)問(wèn)是必需的。
當(dāng)調(diào)用頁(yè)面時(shí)就會(huì)觸發(fā)Page_Load事件。此時(shí)會(huì)把數(shù)據(jù)源連接到 Repeater 控件上，并查詢(xún)數(shù)據(jù)庫(kù)。每一Repeater行的代碼從潛在數(shù)據(jù)源中載入數(shù)據(jù)，并且Web頁(yè)面顯示這些數(shù)據(jù)。
這一設(shè)計(jì)使用了樣式表（以及 HTML div 標(biāo)記），所以更改外觀只需要更改必要的樣式表代碼。為了進(jìn)一步地將數(shù)據(jù)和顯示分離，你可以在一個(gè)獨(dú)立文件中存儲(chǔ)樣式表，并以一個(gè)HTML LINK標(biāo)記來(lái)引用它們。
一個(gè)很好的選擇
當(dāng)與其他 ASP.NET 開(kāi)發(fā)者交流時(shí)，開(kāi)發(fā)人員對(duì) Repeater 控件知之甚少，這真讓我感到驚訝。雖然它不如DataGrid功能強(qiáng)大，但它在許多場(chǎng)合中仍然提供了出色的靈活性。Repeater 控件缺少編輯和排序功能，但可以通過(guò)進(jìn)一步編程而實(shí)現(xiàn)。
