使用 DataList 控制項在每個資料列顯示多筆記錄 (C#)

  • 發行項

作者 ：Scott Mitchell

下載 PDF

在本簡短教學課程中，我們將探索如何透過其 RepeatColumns 和 RepeatDirection 屬性自定義 DataList 的配置。

簡介

過去兩個教學課程中所見的 DataList 範例已將每個記錄從其數據源轉譯為單一數據行 HTML <table>中的數據列。 雖然這是預設的 DataList 行為，但自定義 DataList 顯示很容易，如此數據源專案就會分散到多欄多數據列數據表。 此外，可以將所有數據源項目顯示在單一數據列、多欄 DataList 中。

我們可以透過其 RepeatColumns 和 RepeatDirection 屬性來自定義 DataList 版面配置，分別指出轉譯的數據行數目，以及這些專案是垂直還是水準配置。 例如，圖 1 顯示 DataList，其中顯示數據表中有三個數據行的產品資訊。

DataList 顯示每個數據列的三個產品

圖 1:D ataList 顯示每個數據列的三個產品 (按兩下即可檢視完整大小的影像)

藉由顯示每個數據列的多個數據源專案，DataList 可以更有效地利用水平屏幕空間。 在本簡短教學課程中，我們將探索這兩個 DataList 屬性。

步驟 1：在 DataList 中顯示產品資訊

在檢查 RepeatColumns 和 RepeatDirection 屬性之前，讓我們先在頁面上建立DataList，以使用標準單一數據行、多列數據表配置來列出產品資訊。 在此範例中，讓我們使用下列標記來顯示產品名稱、類別和價格：

<h4>Product Name</h4>
Available in the Category Name store for Price

我們已瞭解如何將數據系結至先前範例中的 DataList，因此我會快速完成這些步驟。 從開啟資料夾中的頁面DataListRepeaterBasics開始，RepeatColumnAndDirection.aspx並將 DataList 從 [工具箱] 拖曳到 Designer。 從 DataList 智慧標記中，選擇建立新的 ObjectDataSource，並將其設定為從 ProductsBLL 類別 s 方法提取其數據，從精靈的 GetProducts INSERT、UPDATE 和 DELETE 索引卷標中選擇 [無 () ] 選項。

建立新的 ObjectDataSource 並將其系結至 DataList 之後，Visual Studio 會自動建立 ， ItemTemplate 以顯示每個產品數據欄位的名稱和值。 ItemTemplate直接透過宣告式標記或從 DataList 智慧標記中的 [編輯範本] 選項調整 ，使其使用上述的標記，將產品名稱、類別名稱和價格文字取代為標籤板，以使用適當的數據系結語法將值指派給其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>

請注意，我在 的數據系結語法UnitPrice中包含Eval格式規範，將傳回的值格式化為貨幣 -Eval("UnitPrice", "{0:C}").

請花點時間瀏覽瀏覽器中的頁面。 如圖 2 所示，DataList 會轉譯為產品的單一數據行多數據列數據表。

根據預設，DataList 會轉譯為單一數據行、多數據列數據表

圖 2：根據預設，DataList 會轉譯為單一數據行、多數據列數據表 (按兩下即可檢視完整大小的影像)

步驟 2：變更 DataList 的版面配置方向

雖然 DataList 的預設行為是在單一數據行、多數據列數據表中垂直配置其專案，但透過 DataList 的 RepeatDirection 屬性可以輕鬆地變更此行為。 屬性 RepeatDirection 可以接受兩個可能值的其中一個： Horizontal 或 Vertical (預設) 。

藉由將 屬性從 Vertical 變更RepeatDirection為 Horizontal，DataList 會在單一數據列中轉譯其記錄，為每個數據源專案建立一個數據行。 若要說明此效果，請按下 Designer中的 DataList，然後從 屬性視窗 將 RepeatDirection 屬性從 Vertical 變更為 Horizontal。 立即執行這項操作時，Designer 會調整DataList的版面配置，建立單一數據列、多數據行介面 (請參閱圖3) 。

RepeatDirection 屬性會指定 DataList 專案配置的方向

圖 3： RepeatDirection 屬性會指示 DataList 專案配置的方向 (按兩下即可檢視完整大小的影像)

顯示少量數據時，單一數據列、多欄數據表可能是將屏幕實際空間最大化的理想方式。 不過，對於較大的數據量，單一數據列需要許多數據行，這會將無法放入畫面上的專案推送到右側。 圖 4 顯示單一數據列 DataList 中轉譯時的產品。 由於有許多產品 (超過 80 個) ，因此用戶必須向右卷動，才能檢視每個產品的相關信息。

對於夠大型的數據源，單一數據行 DataList 將需要水平捲動

圖 4：對於夠大型的數據源，單一數據行 DataList 需要水平捲動 (按兩下即可檢視大小完整的影像)

步驟 3：在多欄多列數據表中顯示數據

若要建立多欄多數據列 DataList，我們必須將 RepeatColumns 屬性 設定為要顯示的欄數。 根據預設， RepeatColumns 屬性會設定為 0，這會導致 DataList 根據屬性) 的值 RepeatDirection ，在單一數據列或數據行中顯示其所有專案 (。

在我們的範例中，讓我們為每個數據表數據列顯示三個產品。 因此，將 RepeatColumns 屬性設定為 3。 進行這項變更之後，請花點時間在瀏覽器中檢視結果。 如圖 5 所示，產品現在會列在三欄多列數據表中。

每個數據列顯示三個產品

圖 5：每個數據列顯示三個產品， (按兩下即可檢視完整大小的影像)

屬性RepeatDirection會影響 DataList 中的專案配置方式。圖 5 顯示屬性設定為 Horizontal的結果RepeatDirection。 請注意，前三個產品 Chai、媴和 Aniseed 一律會從左至右、由上至下配置。 接下來的三個產品 (從 Chef Anton s Cajun Seasoning) 開始出現在前三個數據列中。 不過， RepeatDirection 將屬性變更回 Vertical，則會從上到下、由左至右配置這些產品，如圖 6 所示。

在這裡，產品會垂直配置

圖 6：在這裡，產品會垂直配置 (按兩下即可檢視完整大小的影像)

結果數據表中顯示的數據列數目取決於系結至 DataList 的總記錄數目。 精確來說，它是數據源項目總數除以屬性值的 RepeatColumns 上限。 Products由於數據表目前有84個產品，3個可分割，所以有28個數據列。 如果數據源中的項目數和 RepeatColumns 屬性值不可見，則最後一列或欄會有空白儲存格。 RepeatDirection如果 設定為 Vertical，則最後一欄會有空的儲存格;如果 RepeatDirection 為 Horizontal，則最後一列會有空的儲存格。

摘要

根據預設，DataList 會在單一數據行的多列數據表中列出其專案，以模擬具有單一 TemplateField 的 GridView 版面配置。 雖然此預設版面配置是可接受的，但我們可以藉由顯示每個數據列的多個數據源專案，將螢幕實際可用空間最大化。 只要將 DataList s RepeatColumns 屬性設定為每個資料列要顯示的數據行數目，即可達成此目的。 此外，DataList s RepeatDirection 屬性可用來指出多欄、多數據列數據表的內容應該從左至右、由上到下、從上到下、從上到右垂直配置。

關於作者

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

特別感謝

本教學課程系列是由許多實用的檢閱者所檢閱。 本教學課程的首席檢閱者是John Suru。 想要檢閱即將推出的 MSDN 文章嗎？ 如果是，請將一行放在 mitchell@4GuysFromRolla.com。

上一個下一個