導(dǎo)言

　　在之前的28篇教程的例子里,如果我們需要顯示某個(gè)數(shù)據(jù)源的多條記錄,我們使用GridView .GridView 的一行表示數(shù)據(jù)源的一條記錄,列表示一個(gè)字段.雖然GridView 用來(lái)顯示數(shù)據(jù),分頁(yè),排序,編輯,刪除非常的方便,但是有點(diǎn)臃腫.而且GridView 結(jié)構(gòu)的標(biāo)記是固定的—它包含一個(gè)帶有<tr>和<td>的HTML <table>標(biāo)記.

　　為了在顯示多條記錄時(shí),有更好的自定義功能,ASP.NET 2.0提供了DataList 和Repeater (ASP.NET 1.x版本里也有 ).DataList 和Repeater 使用模板來(lái)顯示內(nèi)容,而不是象在GridView里那樣使用BoundFields, CheckBoxFields, ButtonFields等.DataList 的標(biāo)記語(yǔ)言為HTML <table>, 不過(guò)它允許每一行顯示多條記錄.另一方面,Repeater不會(huì)生成多余的標(biāo)記語(yǔ)言,因此如果你想精確控制標(biāo)記語(yǔ)言的生成,它是最理想的選擇.

　　在后面的若干章教程里,我們將從使用DataList 和Repeater 的模板顯示數(shù)據(jù)開(kāi)始,來(lái)學(xué)習(xí)它們的最基本的用法.我們將學(xué)習(xí)如何控制這些控件的格式,如何在DataList里改變數(shù)據(jù)的布局,最常見(jiàn)的主/從場(chǎng)景,編輯和刪除數(shù)據(jù)的方法,以及如何分頁(yè)等.

第一步 1: 添加DataList 和Repeater 教程頁(yè)

　　在開(kāi)始本篇教程前,我們首先花點(diǎn)時(shí)間來(lái)創(chuàng)建一些頁(yè),這些頁(yè)會(huì)在本篇和后面的幾篇教程里用到.先添加一個(gè)名為DataListRepeaterBasics的文件夾,然后,添加下面的頁(yè),添加頁(yè)的時(shí)候確保每頁(yè)都選擇了 Site.master作為母板頁(yè):

Default.aspx
Basics.aspx
Formatting.aspx
RepeatColumnAndDirection.aspx
NestedControls.aspx

圖 1: 創(chuàng)建 DataListRepeaterBasics 文件夾 和添加頁(yè)

　　打開(kāi)Default.aspx頁(yè)的設(shè)計(jì)視圖,從UserControls文件夾將SectionLevelTutorialListing.ascx用戶控件拖進(jìn)來(lái).這個(gè)用戶控件提供的功能就是列出教程章節(jié).我們?cè)谀赴屙?yè)和站點(diǎn)導(dǎo)航里創(chuàng)建的它.

圖 2: 添加SectionLevelTutorialListing.ascx 用戶控件到Default.aspx

最后,將這些頁(yè)的地址加到 Web.sitemap 的條目里.在Paging and Sorting <siteMapNode>之后添加下面的標(biāo)記.

<siteMapNode
 title="Displaying Data with the DataList and Repeater"
 description="Samples of Reports that Use the DataList and Repeater Controls"
 url="~/DataListRepeaterBasics/Default.aspx" >
 <siteMapNode
 title="Basic Examples"
 description="Examines the basics for displaying data using the
   DataList and Repeater controls."
 url="~/DataListRepeaterBasics/Basics.aspx" />
 <siteMapNode
 title="Formatting"
 description="Learn how to format the DataList and the Web controls within
   the DataList and Repeater's templates."
 url="~/DataListRepeaterBasics/Formatting.aspx" />
 <siteMapNode
 title="Adjusting the DataList s Layout"
 description="Illustrates how to alter the DataList's layout, showing
   multiple data source records per table row."
 url="~/DataListRepeaterBasics/RepeatColumnAndDirection.aspx" />
 <siteMapNode
 title="Nesting a Repeater within a DataList"
 description="Learn how to nest a Repeater within the template of a DataList."
 url="~/DataListRepeaterBasics/NestedControls.aspx" />
</siteMapNode>

圖 3: 向 Site Map 里添加新的頁(yè)

第二步: 在 DataList里顯示Product信息

　　和FormView一樣,DataList 使用模板來(lái)顯示信息,而非BoundFields, CheckBoxFields等.而與FormView不同的是,DataList 是被用來(lái)顯示一組記錄,而不是單獨(dú)的一條.現(xiàn)在我們開(kāi)始本章的教程.首先看看如何將product 綁定到DataList.打開(kāi)DataListRepeaterBasics 文件夾里的Basics.aspx 頁(yè),然后從工具箱里拖一個(gè)DataList 進(jìn)來(lái).如圖4所示,在指定模板前,設(shè)計(jì)器會(huì)是灰色的.

圖 4: 從工具箱拖一個(gè)DataList到設(shè)計(jì)器里

　　打開(kāi)DataList的智能標(biāo)簽,添加一個(gè)ObjectDataSource ,使用ProductsBLL 類的GetProducts 方法來(lái)配置它.因?yàn)樵诒窘坛汤飫?chuàng)建的DataList 為只讀的,因此在INSERT, UPDATE, 和DELETE 標(biāo)簽的下拉列表里都選擇None.

圖 5: 創(chuàng)建一個(gè)新的ObjectDataSource

圖 6: 用ProductsBLL 類來(lái)配置ObjectDataSource

圖 7: 使用GetProducts 方法來(lái)獲取所有Product的信息

　　通過(guò)智能標(biāo)簽里配置完ObjectDataSource ,并把它和DataList 關(guān)聯(lián)起來(lái)后,Visual Studio會(huì)在DataList 里自動(dòng)為數(shù)據(jù)源返回的每個(gè)字段創(chuàng)建一個(gè)ItemTemplate 用來(lái)顯示name 和value (見(jiàn)下面的代碼).這個(gè)默認(rèn)的ItemTemplate看起來(lái)和綁定FormView 時(shí)自動(dòng)產(chǎn)生的模板是一樣的.

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
 DataSourceID="ObjectDataSource1" EnableViewState="False">
 <ItemTemplate>
 ProductID: <asp:Label ID="ProductIDLabel" runat="server"
    Text='<%# Eval("ProductID") %>' /><br />
 ProductName: <asp:Label ID="ProductNameLabel" runat="server"
    Text='<%# Eval("ProductName") %>' /><br />
 SupplierID: <asp:Label ID="SupplierIDLabel" runat="server"
    Text='<%# Eval("SupplierID") %>' /><br />
 CategoryID: <asp:Label ID="CategoryIDLabel" runat="server"
    Text='<%# Eval("CategoryID") %>'/><br />
 QuantityPerUnit: <asp:Label ID="QuantityPerUnitLabel" runat="server"
    Text='<%# Eval("QuantityPerUnit") %>' /><br />
 UnitPrice: <asp:Label ID="UnitPriceLabel" runat="server"
    Text='<%# Eval("UnitPrice") %>' /><br />
 UnitsInStock: <asp:Label ID="UnitsInStockLabel" runat="server"
    Text='<%# Eval("UnitsInStock") %>' /><br />
 UnitsOnOrder: <asp:Label ID="UnitsOnOrderLabel" runat="server"
    Text='<%# Eval("UnitsOnOrder") %>' /><br />
 ReorderLevel: <asp:Label ID="ReorderLevelLabel" runat="server"
    Text='<%# Eval("ReorderLevel") %>' /><br />
 Discontinued: <asp:Label ID="DiscontinuedLabel" runat="server"
    Text='<%# Eval("Discontinued") %>' /><br />
 CategoryName: <asp:Label ID="CategoryNameLabel" runat="server"
    Text='<%# Eval("CategoryName") %>' /><br />
 SupplierName: <asp:Label ID="SupplierNameLabel" runat="server"
    Text='<%# Eval("SupplierName") %>' /><br />
 <br />
 </ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
 OldValuesParameterFormatString="original_{0}"
 SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>

　　注意：當(dāng)通過(guò)智能標(biāo)簽將數(shù)據(jù)源綁定到FormView 時(shí)，Vistual Studio會(huì)創(chuàng)建一個(gè)ItemTemplate，一個(gè)InsertItemTemplate和一個(gè)EditItemTemplate．然而對(duì)DataList來(lái)說(shuō)，只會(huì)創(chuàng)建一個(gè)ItemTemplate ．這是因?yàn)镈ataList 不象FormView那樣，有內(nèi)置的編輯和插入功能．DataList 沒(méi)有編輯和刪除相關(guān)的事件，雖然要完成這些功能，對(duì)DataList 來(lái)說(shuō)沒(méi)有FormView那么簡(jiǎn)單，我們?nèi)匀豢梢约由倭看a來(lái)實(shí)現(xiàn)它．我們?cè)谝院蟮慕坛汤飼?huì)講到如何在DataList 里完成編輯和刪除的功能．

　　讓我們花點(diǎn)時(shí)間來(lái)改善一下模板的外觀．我們只顯示product的name，supplier，category，數(shù)量和單價(jià)．而且我們用<h4> 來(lái)顯示名字，其它字段都放在 <h4>heading下的<table>里．你可以通過(guò)DataList的只能標(biāo)簽里的 Edit Templates ，或者直接修改頁(yè)面聲明語(yǔ)法來(lái)達(dá)到以上目的．如果你是通過(guò)Edit Templates 來(lái)實(shí)現(xiàn)，那你的頁(yè)面代碼可能和下面的不完全一樣．但是通過(guò)瀏覽器瀏覽你的頁(yè)面應(yīng)該和圖８看起來(lái)差不多．

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
 DataSourceID="ObjectDataSource1" EnableViewState="False">
 <ItemTemplate>
 <h4><asp:Label ID="ProductNameLabel" runat="server"
  Text='<%# Eval("ProductName") %>' /></h4>
 <table border="0">
  <tr>
  <td class="ProductPropertyLabel">Category:</td>
  <td><asp:Label ID="CategoryNameLabel" runat="server"
   Text='<%# Eval("CategoryName") %>' /></td>
  <td class="ProductPropertyLabel">Supplier:</td>
  <td><asp:Label ID="SupplierNameLabel" runat="server"
   Text='<%# Eval("SupplierName") %>' /></td>
  </tr>
  <tr>
  <td class="ProductPropertyLabel">Qty/Unit:</td>
  <td><asp:Label ID="QuantityPerUnitLabel" runat="server"
   Text='<%# Eval("QuantityPerUnit") %>' /></td>
  <td class="ProductPropertyLabel">Price:</td>
  <td><asp:Label ID="UnitPriceLabel" runat="server"
   Text='<%# Eval("UnitPrice", "{0:C}") %>' /></td>
  </tr>
 </table>
 </ItemTemplate>
</asp:DataList>

　　注意：上面的例子使用的是Text指定為數(shù)據(jù)綁定的值的Label控件．我們也可以不使用Label，而只是保留數(shù)據(jù)綁定的代碼．也就是說(shuō)，我們可以用<%# Eval("CategoryName") %>來(lái)代替<asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' />．

　　使用Label控件有兩個(gè)好處,第一點(diǎn)在下一章我們會(huì)看到,就是提供了一個(gè)格式化數(shù)據(jù)的簡(jiǎn)單途徑.第二點(diǎn)是不使用web控件的時(shí)候,Edit Templates 不顯示聲明的數(shù)據(jù)綁定代碼.通過(guò)Edit Templates 的界面很容易操作靜態(tài)標(biāo)記語(yǔ)言和web控件,其前提是所有的數(shù)據(jù)綁定都是通過(guò)web控件的智能標(biāo)簽里的Edit DataBindings對(duì)話框來(lái)實(shí)現(xiàn).因此,使用DataList的時(shí)候,我建議使用Label控件,這樣通過(guò)Edit Templates 就可以操作其內(nèi)容.我們會(huì)看到,使用Repeater 時(shí)如果需要編輯其內(nèi)容,需要切換到源視圖.而設(shè)計(jì)Repeater模板的時(shí)候,我通常不使用Label控件,除非我需要格式化綁定數(shù)據(jù)的外觀.

圖 8:  用DataList的 ItemTemplate顯示Product

第三步: 改善DataList的外觀

　　和GridView一樣,DataList 提供了一些和風(fēng)格有關(guān)的屬性,比如Font, ForeColor, BackColor, CssClass, ItemStyle, AlternatingItemStyle, SelectedItemStyle等.當(dāng)使用 GridView 和DetailsView 時(shí),我們首先在DataWebControls Theme里創(chuàng)建了一些皮膚文件,這些文件預(yù)定義了這兩個(gè)控件的CssClass 屬性和RowStyle, HeaderStyle等.我們使用DataList的時(shí)候也采取這種方法.

　　象在使用ObjectDataSource展現(xiàn)數(shù)據(jù) 里談到的那樣,一個(gè)Skin 文件定義了一個(gè)web控件的默認(rèn)顯示屬性.一個(gè)Theme 是一組Skin, CSS, image, 和JavaScript files 的集合,它定義了一個(gè)web站點(diǎn)的外觀.在使用ObjectDataSource展現(xiàn)數(shù)據(jù) 那一章里,我們創(chuàng)建了一個(gè)DataWebControls  Theme(App_Themes 文件夾下) ,它包含兩個(gè)Skin文件- GridView.skin 和DetailsView.skin.我們現(xiàn)在來(lái)為DataList添加第三個(gè).右鍵單擊App_Themes/DataWebControls 文件夾,選擇Add a New Item,選擇Skin File,在名字里填DataList.skin.

圖 9: 創(chuàng)建一個(gè)名為DataList.skin的Skin文件

將下面的標(biāo)記語(yǔ)言添加到DataList.skin里.

<asp:DataList runat="server" CssClass="DataWebControlStyle">
 <AlternatingItemStyle CssClass="AlternatingRowStyle" />
 <ItemStyle CssClass="RowStyle" />
 <HeaderStyle CssClass="HeaderStyle" />
 <FooterStyle CssClass="FooterStyle" />
 <SelectedItemStyle CssClass="SelectedRowStyle" />
</asp:DataList>

　　上面用GridView 和DetailsView 使用的CSS文件設(shè)置DataList .在DataWebControlStyle, AlternatingRowStyle, RowStyle里用到的CSS文件是在Styles.css 里定義的.

　　添加完Skin后,DataList的外觀看起來(lái)會(huì)變了(你可以在視圖菜單里選擇刷新來(lái)看改變后的效果).見(jiàn)圖10,alternating product 的背景色為粉紅色.

圖 10: 添加skin文件后的效果

第四步: 瀏覽DataList的其它Templates

DataList 還支持除了ItemTemplate外的其它6種template:

HeaderTemplate — 用來(lái)呈現(xiàn) header row
AlternatingItemTemplate — 用來(lái)呈現(xiàn)alternating items
SelectedItemTemplate — 用來(lái)呈現(xiàn)selected item; selected item 的index 可以通過(guò)DataList 的 SelectedIndex property 得到
EditItemTemplate — 用來(lái)呈現(xiàn)被編輯的item
SeparatorTemplate — 用來(lái)分隔各個(gè)item
FooterTemplate - 用來(lái)呈現(xiàn)footer row

　　當(dāng)指定HeaderTemplate 或FooterTemplate時(shí),DataList 會(huì)加一個(gè)header 或footer .和GridView一樣,DataList 的header 和footer 沒(méi)有和數(shù)據(jù)綁定在一起.

　　注意:如我們?cè)谠贕ridView的頁(yè)腳中顯示統(tǒng)計(jì)信息 一章里看到的那樣,header 和footer 不支持?jǐn)?shù)據(jù)綁定語(yǔ)法,而數(shù)據(jù)綁定的信息可以通過(guò)GridView的RowDataBound event handler來(lái)寫(xiě).這個(gè)技術(shù)可以用來(lái)技術(shù)綁定的數(shù)據(jù)的和或其它信息,并在footer里顯示.同樣的,可以在DataList 和Repeater 里面這樣做.它們唯一的區(qū)別在于對(duì)DataList 和Repeater 來(lái)說(shuō)是為ItemDataBound 創(chuàng)建event handler (而不是RowDataBound ).

　　在我們的例子里,我們將標(biāo)題“Product Information”用<h3> 顯示在DataList的results 的頂部.為了達(dá)到這個(gè)目的,在HeaderTemplate 中添加合適的標(biāo)記語(yǔ)言.或者通過(guò)DataList的智能標(biāo)簽中的Edit Templates 來(lái)實(shí)現(xiàn).從下拉列表中選擇Header Template ,從style 下拉列表中選擇Heading 3 并輸入Text(見(jiàn)圖11).

圖 11: 添加Text 為“Product Information”的HeaderTemplate

同樣,直接在<asp:DataList>標(biāo)記里加入以下代碼也可以達(dá)到上面的目的.

<HeaderTemplate>
 <h3>Product Information</h3>
</HeaderTemplate>

為了在每個(gè)列出的product 之間保留一些空間,我們現(xiàn)在來(lái)添加一個(gè)SeparatorTemplate .<hr>標(biāo)簽可以完成這種分割的功能.見(jiàn)下面的標(biāo)記語(yǔ)言

<SeparatorTemplate>
 <hr />
</SeparatorTemplate>

注意:與HeaderTemplate 和FooterTemplates一樣,SeparatorTemplate 并不和數(shù)據(jù)源里的任何數(shù)據(jù)綁定.因此,并不能直接的和DataList綁定的數(shù)據(jù)發(fā)生關(guān)系.

現(xiàn)在在瀏覽器里瀏覽這個(gè)頁(yè)面,看起來(lái)應(yīng)該和圖12差不多.注意header 和各個(gè)product 之間的線.

圖 12: DataList 現(xiàn)在包含了 Header Row 和每個(gè)Product 之間有一條線

第五步: 使用Repeater

　　在瀏覽圖12的例子時(shí),你可以看看頁(yè)面的源文件.你會(huì)看到DataList 包含有<tr>和<td>標(biāo)記的HTML<table>.這個(gè)實(shí)際上和GridView一樣.我們會(huì)在將來(lái)的教程里看到,DataList允許每一行顯示多條記錄.

　　但如果你不想使用HTML<table>呢?我們將使用Repeater .Repeater 也是基于templates構(gòu)建的.它提供以下5種template:

HeaderTemplate — 在items前加指定的標(biāo)記
ItemTemplate — 用來(lái)呈現(xiàn)items
AlternatingItemTemplate — 用來(lái)呈現(xiàn)alternating items
SeparatorTemplate —在各個(gè)item 之間加指定的標(biāo)記
FooterTemplate - 在items后加指定的標(biāo)記

　　在ASP.NET  1.x版本里.Repeater 通常用來(lái)顯示一些數(shù)據(jù)列.在這種情況下,HeaderTemplate 和FooterTemplates 包含一對(duì)<ul>標(biāo)記,而ItemTemplate 包含 <li> 和數(shù)據(jù)綁定語(yǔ)法.這種方法在ASP.NET 2.0也適用,比如我們?cè)谀赴屙?yè)和站點(diǎn)導(dǎo)航一章里看到的例子:

　　在Site.master母板頁(yè)里,  Repeater 用來(lái)顯示頂級(jí)站點(diǎn)內(nèi)容(Basic Reporting, Filtering Reports, Customized Formatting, and so on); 嵌套的Repeater 用來(lái)顯示 子區(qū)域的內(nèi)容.
在SectionLevelTutorialListing.ascx用戶控件里, Repeater 用來(lái)顯示當(dāng)前站點(diǎn)區(qū)域的子區(qū)域內(nèi)容.

　　注意:ASP.NET 2.0可以使用BulletedList control.使用它的時(shí)候不需要指定任何和list有關(guān)的HTML.而僅僅是指定每個(gè)list item的字段.

　　Repeater 是一個(gè)"全能"的控件,如果你找不到控件可以產(chǎn)生需要的標(biāo)記語(yǔ)言,那么可以使用Repeater .我們來(lái)舉例說(shuō)明,在第二步里創(chuàng)建的顯示Product信息的DataList上顯示出categoried.我們將每個(gè)categorie作為一列顯示在單行的HTML<table>里.從工具箱里拖一個(gè)Repeater 到顯示Product 的DataList上.和DataList一樣,在定義templates前,Repeater 是灰色的.

圖 13: 添加一個(gè) Repeater 控件

在Repeater 的智能標(biāo)簽里只有一個(gè)可選項(xiàng):選擇數(shù)據(jù)源.創(chuàng)建一個(gè)ObjectDataSource ,用CategoriesBLL 類的GetCategories 方法配置它.

圖 14: 創(chuàng)建ObjectDataSource

圖 15: 用 CategoriesBLL 類配置ObjectDataSource

圖16: 用 GetCategories Method獲取所有Categories的信息

和DataList不一樣,在綁定到數(shù)據(jù)源后,Visual Studio不會(huì)為Repeater 自動(dòng)創(chuàng)建ItemTemplate .而且Repeater 的templates 不能通過(guò)設(shè)計(jì)器來(lái)配置,只能寫(xiě)頁(yè)面代碼.

我們用如下標(biāo)記來(lái)將每個(gè)category作為一列顯示在單行的<table>里:

<table>
 <tr>
  <td>Category 1</td>
  <td>Category 2</td>
  ...
  <td>Category N</td>
 </tr>
</table>

　　由于<td>Category X</td>是重復(fù)的一部分,因此會(huì)顯示在Repeater的ItemTemplate里.在它之前的標(biāo)記<table><tr>會(huì)放在HeaderTemplate里,而結(jié)束標(biāo)記</tr></table>會(huì)放在FooterTemplate里.在設(shè)計(jì)器的左下角點(diǎn)源視圖按鈕進(jìn)入ASP.NET頁(yè)的聲明代碼部分,輸入以下代碼:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
 EnableViewState="False">
 <HeaderTemplate>
  <table>
   <tr>
 </HeaderTemplate>
 <ItemTemplate>
    <td><%# Eval("CategoryName") %></td>
 </ItemTemplate>
 <FooterTemplate>
   </tr>
  </table>
 </FooterTemplate>
</asp:Repeater>

Repeater 精確的包含在它模板里指定的標(biāo)記,不會(huì)有任何多余的部分.圖17顯示通過(guò)瀏覽器瀏覽Repeater的樣子.

圖 17: 在單行的HTML <table> 用單獨(dú)的列列出每個(gè)Category

第六步: 改善Repeater的外觀

　　既然Repeater 是精確呈現(xiàn)在templates里指定的標(biāo)記,那么你應(yīng)該可以想到它不包含任何和風(fēng)格有關(guān)的屬性.為了改變Repeater產(chǎn)生的內(nèi)容的外觀,我們需要手動(dòng)的將HTML或CSS加到它的templates里.

　　在這個(gè)例子里,我們將做一個(gè)類似DataList的alternating rows那樣的東西,改變category 的背景色.我們通過(guò)ItemTemplate 和AlternatingItemTemplate 來(lái)為每個(gè)Repeater item 指定RowStyle CSS class ,為每個(gè)alternating Repeater item 指定AlternatingRowStyle CSS class ,象下面的代碼一樣:

<ItemTemplate>
 <td class="RowStyle"><%# Eval("CategoryName") %></td>
</ItemTemplate>
<AlternatingItemTemplate>
 <td class="AlternatingRowStyle"><%# Eval("CategoryName") %></td>
</AlternatingItemTemplate>

　　我們還要添加一個(gè)text為“Product Categories”的header .由于我們不知道 <table>會(huì)由多少列組成,最簡(jiǎn)單的方法保證產(chǎn)生的header 可以跨越所有的列是使用兩個(gè)<table>.第一個(gè)<table>包含兩行 — header 和一行包含第二個(gè) <table>的行.第二個(gè) <table>里每個(gè)category 為一列.

<table>
 <tr>
  <th>Product Categories</th>
 </tr>
 <tr>
  <td>
   <table>
   <tr>
    <td>Category 1</td>
    <td>Category 2</td>
    ...
    <td>Category N</td>
   </tr>
   </table>
  </td>
 </tr>
</table>

下面的 HeaderTemplate 和FooterTemplate 產(chǎn)生需要的標(biāo)記:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
 EnableViewState="False">
 <HeaderTemplate>
  <table cellpadding="0" cellspacing="0">
   <tr>
    <th class="HeaderStyle">Product Categories</th>
   </tr>
   <tr>
    <td>
     <table cellpadding="4" cellspacing="0">
      <tr>
 </HeaderTemplate>
 <ItemTemplate>
       <td class="RowStyle"><%# Eval("CategoryName") %></td>
 </ItemTemplate>
 <AlternatingItemTemplate>
       <td class="AlternatingRowStyle">
        <%# Eval("CategoryName") %></td>
 </AlternatingItemTemplate>
 <FooterTemplate>
      </tr>
     </table>
    </td>
   </tr>
  </table>
 </FooterTemplate>
</asp:Repeater>

圖18 里可以看到現(xiàn)在Repeater的樣子.

圖 18:  Category 列的背景色交替變換and Includes a Header Row

總結(jié)

　　雖然使用GridView 來(lái)顯示,編輯,刪除,排序和分頁(yè)數(shù)據(jù)都非常容易,但是很臃腫.為了更好的控制外觀,我們需要使用DataList 或Repeater .這些控件使用templates 來(lái)顯示記錄,而不是BoundFields.

　　DataList 包含一個(gè)HTML <table>,默認(rèn)情況下table的一行顯示數(shù)據(jù)源的一條記錄,和GridView一樣.我們?cè)谝院蟮慕坛汤飼?huì)看到,DataList 可以在一個(gè)table 行里表示多條記錄.而另一方面,Repeater嚴(yán)格的顯示在templates指定的標(biāo)記.它不會(huì)添加任何額外的信息,因此通常被用來(lái)在除了 <table> 以外的HTML元素里顯示數(shù)據(jù).

　　DataList 和Repeater 在輸出上提供了更大的靈活性,而和GridView相比,它們又缺少很多內(nèi)置的特性.在以后的教程里我們會(huì)看到,有一些特性我們可以很簡(jiǎn)單的加上.但是要記住,使用DataList 和Repeater而不是GridView ,如果想使用這些特性的話,你必須去實(shí)現(xiàn)它們.

　　祝編程快樂(lè)!

作者簡(jiǎn)介

　　Scott Mitchell，著有六本ASP/ASP.NET方面的書(shū)，是4GuysFromRolla.com的創(chuàng)始人，自1998年以來(lái)一直應(yīng)用 微軟Web技術(shù)。Scott是個(gè)獨(dú)立的技術(shù)咨詢顧問(wèn)，培訓(xùn)師，作家，最近完成了將由Sams出版社出版的新作，24小時(shí)內(nèi)精通ASP.NET 2.0。他的聯(lián)系電郵為mitchell@4guysfromrolla.com，也可以通過(guò)他的博客http://ScottOnWriting.NET與他聯(lián)系。