ASP.NET 2.0資料教程之三十一 使用DataList來一行顯示多條記錄

導言

在前兩章的做的DataList的例子裡我們都是使用單列的HTML<table>來顯示資料.而自訂使DataList將資料顯示在多列多行的table裡也非常容易.而且還可以以單行多列來顯示資料.

我們可以通過RepeatColumns和RepeatDirection屬性來自訂DataList.這兩個屬性決定了資料顯示時候的列數和方向(水平或垂直).圖1是以一個3列的table來顯示product資訊的DataList例子.

圖 1: DataList 一行顯示三條product資訊

通過一行顯示多條記錄,DataList可以更有效利用螢幕的水平空間.在這章裡我們將探討這兩個屬性.

第一步: 在 DataList顯示Product資訊

在學習RepeatColumns和RepeatDirection屬性前,我們先用標準的單列多行DataList顯示Product資訊.我們使用下面的標記語言來顯示product的name,category和price:

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

 

在前面的教程裡我們已經做過如何將資料繫結到DataList,因此這一步我們很快帶過.開啟DataListRepeaterBasics檔案夾下的RepeatColumnAndDirection.aspx頁,拖一個DataList進去.從DataList的智能標籤裡建立一個ObjectDataSource,使用ProductsBLL類的GetProducts方法配置.在INSERT,UPDATE和DELETE標籤裡選擇None.

在建立完ObjectDataSource並綁定到DataList後,Visual Studio會自動建立一個顯示product欄位的name和value的ItemTemplate.調整ItemTemplate— 通過直接修改標記語言或智能標籤裡的Edit Templates選項— 將Product Name, Category Name和Price文本用Label控制項來替代,用合適的綁定文法將分配的值綁定到Text屬性.在做完這些後,你的頁的標記語言看起來應該和下面差不多:

代碼

<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以單列多行的table顯示product資訊.

圖 2: 預設情況下DataList 顯示一個單列多行的table

第二步: 修改DataList的布局方向

預設情況下DataList垂直的用單列多行table來顯示項目(item).這個可以通過RepeatDirection屬性來修改.

將RepeatDirection屬性從Vertical改為Horizontal後,DataList會以單行多列顯示資料.可以在設計器裡選擇RepeatDirection屬性視窗修改這個屬性.修改完後設計器馬上會調整DataList的布局,建立一個單行多列的介面(見圖3).

圖 3: RepeatDirection屬性用來決定DataList的項的布局方向

When displaying small amounts of data, a single-row, multi-column table might be an ideal way to maximize screen real estate. For larger volumes of data, however, a single row will require numerous columns, which pushes those items that can’t fit on the screen off to the right. Figure 4 shows the products when rendered in a single-row DataList. Since there are many products (over 80), the user will have to scroll far to the right to view information about each of the products.
當顯示小資料量時,一個單行多列的table是一個理想的選擇.而大資料量時,單行需要很多列,螢幕會因為顯示不了這麼多項而出現水平捲軸.圖4顯示在單行的DataList裡顯示product資訊的情況.因為product的數量太多(81),使用者不得不向右滾動來查看每個product的資訊.

圖 4: 大資料量時單列的DataList會有水平捲軸,

第三步: 以多列多行的table來顯示資料

為了建立多行多列的DataList,我們需要設定RepeatColumns屬性為顯示的列數.預設的RepeatColumns屬性為0,因此DataList會單列或單行的顯示所有的項(取決於RepeatDirection屬性的值).

我們將在例子裡每行顯示3個product.因此設定RepeatColumns屬性為3.做完這個後,在瀏覽器裡瀏覽頁面.5所示,product顯示以3列多行列出.

圖 5: 每行顯示3條product

RepeatDirection屬性影響DataList的項的布局.圖5顯示的是RepeatDirection為Horizontal的情況.注意最前面的三個product — Chai, Chang, and Aniseed Syrup — 是先從左至右,再從上到下列出.後面的三個product(從Chef Anton’s Cajun Seasoning開始)在開始三個下面的一行裡.將RepeatDirection改為Vertical,這些product的布局變為先從上到下,再從左至右.見圖6.

圖 6: Products 垂直布局

在最後的table裡有多少行取決於記錄的總數除以RepeatColumns的值.由於有84條product資訊,除以3為28行.如果還有餘數,最後的行或列會用空的cell填充.如果RepeatDirection為Vertical,那麼最後的列會有空cell.如果RepeateDirection為Horizontal,那麼最後的行有空cell.

總結

DataList預設情況使用單列多行的table來顯示項目.和GridView只有一個TemplateField差不多.我們可以一行顯示多條記錄來.僅僅是設定RepeatColumns屬性為每行的列數就可以達到這個目的.另外,RepeatDirection屬性可以用來指定多行多列的table的內容是水平布局 —先從左至右,再從上到下 —或垂直的 —先從上到下,再從左至右.