用Repeater控制項顯示資料

來源:互聯網
上載者:User
控制項|資料|顯示

    如果你正在使用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:獲得或者設定與 重複器控制項綁定的相應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行的代碼從潛在資料來源中載入資料,並且Web頁面顯示這些資料。

這一設計使用了樣式表(以及 HTML div 標記),所以更改外觀只需要更改必要的樣式表代碼。為了進一步地將資料和顯示分離,你可以在一個獨立檔案中儲存樣式表,並以一個HTML LINK標記來引用它們。

一個很好的選擇
當與其他 ASP.NET 開發人員交流時,開發人員對 重複器控制項知之甚少,這真讓我感到驚訝。雖然它不如DataGrid功能強大,但它在許多場合中仍然提供了出色的靈活性。重複器控制項缺少編輯和排序功能,但可以通過進一步編程而實現。




相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。