DataList控件與Repeater控件一樣由模闆驅動,與Repeater控件不同的是: DataList控件預設輸出是一個HTML表格.DataList在輸出時已經在相應的模闆上套上了表格标簽,而Repeater則是模闆是什麼樣,輸出就是什麼樣.
1. DataList顯示資料
例1:使用DataList顯示資料
Code
<asp:DataList ID="DataList1" runat="server" DataSourceID="srcMovies">
<ItemTemplate>
<h1><%#Eval("Title") %></h1>
<b>Directed by:</b><%#Eval("Director") %>
<br />
<b>Description:</b><%#Eval("Description") %>
</ItemTemplate>
</asp:DataList>
以上的例子,在Repeater控件顯示資料時也是使用這樣的格式,但是輸出的HTML就有點不同了,DataList輸出了一張HTML表格:
Code
<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,則輸出如下所示：
Code
<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>
3. 多列顯示資料
從例1看出，預設的DataList是使用一行顯示一項資料，但是可以通過以下屬性讓其一行顯示多個資料項：
● RepeatColumn : 需要顯示的列數
● RepeatDirection : 輸出網格時的方向，可以為Horizontal(橫),Vertical(縱)
例2：多列顯示資料：
Code
<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>
4. DataList支援的模闆
除了ItemTemplate、AlternatingItemTemplate、SeparatorTemplate、HeaderTemplate、FooterTemplate外。
DataList還支援另外兩個模闆:
● EditItemTemplate : 當行進入編輯狀态時顯示的樣式
● SelectedItemTemplate : 當列被選中時顯示的樣式
例3：通過FooterTemplate進行資料彙總
Code
<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 [email protected]" Runat="server">
<SelectParameters>
<asp:ControlParameter Name="CategoryId" ControlID="dlstMovieCategories" PropertyName="SelectedValue" />
</SelectParameters>
</asp:SqlDataSource>
5. DataList控件選擇資料項
DataList有個隻讀屬性，名為SelectedValue,通過它，可以知道哪個資料項被選中了。當然，需要事先設定好DataList的CommandName為Select才可以進行選擇。
例4：使用DataList控件作為菜單使用
Code
6. DataList的事件
DataList比較強大。它支援編輯、更新、删除、取消，雖然相比于GridView，它要寫更多的代碼，但是可定制性也更高了。
DataList包括以下幾個事件:
● CancelCommand: 對 DataList 控件中的某項單擊 Cancel 按鈕時發生。【資料項中要有一個Button，且CommandName為Cancel】
● EditCommand : 單擊 Edit 按鈕時發生。[資料項中要有一個Button,且CommandName為Edit]
● UpdateCommand : 單擊更新按鈕時發生 [資料項中要有一個Button,且CommandName為Update]
● DeleteCommand : 單擊Delete按鈕時發生 [資料項中要有一個Button,且CommandName為Delete]
● SelectIndexChanged: 單擊Select按鈕時發生 [資料項中要有一個Button,且CommandName為Select]
● ItemCommand: 單擊任何按鈕時發生 [資料項中要有一個Button,且CommandName為任意值]
另外，還包括已經在Repeater控件中介紹過的DataBinding、ItemCreated、ItemDataBound事件。
以上，具體的，可以檢視MSDN中的一些例子，比較詳細。
對于DataList來說，可以設定其DataKeys屬性，是以在一些事件中(如ItemCommand)，可以直接使用 e.Item.ItemIndex來通路一個資料項的關鍵字索引。對于在什麼事件中使用ItemIndex進行取得，什麼事件中要用 DataBinder.Eval(Container.DataItem,"Id")這樣的方式，要區厘清楚【一般來說，在ItemDataBound事件時，用DataBinder方法獲得，在ItemCommand事件中，用ItemIndex來擷取】
下面是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>标簽.