DataList控件與Repeater控件一樣由模板驅動,與Repeater控件不同的是: DataList控件默認輸出是一個HTML表格.DataList在輸出時已經在相應的模板上套上了表格標簽,而Repeater則是模板是什么樣,輸出就是什么樣. 

1. DataList顯示數據

例1:使用DataList顯示數據    

<asp:DataList ID="DataList1" runat="server" DataSourceID="srcMovies">
    <ItemTemplate>
        <h1><%#Eval("Title") %></h1>
        <b>Directed by:</b><%#Eval("Director") %>
            <br />
        <b>Descr    </ItemTemplate>
</asp:DataList> 

    以上的例子,在Repeater控件顯示數據時也是使用這樣的格式,但是輸出的HTML就有點不同了,DataList輸出了一張HTML表格: 

<table id="DataList1" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
    <td>
        <h1> 非常完美</h1> <b>Directed by:</b>依萌<br /><b>Description:</b> 兩年前，立志成……
    </td>
</tr>
<tr>
    <td>
        <h1> 羅馬假日  </h1> <b>Directed by:</b>William Wyler<br /><b>Description:</b> 英國的安妮公主到羅馬去訪問，國務煩身
    </td>
</tr>

</table> 

2. 表格布局(Table)和流布局(Flow)

      ● RepeatLayout : 來確定是在表中顯示還是在流布局中顯示. 可選值為Flow和Table 
    如果在上個例子中加入RepeatLayout屬性為Flow,則輸出如下所示： 

<span id="DataList1">
    <span><h1> 非常完美</h1> <b>Directed by:</b>依萌<br /><b>Description:</b> 兩年前，立志成…… </span><br />
    <span><h1> 羅馬假日</h1> <b>Directed by:</b>William Wyler<br /><b>Description:</b> 英國的安妮公主到羅馬去訪問，國務煩身 </span><br />
    …
</span>

3. 多列顯示數據

   從例1看出，默認的DataList是使用一行顯示一項數據，但是可以通過以下屬性讓其一行顯示多個數據項： 
     ● RepeatColumn   : 需要顯示的列數 
     ● RepeatDirection : 輸出網格時的方向，可以為Horizontal(橫),Vertical(縱) 
例2：多列顯示數據： 

<asp:DataList ID="DataList1" runat="server" RepeatColumns="3" GridLines="Both" DataSourceID="srcMovies">
    <ItemTemplate>
        <h1><%#DataBinder.Eval(Container.DataItem,"Title") %></h1> <!-- 為種綁定數據的方法與上面一種是一樣的，只是寫法不同 -->
        <b>Directed by:</b><%#Eval("Director") %>
            <br />
        <b>Description:</b><%#Eval("Description") %>
    </ItemTemplate>
</asp:DataList> 

 

4. DataList支持的模板

    除了ItemTemplate、AlternatingItemTemplate、SeparatorTemplate、HeaderTemplate、FooterTemplate外。 
    DataList還支持另外兩個模板: 
      ● EditItemTemplate : 當行進入編輯狀態時顯示的樣式 
      ● SelectedItemTemplate : 當列被選中時顯示的樣式 
例3：通過FooterTemplate進行數據匯總

<script runat=”server”>
decimal totals;
PRotected void dlstMovies_ItemDataBound(object sender, DataListItemEventArgs e)
{
    // 在ItemDataBound中找到某個列值的方法就是使用DataBinder.Eval。
    // e.Item就是一個DataList的Container。
    if (e.Item.DataItem != null)
        totals += (decimal)DataBinder.Eval(e.Item.DataItem, "BoxOfficeTotals");
    if (e.Item.ItemType == ListItemType.Footer)
    {
        Label lblTotal = (Label)e.Item.FindControl("lblTotal");
        lblTotal.Text = totals.ToString("c");
    }
}
</script>

<asp:DataList id="dlstMovies" DataSourceID="srcMovies" GridLines="Horizontal"
        UseaccessibleHeader="true" OnItemDataBound="dlstMovies_ItemDataBound" CSSClass="movies" Runat="server" >
    <HeaderTemplate>
        Movie Box Office Totals
    </HeaderTemplate>
    <ItemTemplate>
        <%#Eval("Title")%>:
        <%#Eval("BoxOfficeTotals","{0:c}") %>
    </ItemTemplate>
    <FooterTemplate>
        <b>Total:</b>
        <asp:Label id="lblTotal" Runat="server" />
    </FooterTemplate>
</asp:DataList> 

5. DataList控件選擇數據項

    DataList有個只讀屬性，名為SelectedValue,通過它，可以知道哪個數據項被選中了。當然，需要事先設置好DataList的CommandName為Select才可以進行選擇。 
例4：使用DataList控件作為菜單使用

<asp:DataList id="dlstMovieCategories" DataSourceID="srcMovieCategories" DataKeyField="Id"
        GridLines="Both" CssClass="movies" Runat="server">
    <ItemTemplate>
        <asp:LinkButton id="lnkMovie" Text=’<%#Eval("Name") %>’ CommandName="Select" Runat="server" />
    </ItemTemplate>
</asp:DataList>

<asp:DataList id="dlstMovieDetails" DataSourceID="srcMovieDetails" Runat="server">
    <ItemTemplate>
        <h1><%#Eval("Title")%></h1>
        Directed by: <%#Eval("Director") %>
            <br />
        Box Office Totals: <%#Eval("BoxOfficeTotals","{0:c}") %>
    </ItemTemplate>
</asp:DataList>

<asp:SqlDataSource id="srcMovieCategories" ConnectionString="<%$ ConnectionStrings:Movies %>"
    SelectCommand="SELECT Id, Name FROM MovieCategories" Runat="server" />
<asp:SqlDataSource id="srcMovieDetails" ConnectionString="<%$ ConnectionStrings:Movies %>"
    SelectCommand="SELECT Title,Director,BoxOfficeTotals FROM Movies WHERE CategoryId=@CategoryId" Runat="server">
    <SelectParameters>
        <asp:ControlParameter Name="CategoryId" ControlID="dlstMovieCategories" PropertyName="SelectedValue" />
    </SelectParameters>
</asp:SqlDataSource>

6. DataList的事件

    DataList比較強大。它支持編輯、更新、刪除、取消，雖然相比于GridView，它要寫更多的代碼，但是可定制性也更高了。 
    DataList包括以下幾個事件: 
       ● CancelCommand: 對 DataList 控件中的某項單擊 Cancel 按鈕時發生。【數據項中要有一個Button，且CommandName為Edit】 
       ● EditCommand : 單擊 Edit 按鈕時發生。[數據項中要有一個Button,且CommandName為Edit] 
       ● UpdateCommand : 單擊更新按鈕時發生 [數據項中要有一個Button,且CommandName為Edit] 
       ● DeleteCommand : 單擊Delete按鈕時發生 [數據項中要有一個Button,且CommandName為Delete] 
       ● SelectIndexChanged: 單擊Select按鈕時發生 [數據項中要有一個Button,且CommandName為Select] 
       ● ItemCommand: 單擊任何按鈕時發生 [數據項中要有一個Button,且CommandName為任意值] 
    另外，還包括已經在Repeater控件中介紹過的DataBinding、ItemCreated、ItemDataBound事件。 
    以上，具體的，可以查看MSDN中的一些例子，比較詳細。 

    下面是MSDN中的一篇東東，介紹如何響應綁定控件中的按鈕事件：

    如果您使用的是帶模板的數據綁定控件（例如，DataList 或 FormView 控件），且模板包含 Button、LinkButton 或 ImageButton Web 服務器控件，則按鈕可以將它們的 Click 事件轉發給包含控件。這樣，您可以包含按鈕以實現尚未為數據綁定控件定義的自定義功能，例如，編輯、刪除、更新和取消。

響應數據綁定控件中的按鈕事件
      1. 在控件模板中添加 Button、LinkButton 或 ImageButton。
      2. 將按鈕的 CommandName 屬性設置為標識其功能的字符串，如“Sort”或“Duplicate”。
      3. 創建用于控件的 ItemCommand 事件的方法。在該方法中，執行下列操作： 
           a. 檢查事件參數對象的 CommandName 屬性來查看傳入什么字符串。
           b. 為用戶單擊的按鈕執行相應的邏輯。

    下面的示例演示響應 DataList 控件中的按鈕單擊的方法。在該示例中，ItemTemplate 包含顯示購物車的 ImageButton 控件。該按鈕發送命令 AddToCart。事件處理程序確定所單擊的是哪個按鈕，如果是購物車按鈕，則執行相應的邏輯。
<script runat="server">
private void DataList1_ItemCommand(object source, 
    DataListCommandEventArgs e)
{
    if (e.CommandName == "AddToCart")
    {
        // Add code here to add the item to the shopping cart.
        // Use the value of e.Item.ItemIndex to find the data row
        // in the data source.
    }
}
</script>

5. 格式化DataList

    對于默認的DataList輸出,肯定是比較難看的,所以要對它套用CSS式樣,以輸出符合我們意愿的格式.DataList提供了一些屬性,通過它們,可以變更DataList的樣式 
      ● CssClass : DataList使用的CSS 
      ● AlternatingItemStyle : 交替行使用的樣式 
      ● EditItemStyle : 編輯行使用的樣式 
      ● FooterStyle : 頁腳樣式 
      ● HeaderStyle : 頁眉樣式 
      ● ItemStyle  : 普通數據行樣式 
      ● SelectedItemStyle : 選中項的樣式 
      ● SpearatorStyle : 間隔行樣式 
      ● GridLines : 單元格邊框格式,可以有"None,Horizontal,Vertical,Both” 
      ● ShowFooter : 是否顯示頁腳 
      ● ShowHeader : 是否顯示頁眉 
      ● UseAccessibleHeader : 在頁眉行的單元格中使用HTML標簽<th>來替換<td>標簽.