第二十讲 DataList控件应用教学目的:
一,DataList控件概述二,DataList控件的模板编辑器三,DataList控件的属性生成器四,DataList控件的数据操作教学重点:
掌握在 DataList中展示图片和文本的方法;
掌握在 DataList控件中选择数据的方法;
掌握在 DataList控件中编辑数据的方法;
掌握在 DataList控件中删除数据的方法;
掌握在 DataList控件中分页显示的方法。
一,DataList控件概述
DataList控件也是以模板为基础的数据绑定控件,与
Repeater控件有许多相似之处。可以定义 Repeater控件所具有的 5个模板,还增加了 SelectedItemTemplate模板(定义选定项的内容和布局)和 EditItemTemplate模板(定义当前编辑项的内容和布局)。
与 Repeater控件相比较,DataList控件最大的优势在于它有内置的样式和属性,可以使用模板编辑器和属性生成器来设计模板和设置属性,并支持分页和排序,由于增加了 2个模板,
功能上更加强大。
(一 )HTML标记
<asp:DataList id="DataList1" runat="server">
<%--各种模板标记 --%>
</asp:DataList>
(二 )常用属性
DataSource属性,绑定到控件的数据源,可以是数组、数据集、数据视图等。 DataList控件将其 ItemTemplate模板和
AlternatingItemTemplate模板绑定到 DataSource属性声明和引用的数据模型上。
DataMember属性,若 DataSource属性指定的是一个数据集,
则 DataMember属性指定到该数据集的一个数据表。
DataKeyField属性,用于填充 DataKey集合的数据源中的字段,一般应指定到数据表的主键字段。
RepeatColumns属性,用于布局中的列数,默认值为 0(一列)。
RepeatDirection属性,用于布局中的方向,默认为
Vertical(垂直布局 ),也可以选择 Horizontal(水平布局 )。
RepeatLayout属性,控件的布局形式,当为 Table时,以表格形式显示数据;为 Flow时将不以表格形式显示数据。
SelectedIndex属性,当前选定项的索引号,未选中任何项时为 -1。
★★ (三 )常用事件
DataList是容器控件,在 DataList内可以加入其他子控件。
子控件本身可以引发事件(例如 Button控件的 Click事件),
事件会反升至容器控件(也就是 DataList控件),这样的事件就称为 反升事件。 这时事件处理程序不再写在子控件的事件中,
而是要写在 DataList控件的反升事件中。
按钮子控件与反升事件的名称对应取决于按钮的
CommandName属性,对应规则为:
● 按钮的 CommandName属性设置为 delete,将引发
DataList控件的 DeleteCommand事件。
● 按钮的 CommandName属性设置为 update,将引发
DataList控件的 UpdateCommand事件。
● 按钮的 CommandName属性设置为 edit,将引发
DataList控件的 EditCommand事件。
● 按钮的 CommandName属性设置为 cancel,将引发
DataList控件的 CancelCommand事件。
● 若按钮的 CommandName属性设置不为上述各项,
将引发 DataList控件的 ItemCommand事件。
● 特别地,按钮的 CommandName属性设置为 select,
除了引发 DataList控件的 ItemCommand事件外,还会引发
SelectedIndexChange事件。
ItemCommand事件,在控件生成事件时发生。向 DataList
控件加入按钮类控件的 CommandName属性可以设置成除上述规定外的任何名字,当这些按钮被单击时,都将引发
ItemCommand事件,在这个事件处理程序中通过判别按钮控件的 CommandName属性就知道单击的是哪个按钮。
SelectedIndexChange事件,当控件内的选择项发生改变后激发。
ItemCreated事件,在控件内创建项时激发。若要对控件内的子控件做某些初始设置时,可以利用这个事件,如此正当其时。子控件的初始设置不能够放在 Page_Load中做,在那里访问不到这些子控件,因为它们被包含到了容器控件中。
二,DataList控件的模板编辑器使用 DataList控件的模板编辑器
(一 )新建项目新建一个 Web应用程序项目。
(二 )连接数据库
DadaList控件最适宜于显示数据库中的数据。为了测试以下程序的运行效果,我们使用数据连接向导将数据库 product的数据表
fruitInfo连接到网页,此举将生成以下 3个数据控件:
sqlConnecton1,sqlDataAdapter1和 dataSet11。
(三 )编辑项模板
DataList控件的模板生成器可以方便地生成项模板、页眉页脚模板和分隔符模板。项模板的使用方法,
将 DataList控件拖至页面,右击控件 DataList1弹出快捷菜单,
在快捷菜单上单击 【 编辑模板 】,会弹出它的子菜单如下图。
在项模板编辑器中有 4个编辑区,分别用来编辑
ItemTemplate项模板,AlternatingItemTemplate交替项模板,SelecteItemTemplate选择项模板和
EditItemTemplate编辑项模板。
(四 )编辑 ItemTemplate项模板
ItemTemplate项模板是必选的模板,它确定 DataList
控件需要显示的数据项及其布局。鼠标单击 ItemTemplate
下的编辑区,可以看到有输入光标出现,这意味着可以向编辑区加入子控件或在编辑区内直接输入文本。数据源的数据字段需要通过加入的子控件表现,方法是将子控件绑定到数据源的字段上。如果有必要对这些数据进行必要的说明,就直接在编辑区输入说明性文本就可以了。
向 ItemTemplate模板的编辑区中拖入 6个 Label控件,以便每个 Label对应于一个字段数据,并在编辑区最后面输入一个“元”字。如图。
(六)编写 Code_Bihand代码在页面加载时填充数据集,指定控件 DataList1的数据源并做绑定。
private void Page_Load(object sender,System.EventArgs e)
{
if(!IsPostBack)
{
//填充数据集
sqlDataAdapter1.Fill(dataSet11,"fruitInfo");
//数据绑定
DataList1.DataSource=dataSet11.Tables["fruitInfo"].Defa
ultView;
DataList1.DataBind();
}
}
三,DataList控件的属性生成器
DataList控件有很多属性用来控制其布局和外观,通过设置这些属性可以更生动地展示数据。当然可以象其他控件一样在属性窗口中进行属性设置,或在程序代码
( Code_Behind代码或 HTML标记)中设置,但对于
DataList控件和接下来要讲到的 DataGrig控件,使用属性生成器来设置这些属性是一种便捷的方法。
DataList控件的属性生成器如右图。从图可以看到,属性的设置分常规、格式和边框 3页进行。图中为常规页。
1.常规页常规页用来设置数据项、页眉和页脚以及重复布局,从上至下说明各设置项的含义。
数据组中的数据源、数据成员和数据键字段 3项分别对应 DataSource、
DataMember和 DataKeyField三个数据属性。
页眉页脚中的显示页眉和显示页脚分别对应 ShowHeader和 ShowFooter
属性。
重复布局组的列、方向和布局分别对应 RepeatColumns、
RepeatDirection和 RepeatLayout属性。
2.格式页格式页如右图。
格式页用来设置外观,右侧的各个选项的含义十分清楚,注意要将外观设置与对象对应起来,
图中当前设置的是普通项的外观。
3.边框页边框页如右图。
边框页设置边框的颜色、
宽度和单元格间距等。如果想设置是否需要边框,应该在常规页中的
“布局”中选择表(有边框)
或流(无边框)。
四、在 DataList控件中选择数据
(一 )DataList控件的选择项模板使用 DataList控件选择项模板的设计要点如下:
必须创建 ItemTemplate普通项模板,在这个模板内加入一些控件显示记录行的简要信息,以便让读者快速浏览记录。还需要加入按钮控件到这个模板中,以便能够确认选择。
必须创建 SelectedItemTemplate选择项模板,在这个模板内加入控件来显示选择项的详细信息。若选择项展开后还要再折叠回来,需要加入一个命令按钮启动折叠命令。
为各个按钮的反升事件编写后台代码,实现对应的功能。
SelectedItemTemplate选择项模板的 HTML标记为:
<SelectedItemTemplate>
<%--选择项模板的内容和布局 --%>
</SelectedItemTemplate>
(二 )实现 DataList控件的选择功能下例中使用一个 DataList控件,将数据库 MMIS的数据表
employeeInfo的简要信息显示在 ItemTemplate普通项模板中,
将选定行的详细信息显示在 SelectedItemTemplate模板中。
SelectedItemTemplate模板可以展开和折叠。
① 创建 ASP.NET Web应用程序项目向页面拖入一个 DataList控件。
五、在 DataList控件中编辑数据
(一 ) DataList控件的编辑项模板使 DataList控件具有编辑修改功能的设计要点如下:
● 必须创建 ItemTemplate普通项模板,在这个模板内加入一些控件显示记录行的简要信息,让数据管理者快速浏览记录以确定需要修改的记录。再加入按钮控件到这个模板中,以便启动修改。
● 必须创建 EditItemTemplate编辑项模板,并在模板内加入能够实现编辑操作的控件(如 TextBox文本框),启动
“更新”和“取消”等操作命令的控件(如 Button命令按钮)。
● 为各个按钮的反升事件编写后台代码,实现对应的功能。
EditItemTemplate编辑项模板的 HTML标记为:
<EditItemTemplate>
<%--编辑项模板的内容和布局 --%>
</EditItemTemplate>
六、在 DataList控件中删除数据记录
(一 )在 DataList控件中删除记录的设计要点使 DataList控件具有删除记录功能的设计要点如下:
● 必须创建 ItemTemplate普通项模板,在这个模板内加入一些控件显示数据源的信息,让数据管理者快速浏览记录以确定需要删除哪一条记录。还需要加入一个“删除”
按钮到这个模板中,以便能够启动删除功能。
● 将 DataList控件的 DataKeyField属性设置到数据表的主键字段。
(二 )实现在 DataList控件中删除记录在下例中使用一个 DataList控件,将数据库 MMIS的数据表 employeeInfo的信息显示在 ItemTemplate普通项模板中,
加入一个“删除”按钮到 ItemTemplate中启动删除功能。
七、在 DataList控件中分页显示数据
(一 )如何解决 DataList控件分页
DataList控件本身不具有分页功能,要使其能够分页显示,可以有两种办法解决:
①自定义分页数据源。基本思路是每次提取固定数量的行到数据源,假定每页显示 5行到 DataList控件,就每次提取
5条记录到数据源,然后将数据源绑定到控件即可,难点在于如何正确地提取到符合当前页要求的那 5条记录。
② 使用 PageDataSource类实现分页功能。
(二 )PageDataSource类
PageDataSource类是 ASP.NET用于对数据源进行分页处理的一个类,可用于 Repeater,DataList和 DataGrid等数据绑定控件的分页功能。使用它实现数据绑定控件的分页时,
将原先未分页的数据源作为 PageDataSource实例的数据源,
通过设置其属性使适合数据绑定控件分页的需要,然后将该实例作为数据绑定控件的数据源,即可使数据绑定控件具有分页功能。
PageDataSource类常用的属性有:
AllowPaging属性,设置或获取是否启用分页。
AllowCustomPaging属性,设置或获取是否启用自定义分页。
DataSource属性,设置或获取数据绑定控件(例如
DataList)的数据源。
PageSize属性,设置或获取 DataList控件上每页的行数。
PageCount属性,DataList控件上的总页数,只读。
IsFirstPage属性,其值为 true时当前为第一页,只读。
IsLastPage属性,其值为 true时当前为最后一页,只读。
CurrentPageIndex属性,设置或获取当前页的索引号。