asp.net学习之DataList控件

原文:asp.net学习之DataList控件

     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
<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:多列显示数据:

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> 

4. DataList支持的模板

    除了ItemTemplate、AlternatingItemTemplate、SeparatorTemplate、HeaderTemplate、FooterTemplate外。
    DataList还支持另外两个模板:
      ● EditItemTemplate : 当行进入编辑状态时显示的样式
      ● SelectedItemTemplate : 当列被选中时显示的样式
例3:通过FooterTemplate进行数据汇总

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> 

 

5. DataList控件选择数据项

    DataList有个只读属性,名为SelectedValue,通过它,可以知道哪个数据项被选中了。当然,需要事先设置好DataList的CommandName为Select才可以进行选择。
例4:使用DataList控件作为菜单使用

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 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中的一些例子,比较详细。

    对于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>标签.

时间: 2024-10-03 04:21:00

asp.net学习之DataList控件的相关文章

asp.net学习之 数据绑定控件--表格绑定控件

原文:asp.net学习之 数据绑定控件--表格绑定控件     数据绑定 Web 服务器控件是指可绑定到数据源控件,以实现在 Web 应用程序中轻松显示和修改数据的控件.数据绑定 Web 服务器控件是将其他 ASP.NET Web 控件(例如 Label 和 TextBox 控件)组合到单个布局中的复合控件.     例如,诸如 DetailsView 控件等数据绑定控件可绑定到一个结果集,例如,包含每个雇员的姓名.地址.职务等信息的雇员表.在 DetailsView 控件中,可以将 Labe

asp.net学习之数据绑定控件、数据源控件概述

原文:asp.net学习之数据绑定控件.数据源控件概述 1.asp.net数据绑定控件分为三大类,每个类分别进行详细:      ● 列表式数据绑定控件: 列表式数据绑定控件常用来在一个表格内的一个字段进行绑定.显示一个字段下所有数据的信息.           它包括以下几个控件:BulletedList.CheckboxList.DropDownList.ListBox.RadioButtonList           具体的参照以下文章:  http://www.cnblogs.com/

asp.net学习之Repeater控件

原文:asp.net学习之Repeater控件     Repeater控件和DataList控件,可以用来一次显示一组数据项.比如,可以用它们显示一个数据表中的所有行.     Repeater控件完全由模板驱动,提供了最大的灵活性,可以任意设置它的输出格式.DataList控件也由模板驱动,和Repeater不同的是,DataList默认输出是HTML表格,DataList将数据源中的记录输出为HTML表格一个个的单元格. 1. Repeater控件显示数据     要使用Repeater控

ASP.NET数据绑定之DataList控件实战篇_实用技巧

上篇文章大概讲了DataList的一些基础知识,掌握这些知识在将来的应用中起到很大的作用,现在我们就开始讲上篇文章中说的基础知识做一个小例子.     首先,我机子的数据库中有一张person表,如下图所示. 现在,我们用DataList控件将表中的信息显示出来,并可以在DataList控件上对数据库中的表进行编辑操作.     1.首先用vs创建web应用程序,添加web窗体,在web窗体内拉入DataList控件,右击控件,选择编辑项模板,在这里我们能看到四个模板,其中两个是Selected

ASP.NET数据绑定之DataList控件_实用技巧

DataList控件是.NET中的一个控件.DataList控件以表的形式呈现数据(在属性生成器中可以编辑),通过该控件,您可以使用不同的布局来显示数据记录(使用模板编辑),例如,将数据记录排成列或行的形式.您可以对 DataList控件进行配置,使用户能够编辑或删除表中的记录(使用EditItemTemplate模板和SelectedItemTemplate模板).DataList控件不使用数据源控件的数据修改功能,您必须自己提供此代码. 一.DataList 与 Repeater比较    

ASP.NET:DataList控件的选择输入功能

asp.net|控件     利用DataList控件的<SelectedItemTemplate> 属性,就可以随心所欲的布置表中的数据.根据链接,友好地显示出用户感兴趣的数据,我们来看下面的实例.     9.3.2 DataList控件的选择输入功能     在DataCon Web 项目里添加一个Web 窗体,命名为DataList_Sample2.aspx,添加一个DataList控件,DataList_Sample2.aspx的主要HTML代码如下: <form id=&qu

ASP.NET DataList控件,HTML代码有span标签,怎么删除

问题描述 ASP.NET2.0把DataList控件的RepeatLayout属性设为Flow,那么每个项就显示在<span></span>中.<divclass="wzlb"><spanid="DataList1"><span>内容内容</span></span></div> 每个项都在一个span标签里面,而所以项又在一个id="DataList1"

asp.net中将数据库绑定到DataList控件的实现方法与实例代码

解决方法1: datalist databind() 解决方法2: 查看MSDN上的详细说明资料 解决方法3: 在DataList的模板中用table表格,如: 复制代码 代码如下: <asp:DataList ID="dlDetailedInfo" runat="server" OnItemDataBound="dlDetailedInfo_ItemDataBound" Width="100%"> <Ite

ASP.NET:DataList控件的分列输出功能

asp.net|控件 DataList 控件在一个重复列表中显示数据项,并且还可以支持选择和编辑项目.可使用模板对 DataList 中列表项的内容和布局进行定义,它的最大的特点是可以分列显示数据.下面几节里,我们将详细介绍.     9.3  DataList控件的详解     9.3.1 DataList控件的分列输出功能     DataList控件被设计为用于分列输出数据,需要输出的数据在它的<ItemTemplate>属性里,每一个<Blockquote>就是一个强制换行