共用方式為

使用 DataList 與重複項控制項顯示資料 (VB)

  • 發行項

作者 ：Scott Mitchell

下載 PDF

在上述教學課程中，我們已使用 GridView 控件來顯示數據。 從本教學課程開始，我們將探討使用 DataList 和 Repeater 控件建置常見的報告模式，從使用這些控件顯示數據的基本概念開始。

簡介

在過去 28 個教學課程的所有範例中，如果需要顯示數據源中的多個記錄，我們會轉換成 GridView 控制件。 GridView 會針對數據源中的每個記錄呈現一個數據列，其中顯示數據行中的記錄數據欄位。 雖然 GridView 可讓您貼齊顯示、逐頁、排序、編輯和刪除數據，但其外觀是一個位方塊。 此外，負責 GridView 結構的標記是固定的，其中包含一個 HTML <table> ，其中包含每個記錄的數據表數據列 (<tr>) ，以及每個欄位的數據表數據 <td> 格 () 。

為了在顯示多筆記錄時，在外觀和轉譯標記中提供更高的自定義程度，ASP.NET 2.0 提供 DataList 和 Repeater 控件 (這兩個控件，ASP.NET 1.x 版) 也提供。 DataList 和 Repeater 控制項會使用範本來轉譯其內容，而不是 BoundFields、CheckBoxFields、ButtonFields 等等。 如同 GridView，DataList 會轉譯為 HTML <table>，但允許每個數據表數據列顯示多個數據源記錄。 另一方面，Repeater 不會呈現任何明確指定的標記，而且當您需要精確控制發出的標記時，這是理想的候選專案。

在接下來的十幾個或多部教學課程中，我們將探討如何使用 DataList 和 Repeater 控件來建置常見的報告模式，從使用這些控件範本顯示數據的基本概念開始。 我們將瞭解如何格式化這些控件、如何在 DataList 中改變數據源記錄的配置、常見的主要/詳細數據案例、編輯和刪除數據的方式、如何逐頁瀏覽記錄等等。

步驟 1：新增 DataList 和 Repeater 教學課程網頁

開始本教學課程之前，讓我們先花一點時間新增本教學課程所需的 ASP.NET 頁面，接下來幾個教學課程會使用 DataList 和 Repeater 處理顯示數據。 從在名為 DataListRepeaterBasics的專案中建立新資料夾開始。 接下來，將下列五個 ASP.NET 頁面新增至此資料夾，讓所有頁面都設定為使用主版頁面 Site.master：

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

建立 DataListRepeaterBasics 資料夾並新增教學課程 ASP.NET 頁面

圖 1：建立 DataListRepeaterBasics 資料夾並新增教學課程 ASP.NET 頁面

Default.aspx開啟頁面，然後將 [使用者控件] 從UserControls資料夾拖曳SectionLevelTutorialListing.ascx到 [設計] 介面。 我們在 主版頁面和網站導覽 教學課程中建立的這個使用者控件會列舉網站地圖，並在點符清單中顯示目前區段的教學課程。

將 SectionLevelTutorialListing.ascx 使用者控件新增至 Default.aspx

圖 2：新增 SectionLevelTutorialListing.ascx 使用者控件以 Default.aspx (按兩下以檢視完整大小的影像)

為了讓項目符號清單顯示我們將建立的 DataList 和 Repeater 教學課程，我們必須將它們新增至網站地圖。 開啟檔案 Web.sitemap ，並在新增自訂按鈕網站地圖節點標記之後新增下列標記：

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

更新網站地圖以包含新的 ASP.NET 頁面

圖 3：更新網站地圖以包含新的 ASP.NET 頁面

步驟 2：使用 DataList 顯示產品資訊

與 FormView 類似，DataList 控件的轉譯輸出取決於範本，而不是 BoundFields、CheckBoxFields 等等。 不同於 FormView，DataList 的設計目的是要顯示一組記錄，而不是單一記錄。 讓我們開始本教學課程，看看如何將產品信息系結至 DataList。 從開啟 Basics.aspx 資料夾中的頁面 DataListRepeaterBasics 開始。 接下來，將 DataList 從 [工具箱] 拖曳到 Designer。 如圖 4 所示，在指定 DataList 範本之前，Designer 將其顯示為灰色方塊。

將 DataList 從工具箱拖曳到 Designer

圖 4：將 DataList 從工具箱拖曳到 Designer (按兩下即可檢視大小完整的影像)

從 DataList 的智慧標記中，新增 ObjectDataSource 並將其設定為使用 ProductsBLL 類別 s GetProducts 方法。 因為我們在本教學課程中重新建立只讀 DataList，請將下拉式清單設定為 (精靈 INSERT、UPDATE 和 DELETE 索引卷標的 [無) ]。

選擇建立新的物件DataSource

圖 5：選擇建立新的 ObjectDataSource (按兩下即可檢視完整大小的映射)

將 ObjectDataSource 設定為使用 ProductsBLL 類別

圖 6：將 ObjectDataSource 設定為使用 ProductsBLL 類別 (按兩下即可檢視完整大小的影像)

使用 GetProducts 方法擷取所有產品的相關信息

圖 7：使用 GetProducts 方法擷取所有產品的相關信息 (按兩下即可檢視全大小的影像)

設定 ObjectDataSource 並透過其智慧標記將它與 DataList 產生關聯之後，Visual Studio 會自動在 DataList 中建立 ， ItemTemplate 以顯示數據源所傳回之每個數據欄位的名稱和值， (看到下列標記) 。 這個預設ItemTemplate外觀與透過 Designer 將數據源系結至 FormView 時自動建立的範本外觀相同。

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

注意

回想一下，透過 FormView 智慧標記將數據源系結至 FormView 控件時，Visual Studio 建立了 ItemTemplate、 InsertItemTemplate和 EditItemTemplate。 不過，使用 DataList 時，只會 ItemTemplate 建立 。 這是因為 DataList 沒有 FormView 所提供的相同內建編輯和插入支援。 DataList 包含編輯和刪除相關事件，而且可以使用一些程式代碼來新增編輯和刪除支援，但與 FormView 一樣，沒有簡單的現成支援。 我們將在未來的教學課程中瞭解如何包含 DataList 的編輯和刪除支援。

讓我們花點時間改善此範本的外觀。 讓我們只顯示產品名稱、供應商、類別、每個單位的數量和單價，而不是顯示所有數據欄位。 此外，讓我們在標題中 <h4> 顯示名稱，並使用標題下方的 來配置其餘欄位 <table> 。

若要進行這些變更，您可以從 DataList 的智慧標記按兩下 [編輯範本] 連結，使用 Designer 中的範本編輯功能，也可以透過頁面宣告式語法手動修改範本。 如果您在 Designer 中使用 [編輯範本] 選項，產生的標記可能與下列標記完全不符，但透過瀏覽器檢視時看起來應該與圖 8 中顯示的螢幕快照非常類似。

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

注意

上述範例使用標籤 Web 控件，其 Text 屬性會指派數據系結語法的值。 或者，我們可以完全省略標籤，只輸入數據系結語法。 也就是說，我們可能會改用宣告式語法 <%# Eval("CategoryName") %>，而不是<asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' />使用 。

不過，離開標籤 Web 控件提供兩個優點。 首先，它會根據數據提供更容易格式化數據的方法，如下一個教學課程所示。 其次，Designer 中的 [編輯範本] 選項不會顯示出現在某些 Web 控件外部的宣告式數據系結語法。 相反地，[編輯範本] 介面的設計目的是為了方便使用靜態標記和 Web 控件，並假設任何數據系結都會透過 [編輯 DataBindings] 對話框來完成，而此對話框可從 Web 控件智慧標記存取。

因此，使用 DataList 時，提供透過 Designer 編輯範本的選項，我偏好使用標籤 Web 控件，以便透過 [編輯範本] 介面存取內容。 如我們稍後所見，重複程式需要從 [來源] 檢視編輯範本的內容。 因此，在製作重複項範本時，我通常會省略標籤 Web 控件，除非我知道我需要根據程式設計邏輯來格式化數據系結文字的外觀。

每個產品輸出都會使用 DataList s ItemTemplate 轉譯

圖 8：每個產品的輸出都會使用 DataList s ItemTemplate (Click 來檢視完整大小的影像)

步驟 3：改善 DataList 的外觀

如同 GridView，DataList 提供許多樣式相關屬性，例如 Font、、、、CssClassBackColorItemStyleAlternatingItemStyle、 SelectedItemStyle等等。 ForeColor 使用 GridView 和 DetailsView 控件時，我們在 Theme 中 DataWebControls 建立了面板檔案，預先定義 CssClass 這兩個控件的屬性，以及 CssClass 其中數個子屬性的屬性 (RowStyle、 HeaderStyle等等) 。 讓我們針對 DataList 執行相同的動作。

如 使用 ObjectDataSource 顯示數據 教學課程中所述，Skin 檔案會指定 Web 控件的默認外觀相關屬性;主題是面板、CSS、影像和 JavaScript 檔案的集合，可定義網站的特定外觀與風格。 在 [使用 ObjectDataSource 顯示數據] 教學課程中，我們建立了 Theme (，其實作為資料夾內App_Themes資料夾) 目前有兩個 DataWebControls Skin 檔案 - GridView.skin 和 DetailsView.skin。 讓我們新增第三個面板檔案，以指定 DataList 的預先定義樣式設定。

若要新增面板檔案，請以滑鼠右鍵按下 App_Themes/DataWebControls 資料夾，選擇 [新增專案]，然後從清單中選取 [面板檔案] 選項。 為檔案 DataList.skin 命名。

顯示 [新增專案] 視窗的螢幕快照，其中已輸入Default.skin作為新的 [面板檔名]。

圖 9：建立名為 DataList.skin 的新外觀檔案， (按兩下即可檢視完整大小的影像)

針對檔案使用下列標記 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>

這些設定會將相同的 CSS 類別指派給與 GridView 和 DetailsView 控件一起使用的適當 DataList 屬性。 此處 DataWebControlStyle使用的 CSS 類別 、 AlternatingRowStyle、 RowStyle等等定義於 檔案中 Styles.css ，並已在先前的教學課程中新增。

新增此面板檔案後，DataList 的外觀會在 Designer (中更新，您可能需要重新整理 Designer 檢視，才能看到新 [面板] 檔案的效果;從 [檢視] 功能表中，選擇 [重新整理) ]。 如圖 10 所示，每個替代產品都有淺紅色背景色彩。

顯示新 [面板] 檔案如何更新 Designer 中 DataList 外觀的螢幕快照。

圖 10：建立名為 (按一下DataList.skin以檢視完整大小映像的新外觀檔案)

步驟 4：探索 DataList 的其他範本

除了 ItemTemplate之外，DataList 還支援六個其他選擇性範本：

  • HeaderTemplate 如果提供，請將標頭數據列新增至輸出，並用來轉譯此數據列
  • AlternatingItemTemplate 用來轉譯替代專案
  • SelectedItemTemplate用來轉譯選取的專案;選取的專案是索引對應至 DataList s SelectedIndex 屬性的專案
  • EditItemTemplate 用來轉譯正在編輯的專案
  • SeparatorTemplate 如果提供，請在每個項目之間新增分隔符，並用來轉譯此分隔符
  • FooterTemplate - 如果提供，請將頁尾數據列新增至輸出，並用來轉譯此數據列

指定 HeaderTemplate 或 FooterTemplate時，DataList 會將額外的頁首或頁尾數據列新增至轉譯的輸出。 如同 GridView 的頁首和頁尾數據列，DataList 中的頁首和頁尾不會系結至數據。 因此，或 FooterTemplate 嘗試存取系結數據的任何數據系結語法HeaderTemplate都會傳回空白字串。

注意

如在 GridView 的頁尾教學課程中顯示摘要資訊 中所見，雖然頁首和頁尾數據列不支援數據系結語法，但數據特定資訊可以直接插入 GridView RowDataBound 事件處理程式的這些數據列。 這項技術可用來計算系結至 控件的數據執行總計或其他資訊，以及將該資訊指派給頁尾。 這個相同的概念可以套用至 DataList 和 Repeater 控件;唯一的差別在於，DataList 和 Repeater 會為 ItemDataBound 事件建立事件處理程式 (，而不是針對 RowDataBound 事件) 。

在我們的範例中，讓我們將標題顯示在 DataList 結果 <h3> 頂端的 [產品資訊] 標題。 若要達成此目的，請使用適當的標記新增 HeaderTemplate 。 從 Designer 中，您可以按兩下 DataList 智慧標記中的 [編輯範本] 連結、從下拉式清單中選擇 [標頭範本]，然後在從樣式下拉式清單中挑選 [標題 3] 選項之後輸入文字， (請參閱圖 11) 。

使用文字產品資訊新增 HeaderTemplate

圖 11：使用 HeaderTemplate 文字產品資訊新增 (按兩下以檢視大小完整的影像)

或者，您可以藉由在標記內 <asp:DataList> 輸入下列標記，以宣告方式新增此專案：

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

若要在每個產品清單之間新增一些空間，讓我們新增 ， SeparatorTemplate 其中包含每個區段之間的一行。 水平規則標籤 () <hr> 新增這類分隔線。 SeparatorTemplate建立 ，使其具有下列標記：

<SeparatorTemplate>
    <hr />
</SeparatorTemplate>

注意

HeaderTemplateFooterTemplates和 一樣，SeparatorTemplate不會系結至數據源中的任何記錄，因此無法直接存取系結至 DataList 的數據源記錄。

新增這項功能之後，透過瀏覽器檢視頁面時，看起來應該類似圖 12。 請注意每個產品清單之間的標題列和行。

DataList 包含每個產品清單之間的標頭數據列和水平規則

圖 12:D ataList 包含標題列和每個產品清單之間的水平規則， (按兩下即可檢視大小完整的影像)

步驟 5：使用重複項控件轉譯特定標記

如果您在瀏覽圖 12 的 DataList 範例時，從瀏覽器執行檢視/來源，您會看到 DataList 發出包含數據表數據列<tr>的 HTML<table>，<td> () ，其中每個系結至 DataList 的專案 () 。 事實上，此輸出與使用單一 TemplateField 從 GridView 發出的輸出相同。 如未來教學課程中所見，DataList 確實允許進一步自定義輸出，讓我們能夠顯示每個數據表數據列的多個數據源記錄。

不過，如果您不想發出 HTML <table>，該怎麼辦？ 對於數據 Web 控制項所產生之標記的總計和完整控制權，我們必須使用 Repeater 控制件。 如同 DataList，重複程式是以範本為基礎來建構。 不過，重複程式只會提供下列五個範本：

  • HeaderTemplate 如果提供，請在專案之前加入指定的標記
  • ItemTemplate 用來轉譯專案
  • AlternatingItemTemplate 如果提供，則用來轉譯替代專案
  • SeparatorTemplate 如果提供，請在每個項目之間新增指定的標記
  • FooterTemplate - 如果提供，請在項目之後加入指定的標記

在 ASP.NET 1.x 中，重複項控件通常用來顯示來自某些數據源的數據點符清單。 在這種情況下， HeaderTemplate 和 FooterTemplates 會分別包含開頭和結尾 <ul> 標記，而 ItemTemplate 會包含 <li> 具有數據系結語法的專案。 此方法仍可在 ASP.NET 2.0 中使用，如主 版頁面和網站導覽 教學課程中的兩個範例所示：

  • Site.master在主版頁面中，重複程式用來顯示最上層網站地圖內容的點符清單， (基本報告、篩選報表、自定義格式等) ;另一個巢狀重複項是用來顯示最上層區段的子系區段
  • 在 SectionLevelTutorialListing.ascx中，重複項是用來顯示目前網站地圖區段之子區段的項目符號清單

注意

ASP.NET 2.0 引進了新的 BulletedList 控件，它可以系結至數據源控件，以顯示簡單的點符清單。 使用 BulletedList 控制項時，我們不需要指定任何與列表相關的 HTML;相反地，我們只會指出要顯示為每個清單專案文字的數據欄位。

Repeater 可作為攔截所有數據 Web 控制件。 如果沒有產生所需標記的現有控件，則可以使用 Repeater 控件。 為了說明如何使用重複項，讓我們將類別清單顯示在步驟 2 中建立的產品資訊 DataList 上方。 特別是，讓我們讓類別顯示在單一數據列 HTML <table> 中，每個類別都會顯示為數據表中的數據行。

若要達成此目的，請先從 [工具箱] 將重複項控件拖曳到 Designer，再拖曳到 [產品資訊數據清單] 上方。 如同 DataList，重複項一開始會顯示為灰色方塊，直到其範本已定義為止。

將重複項新增至 Designer

圖 13：將重複項新增至 Designer (按兩下即可檢視大小完整的影像)

[重複程式] 智慧標記中只有一個選項：選擇 [數據源]。 選擇建立新的 ObjectDataSource，並將其設定為使用 CategoriesBLL 類別 s GetCategories 方法。

建立新的 ObjectDataSource

圖 14：建立新的 ObjectDataSource (按兩下即可檢視完整大小的映射)

將 ObjectDataSource 設定為使用 CategoriesBLL 類別

圖 15：將 ObjectDataSource 設定為使用 CategoriesBLL 類別 (按鍵即可檢視大小完整的映像)

使用 GetCategories 方法擷取所有類別的相關信息

圖 16：使用 GetCategories 方法擷取所有類別的相關信息 (按兩下即可檢視完整大小的影像)

不同於 DataList，Visual Studio 不會在將重複程式系結至數據源之後自動建立 ItemTemplate。 此外，重複程式範本無法透過 Designer 設定，而且必須以宣告方式指定。

若要將類別顯示為具有每個類別之數據行的單一數據列 <table> ，我們需要 Repeater 發出類似下列的標記：

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

<td>Category X</td>由於文字是重複的部分，這會出現在 Repeater s ItemTemplate 中。 出現在它之前的標記 - <table><tr> 會在 結束標記時放在 HeaderTemplate 中， - </tr></table> 會放在 中 FooterTemplate。 若要輸入這些範本設定，請按下左下角的 [來源] 按鈕，然後輸入下列語法，移至 [ASP.NET] 頁面的宣告部分：

<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 會發出其範本所指定的精確標記，而不會再多一點。 圖 17 顯示透過瀏覽器檢視時的重複項輸出。

個別數據列中每個類別 Single-Row HTML <資料表> 清單

圖 17：個別資料行 (中每個類別 Single-Row HTML <table> 清單 按兩下即可檢視大小完整的影像)

步驟 6：改善重複程序的外觀

由於 Repeater 會精確發出其範本所指定的標記，因此應該不會意外地發現 Repeater 沒有樣式相關的屬性。 若要改變重複程式所產生的內容外觀，我們必須手動將所需的 HTML 或 CSS 內容直接新增至 Repeater 的範本。

在我們的範例中，讓我們擁有類別數據行替代背景色彩，例如 DataList 中的替代數據列。 若要達成此目的，我們需要將 RowStyle CSS 類別指派給每個 Repeater 專案，並將 AlternatingRowStyle CSS 類別指派給每個替代的 Repeater 專案ItemTemplateAlternatingItemTemplate，如下所示：

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

我們也會使用產品類別目錄文字，將標頭數據列新增至輸出。 因為我們不知道產生的 <table> 資料行會組成多少個數據行，所以產生保證跨越所有數據行的標頭數據列最簡單的方式就是使用 兩<table> 個 。 第一個 <table> 數據列會包含標頭數據列的兩個數據列，以及一個數據列 <table> ，其中包含系統中每個類別的數據行。 也就是說，我們想要發出下列標記：

<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 產生所需的標記：

<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 顯示這些變更之後的重複項。

背景色彩中的類別數據行替代，並包含標題數據列

圖 18：背景色彩中的類別數據行替代，並包含標題數據列 (按兩下即可檢視完整大小的影像)

摘要

雖然 GridView 控件可讓您輕鬆地顯示、編輯、刪除、排序和逐頁數據，但外觀非常方塊且類似網格線。 若要進一步控制外觀，我們必須轉換成 DataList 或 Repeater 控件。 這兩個控件都會使用範本來顯示一組記錄，而不是 BoundFields、CheckBoxFields 等等。

DataList 會轉譯為 HTML <table> ，預設會在單一數據表數據列中顯示每個數據源記錄，就像使用單一 TemplateField 的 GridView 一樣。 不過，如未來教學課程中所見，DataList 允許每個數據表數據列顯示多個記錄。 另一方面，重複程式會嚴格發出其範本中指定的標記;它不會新增任何其他標記，因此通常用來在 (以外的 <table> HTML 元素中顯示數據，例如點符清單) 。

雖然 DataList 和 Repeater 在其轉譯的輸出中提供更多彈性，但缺少 GridView 中找到的許多內建功能。 當我們在即將推出的教學課程中檢查時，有些功能可以插入，而不需要太多心力，但請記住，使用 DataList 或 Repeater 取代 GridView 確實會限制您可以使用的功能，而不需要自行實作這些功能。

快樂的程序設計！

關於作者

Scott Mitchell 是七份 ASP/ASP.NET 書籍的作者，以及 自 1998 年以來與 Microsoft Web 技術合作的 4GuysFromRolla.com 作者。 Scott 是獨立顧問、訓練員和作者。 他的最新書籍是 Sams 在 24 小時內自行 ASP.NET 2.0。 您可以透過mitchell@4GuysFromRolla.com部落格來連線到 ，您可以在 找到http://ScottOnWriting.NET。

特別感謝

本教學課程系列是由許多實用的檢閱者所檢閱。 本教學課程的首席檢閱者是 Yaakov Ellis、Liz Shulok、Randy Schmidt 和 Stacy Park。 想要檢閱即將推出的 MSDN 文章嗎？ 如果是，請將一行放在 mitchell@4GuysFromRolla.com。

上一個下一個