asp.net学习之DataList控件
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>Description:</b><%#Eval("Description") %>
</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 [email protected]" 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中的一些例子，比较详细。
对于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>标签.