第二十讲 Datalist控件应用
第二十讲 DataList控件应用
教学目的: 、 Datalist控件概述 、 Datalist控件的模板编辑器 Datalist控件的属性生成器 四、 Datalist控件的数据操作 教学重点: 掌握在 Datalist中展示图片和文本的方法; 掌握在 Datalist控件中选择数据的方法; ■掌握在 Datalist控件中编辑数据的方法 掌握在 Datalist控件中删除数据的方法; 掌握在 Datalist控件中分页显示的方法
教学目的： 一、DataList控件概述 二、DataList控件的模板编辑器 三、DataList控件的属性生成器 四、DataList控件的数据操作 教学重点： ▪ 掌握在DataList中展示图片和文本的方法； ▪ 掌握在DataList控件中选择数据的方法； ▪ 掌握在DataList控件中编辑数据的方法； ▪ 掌握在DataList控件中删除数据的方法； ▪ 掌握在DataList控件中分页显示的方法
一、 Datalist控件概述 Datalist控件也是以模板为基础的数据绑定控件,与 Repeater控件有许多相似之处。可以定义 Repeater控件所具有 的5个模板,还增加了 SelecteditemTemplate模板(定义选定 项的内容和布局)和 EditItemTemplate模板(定义当前编辑项 的内容和布局) 与 Repeater控件相比较, Datalist控件最大的优势在于它 有内置的样式和属性,可以使用模板编辑器和属性生成器来设 计模板和设置属性,并支持分页和排序,由于增加了2个模板, 功能上更加强大 (一)TML标记 Kasp: DataList id=DataListl" runat=server>
一、DataList控件概述 DataList控件也是以模板为基础的数据绑定控件，与 Repeater控件有许多相似之处。可以定义Repeater控件所具有 的5个模板，还增加了SelectedItemTemplate模板（定义选定 项的内容和布局）和EditItemTemplate模板（定义当前编辑项 的内容和布局）。 与Repeater控件相比较，DataList控件最大的优势在于它 有内置的样式和属性，可以使用模板编辑器和属性生成器来设 计模板和设置属性，并支持分页和排序，由于增加了2个模板， 功能上更加强大。 (一)HTML标记
(二)常用属性 DataSource属性:绑定到控件的数据源,可以是数组、数 据集、数据视图等。 Datalist控件将其 ItemTemplate模板和 AlternatingItemTemplate模板绑定到 DataSource属性声明和 引用的数据模型上。 DataMember属性:若 DataSource属性指定的是一个数据集, 则 DataMember属性指定到该数据集的一个数据表。 DataKeyField属性:用于填充 DataKey集合的数据源中的 字段,一般应指定到数据表的主键字段。 Repeat columns属性:用于布局中的列数,默认值为0(一 列)。 RepeatDirection属性:用于布局中的方向,默认为 Vertical(垂直布局),也可以选择 Horizontal(水平布局) RepeatLayout属性:控件的布局形式,当为 Table时,以 表格形式显示数据;为Flow时将不以表格形式显示数据。 SelectedIndex属性:当前选定项的索引号,未选中任何 项时为-1
(二)常用属性 DataSource属性：绑定到控件的数据源，可以是数组、数 据集、数据视图等。DataList控件将其ItemTemplate模板和 AlternatingItemTemplate模板绑定到DataSource属性声明和 引用的数据模型上。 DataMember属性：若DataSource属性指定的是一个数据集， 则DataMember属性指定到该数据集的一个数据表。 DataKeyField属性：用于填充DataKey集合的数据源中的 字段，一般应指定到数据表的主键字段。 RepeatColumns属性：用于布局中的列数，默认值为0（一 列）。 RepeatDirection属性：用于布局中的方向，默认为 Vertical(垂直布局)，也可以选择Horizontal(水平布局)。 RepeatLayout属性：控件的布局形式，当为Table时，以 表格形式显示数据；为Flow时将不以表格形式显示数据。 SelectedIndex属性：当前选定项的索引号，未选中任何 项时为-1
★★(三)常用事件 Datalist是容器控件,在 Datalist内可以加入其他子控件 子控件本身可以引发事件(例如 But ton控件的 Click事件), 事件会反升至容器控件(也就是 Datalist控件),这样的事件 就称为反升事件。这时事件处理程序不再写在子控件的事件中, 而是要写在 Datalist控件的反升事件中 按钮子控件与反升事件的名称对应取决于按钮的 CommandName属性,对应规则为 按钮的 CommandName 属性设置为 delete,将引发 Datalist控件的 DeleteCommand事件。 按钮的 CommandName属性设置为 update,将引发 Datalist控件的 UpdateCommand事件。 ●按钮的 CommandName属性设置为edit,将引发 Datalist控件的 EditCommand事件。 按钮的 CommandName属性设置为 cancel,将引发 Datalist控件的 Cancelcommand事件
★★ (三)常用事件 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控件的 I temCommand事件 特别地,按钮的 CommandName属性设置为 select, 除了引发 Datalist控件的 ItemCommand事件外,还会引发 SelectedIndexchange事件 ItemCommand事件:在控件生成事件时发生。向 Datalist 控件加入按钮类控件的 Commandname属性可以设置成除上述规 定外的任何名字,当这些按钮被单击时,都将引发 ItemCommand事件,在这个事件处理程序中通过判别按钮控件 的 CommandName属性就知道单击的是哪个按钮 SelectedindexChange事件:当控件内的选择项发生改变 后激发。 ItemCreated事件:在控件内创建项时激发。若要对控件 内的子控件做某些初始设置时,可以利用这个事件,如此正 当其时。子控件的初始设置不能够放在 Page Load中做,在那 里访问不到这些子控件,因为它们被包含到了容器控件中
● 若按钮的CommandName属性设置不为上述各项， 将引发DataList控件的 ItemCommand事件。 ● 特别地，按钮的CommandName属性设置为select， 除了引发DataList控件的ItemCommand事件外，还会引发 SelectedIndexChange事件。 ItemCommand事件：在控件生成事件时发生。向DataList 控件加入按钮类控件的CommandName属性可以设置成除上述规 定外的任何名字，当这些按钮被单击时，都将引发 ItemCommand事件，在这个事件处理程序中通过判别按钮控件 的CommandName属性就知道单击的是哪个按钮。 SelectedIndexChange事件：当控件内的选择项发生改变 后激发。 ItemCreated事件：在控件内创建项时激发。若要对控件 内的子控件做某些初始设置时，可以利用这个事件，如此正 当其时。子控件的初始设置不能够放在Page_Load中做，在那 里访问不到这些子控件，因为它们被包含到了容器控件中
二、 Datalist控件的模板编辑器「 使用 Datalist控件的模板编辑器 (一)新建项目 新建一个Web应用程序项目。 二)连接数据库 Dadaist控件最适宜于显示数据库中的数据。为了测试以下程 序的运行效果,我们使用数据连接向导将数据库 product的数据表 fruitInfo连接到网页,此举将生成以下3个数据控件: sql Connecton、 sqldataAdapterl和 dataset11。 (三)编辑项模板 Datalist控件的模板生成器可以方便地生成项模板、页眉页脚 模板和分隔符模板。项模板的使用方法 将 Datalist控件拖至页面,右击控件 Datalist1弹出快捷菜单, 在快捷菜单上单击【编辑模板】,会弹岀它的子菜单如下图
二、DataList控件的模板编辑器 使用DataList控件的模板编辑器 (一)新建项目 新建一个Web应用程序项目。 (二)连接数据库 DadaList控件最适宜于显示数据库中的数据。为了测试以下程 序的运行效果，我们使用数据连接向导将数据库product的数据表 fruitInfo连接到网页，此举将生成以下3个数据控件： sqlConnecton1、sqlDataAdapter1和dataSet11。 (三)编辑项模板 DataList控件的模板生成器可以方便地生成项模板、页眉页脚 模板和分隔符模板。项模板的使用方法: 将DataList控件拖至页面，右击控件DataList１弹出快捷菜单， 在快捷菜单上单击【编辑模板】，会弹出它的子菜单如下图
Datalist1-项模板〔)③ ItemTemplate AlternatingItemTemplate SelectedItemTemplate EditItemTemplate
在项模板编辑器中有4个编辑区,分别用来编辑 ItemTemplate项模板 、 AlternatingltemTemplate交替项 模板、 SelecteltemTemplate选择项模板和 EditItemTemplate编辑项模板。 (四)编辑 ItemTemplate项模板 ItemTemplate项模板是必选的模板,它确定 Datalist 控件需要显示的数据项及其布局。鼠标单击 ItemTemplate 下的编辑区,可以看到有输入光标出现,这意味着可以向 编辑区加入孑控件或在编辑区内直接输入文本。数据源的 数据字段需要通过加入的子控件表现,方法是将子控件绑」 定到数据源的字段上。如果有必要对这些数据进行必要的 说明,就直接在编辑区输入说明性文本就可以
在项模板编辑器中有4个编辑区，分别用来编辑 ItemTemplate项模板、AlternatingItemTemplate交替项 模板、SelecteItemTemplate选择项模板和 EditItemTemplate编辑项模板。 (四)编辑ItemTemplate项模板 ItemTemplate项模板是必选的模板，它确定DataList 控件需要显示的数据项及其布局。鼠标单击ItemTemplate 下的编辑区，可以看到有输入光标出现，这意味着可以向 编辑区加入子控件或在编辑区内直接输入文本。数据源的 数据字段需要通过加入的子控件表现，方法是将子控件绑 定到数据源的字段上。如果有必要对这些数据进行必要的 说明，就直接在编辑区输入说明性文本就可以了
向 ItemTemplate模板的编辑区中拖入6个 Label控 件,以便每个 Label对应于一个字段数据,并在编辑 区最后面输入一个“元”字。如图。 DataList1-项模板〔 empl 31..9..ba0元 AlternatingltemTemplate SelectedtemTemplate Edit工 temEnt1ate
向ItemTemplate模板的编辑区中拖入6个Label控 件，以便每个Label对应于一个字段数据，并在编辑 区最后面输入一个“元”字。如图