閱讀1043 返回首頁    go 阿裏雲 go 技術社區[雲棲]


用Repeater控件顯示數據

如果你正在使用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.NETWeb數據控件還有其它一個共性:它們都使用DataBind方法來生成用戶界麵。調用這一方法可以返回並顯示數據(假設DataSource和DataMember屬性設置正確)。在查看DataBind方法之前,我們先看看如何在一個Web頁麵中使用一個Repeater控件。

使用Repeater控件
使用Repeater控件的第一步驟是決定我們將要使用的數據源和字段。例如,我們將要使用SQLServerNorthwind數據庫中的Employees列表。Web頁麵將顯示職工的完整名字,地址,以及電話號碼。HTML將使用DIV標記,用Repeater模板來分隔內容。下麵是Web頁麵的HTML內容:

<%@Pagelanguage="c#"%>
<%@ImportNamespace="System.Data"%>
<%@ImportNamespace="System.Data.SqlClient"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<html><head>
<title>Builder.comRepeaterExample</title>
<metaname="GENERATOR"Content="MicrosoftVisualStudio.NET7.1">
<metaname="CODE_LANGUAGE"Content="C#">
<style>
.alternate{
FONT-WEIGHT:bold;
COLOR:black;
FONT-FAMILY:Verdana,'TimesNewRoman';
BACKGROUND-COLOR:yellow
}
.row{
FONT-WEIGHT:bold;
COLOR:black;
FONT-FAMILY:Verdana,'TimesNewRoman';
BACKGROUND-COLOR:white
}
.footer{
FONT-WEIGHT:bold;
COLOR:red;
FONT-FAMILY:Verdana,'TimesNewRoman';
BACKGROUND-COLOR:gray
}
.header{
FONT-WEIGHT:bold;
COLOR:yellow;
FONT-FAMILY:Verdana,'TimesNewRoman';
BACKGROUND-COLOR:gray
}
.box{
BORDER-RIGHT:bluegroove;
BORDER-TOP:bluegroove;
DISPLAY:block;
VERTICAL-ALIGN:baseline;
OVERFLOW:auto;
BORDER-LEFT:bluegroove;
CURSOR:wait;
BORDER-BOTTOM:bluegroove;
FONT-FAMILY:verdana;
TEXT-ALIGN:center
}
body{
background:#333;
}
</style>
<scriptlanguage="C#"runat="server">
privatevoidPage_Load(objectsender,System.EventArgse){
if(!IsPostBack){
DataSetdset=newDataSet();
stringconn="server=(local);InitialCatalog=Northwind;UID=ctester;PWD=password";
stringqry="SELECTfirstname,lastname,address,city,region,postalcode,
homephoneFROMemployees";
SqlDataAdaptersda=newSqlDataAdapter(qry,conn);
sda.Fill(dset);
Repeater1.DataSource=dset.Tables[0].DefaultView;
Repeater1.DataBind();
}}
</script></head>
<bodyMS_POSITIONING="GridLayout"bgColor="#00cc99">
<formmethod="post"runat="server">
<div>
<asp:Repeaterrunat="server">
<HeaderTemplate>
<div>NorthwindEmployees</div>
</HeaderTemplate>
<SeparatorTemplate><hr/></SeparatorTemplate>
<ItemTemplate><div>
<%#((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>
<%#((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>
<%#((DataView)Repeater1.DataSource).Count+"employeesfound."%>
</div></FooterTemplate>
</asp:Repeater></div></form></body></html>

可以注意到,每個Repeater行中樣式表控製著文字的外觀。除此之外,在網頁內容中還添加了一個文本框。嵌入式C#代碼從Repeater的數據源中獲取相應的列。每個數據項都被轉換成一個DataRowView對象以便顯示。

這一頁麵並不是使用ASP.NET的“後台代碼”性質。由於這一原因,頁麵引用了兩個System.Data和System.Data.SqlClient空間名稱。這對於使用DataRowView對象和與SQLServer交互訪問是必需的。

當調用頁麵時就會觸發Page_Load事件。此時會把數據源連接到Repeater控件上,並查詢數據庫。每一Repeater行的代碼從潛在數據源中載入數據,並且Web頁麵顯示這些數據。

這一設計使用了樣式表(以及HTMLdiv標記),所以更改外觀隻需要更改必要的樣式表代碼。為了進一步地將數據和顯示分離,你可以在一個獨立文件中存儲樣式表,並以一個HTMLLINK標記來引用它們。

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

最後更新:2017-04-02 00:06:33

  上一篇:go ASP.NET訪問Oracle數據庫的方法
  下一篇:go ASP.NET保持用戶狀態的九種選擇