由 斯科特·米切爾
在本簡介教學課程中，我們將了解如何透過其 RepeatColumns 和 RepeatDirection 屬性來自訂 DataList 的版面配置。
簡介
我們過去兩個教學課程中所見的DataList範例已將其數據源中的每個記錄轉譯為單一數據行HTML <table>中的數據列。 雖然這是預設的 DataList 行為，但很容易自定義 DataList 顯示，讓數據源專案分散在多欄多列數據表中。 此外，可以讓所有數據源項目顯示在單一數據列、多欄 DataList 中。
我們可以透過其 RepeatColumns 和 RepeatDirection 屬性來自定義 DataList 布局，分別表示渲染的欄數目，以及這些項目是垂直或水平排列。 例如，圖 1 顯示 DataList，其中表格中包含三個欄位的產品資訊。
圖 1：DataList 顯示每行三個產品（按一下以檢視完整大小的影像）
藉由在每行顯示多個數據來源項目，DataList 可以更有效地利用水平屏幕空間。 在本簡短教學課程中，我們將探索這兩個 DataList 屬性。
步驟 1：在 DataList 中顯示產品資訊
在檢查 RepeatColumns 和 RepeatDirection 屬性之前，讓我們先在頁面上建立DataList，以使用標準單一數據行、多列數據表配置來列出產品資訊。 在此範例中，讓我們使用下列標記來顯示產品名稱、類別和價格：
<h4>Product Name</h4>
Available in the Category Name store for Price
我們已瞭解如何在先前的範例中將數據系結至 DataList，因此我會快速完成這些步驟。 從 RepeatColumnAndDirection.aspx 資料夾中開啟頁面，然後從工具箱中將 DataList 拖曳至設計工具。 從 DataList 的智慧標記中，選擇建立新的 ObjectDataSource，並將其設定為從 ProductsBLL 類別 s GetProducts 方法提取其數據，並從精靈的 INSERT、UPDATE 和 DELETE 索引卷標中選擇 [無] 選項。
建立新的 ObjectDataSource 並將其系結至 DataList 之後，Visual Studio 會自動建立 ItemTemplate ，以顯示每個產品數據欄位的名稱和值。 直接透過宣告式標記或使用 DataList 的智慧標籤中的 [編輯範本] 選項來調整ItemTemplate，使其使用上面顯示的標記，將產品名稱、類別名稱和價格文字替換為使用適當數據綁定語法的 Label 控制項，並將值指派給其Text屬性。 更新 ItemTemplate之後，您的頁面宣告式標記看起來應該類似下列內容：
<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
DataSourceID="ObjectDataSource1" EnableViewState="False">
<ItemTemplate>
<h4>
<asp:Label runat="server" ID="ProductNameLabel"
Text='<%# Eval("ProductName") %>'></asp:Label>
</h4>
Available in the
<asp:Label runat="server" ID="CategoryNameLabel"
Text='<%# Eval("CategoryName") %>' />
store for
<asp:Label runat="server" ID="UnitPriceLabel"
Text='<%# Eval("UnitPrice", "{0:C}") %>' />
</ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
OldValuesParameterFormatString="original_{0}"
SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>
請注意，我已經在Eval的數據繫結語法中加入UnitPrice格式規範，將傳回的值格式化為貨幣 - Eval("UnitPrice", "{0:C}").
請花點時間在瀏覽器中瀏覽您的頁面。 如圖 2 所示，DataList 會呈現為產品的單欄、多列表格。
圖 2：根據預設，DataList 會轉譯為單欄、多行數據表（按一下以檢視完整大小的影像）
步驟 2：變更 DataList 的版面配置方向
雖然 DataList 的預設行為是在單一數據行、多列數據表中垂直配置其專案，但透過 DataList 的 RepeatDirection 屬性可以輕鬆地變更此行為。 屬性 RepeatDirection 可以接受兩個可能值的其中一個： Horizontal 或 Vertical （預設值）。
藉由將 屬性從 RepeatDirection 變更Vertical為 Horizontal，DataList 會在單一數據列中轉譯其記錄，為每個數據源專案建立一個數據行。 若要說明這個效果，請按一下設計工具中的 DataList，然後在 [屬性] 視窗中，將RepeatDirection屬性從Vertical變更為Horizontal。 如此一來，設計工具會立即調整 DataList 的配置，建立單一數據列、多數據行介面（請參閱圖 3）。
圖 3：RepeatDirection 屬性決定資料清單項目的排列方向（按兩下以檢視完整大小的影像）
顯示少量資料時，單行多列的表格可能是最大化屏幕空間的理想方式。 不過，對於較大的數據量，單一數據列需要許多數據行，這會將無法放入畫面上的專案推送到右側。 圖 4 顯示在單列 DataList 中呈現的產品。 由於有許多產品（超過80種），因此用戶必須向右卷動，才能檢視每個產品的相關信息。
圖 4：對於足夠大型的數據源，單一數據行數據清單需要水平捲動 （按兩下即可檢視完整大小的影像）
步驟 3：在多欄、多列數據表中顯示數據
若要建立多欄、多列 DataList，我們需要將 屬性設定RepeatColumns為要顯示的數據行數目。 根據預設， RepeatColumns 屬性會設定為0，這會導致DataList在單一數據列或數據行中顯示其所有專案（視屬性的值 RepeatDirection 而定）。
在我們的範例中，讓我們為每個數據表數據列顯示三個產品。 因此，將 RepeatColumns 屬性設定為 3。 進行這項變更之後，請花點時間在瀏覽器中檢視結果。 如圖 5 所示，產品現在會列在三欄多列數據表中。
圖 5：每個資料列顯示三個產品 （按兩下以檢視完整大小的影像）
屬性 RepeatDirection 會影響 DataList 中的專案配置方式。圖 5 顯示屬性 RepeatDirection 設定為 Horizontal 的結果。 請注意，前三種產品柴、張和安妮絲糖漿是從左到右、由上到下排列。 接下來的三種產品（從安東廚師的卡津調味料開始）排列在前三個產品下面。 不過，將RepeatDirection屬性更改回Vertical，會如圖6所示，從上到下、從左至右排列這些產品。
圖 6：在這裡，產品垂直配置 （按兩下以檢視完整大小的影像）
結果數據表中顯示的數據列數目取決於系結至 DataList 的總記錄數目。 精確地說，它是數據源項目總數的上限，除以 RepeatColumns 屬性值。
Products由於數據表目前有84個產品，且可被3整除，因此有28行。 如果數據源中的項目數量和 RepeatColumns 屬性值不可被整除，則最後一個列或行會有空白儲存格。
RepeatDirection如果 設定為 Vertical，則最後一個數據行會有空白儲存格;如果 RepeatDirection 為 Horizontal，則最後一個數據列會有空白儲存格。
總結
根據預設，DataList 將其專案列為一個單行多列的表格，這種配置模擬了單一 TemplateField 的 GridView。 雖然此預設配置是可接受的，但我們可以藉由在每列顯示多個資料來源項目，來最大化螢幕空間。 完成此作業只是將 DataList s RepeatColumns 屬性設定為每個資料列顯示的數據行數目。 此外，DataList 的 RepeatDirection 屬性可用來指示多欄、多列數據表的內容應該水平從左到右、從上到下排列，或垂直從上到下、從左到右排列。
關於作者
斯科特·米切爾，七本 ASP/ASP.NET 書籍和 4GuysFromRolla.com 創始人的作者，自1998年以來一直與Microsoft Web 技術合作。 斯科特擔任獨立顧問、教練和作家。 他的最新書是 Sams Teach Yourself ASP.NET 2.0 in 24 Hours。 可以透過 mitchell@4GuysFromRolla.com 聯絡他。
特別感謝
本教學系列已由許多熱心的評論者審閱。 本教學課程的主要檢閱者是John Suru。 有興趣檢閱我即將推出的 MSDN 文章嗎？ 如果是，請在 mitchell@4GuysFromRolla.com給我留言。