《ASP.NET程序设计普通高等教育“十一五”国家级规划教材教学课件作者李德奇第09讲DataList控件应用之一》由会员分享，可在线阅读，更多相关《ASP.NET程序设计普通高等教育“十一五”国家级规划教材教学课件作者李德奇第09讲DataList控件应用之一（26页珍藏版）》请在金锄头文库上搜索。
1、第九讲 DataList控件应用之一,教学内容 一、DataList控件概述 二、DataList控件的模板编辑器 三、DataList控件的属性生成器 四、DataList控件应用之一,教学目标,掌握DataList控件的模板编辑器的使用； 掌握DataList控件的属性生成器的使用； 掌握在DataList控件中展示文本的方法； 掌握在DataList控件中展示图片的方法； 初步掌握DataList控件的应用。,一、DataList控件概述(1/4),DataList控件也是以模板为基础的数据绑定控件，与Repeater控件有许多相似之处。可以定义Repeater控件所具有的5个模板，还增
2、加了SelectedItemTemplate模板（定义选定项的内容和布局）和EditItemTemplate模板（定义当前编辑项的内容和布局）。 与Repeater控件相比较，DataList控件最大的优势在于它有内置的样式和属性，可以使用模板编辑器和属性生成器来设计模板和设置属性，并支持分页和排序，由于增加了2个模板，功能上更加强大。 (一)HTML标记 ,(二)常用属性 DataSource属性：绑定到控件的数据源，可以是数组、数据集、数据视图等。DataList控件将其ItemTemplate模板和AlternatingItemTemplate模板绑定到DataSource属性声明和引用
3、的数据模型上。 DataMember属性：若DataSource属性指定的是一个数据集，则DataMember属性指定到该数据集的一个数据表。 DataKeyField属性：用于填充DataKey集合的数据源中的字段，一般应指定到数据表的主键字段。 RepeatColumns属性：用于布局中的列数，默认值为0（一列）。 RepeatDirection属性：用于布局中的方向，默认为Vertical(垂直布局)，也可以选择Horizontal(水平布局)。 RepeatLayout属性：控件的布局形式，当为Table时，以表格形式显示数据；为Flow时将不以表格形式显示数据。 SelectedIn
4、dex属性：当前选定项的索引号，未选中任何项时为-1。,一、DataList控件概述(2/4),(三)常用事件 DataList是容器控件，在DataList内可以加入其他子控件。子控件本身可以引发事件（例如Button控件的Click事件），事件会反升至容器控件（也就是DataList控件），这样的事件就称为反升事件。这时事件处理程序不再写在子控件的事件中，而是要写在DataList控件的反升事件中。 按钮子控件与反升事件的名称对应取决于按钮的CommandName属性，对应规则为： 按钮的CommandName属性设置为delete，将引发DataList控件的 DeleteCommand
5、事件。 按钮的CommandName属性设置为update，将引发DataList控件的 UpdateCommand事件。 按钮的CommandName属性设置为edit，将引发DataList控件的 EditCommand事件。 按钮的CommandName属性设置为cancel，将引发DataList控件的 CancelCommand事件。,一、DataList控件概述(3/4), 若按钮的CommandName属性设置不为上述各项，将引发DataList控件的 ItemCommand事件。 特别地，按钮的CommandName属性设置为select，除了引发DataList控件的Item
6、Command事件外，还会引发SelectedIndexChange事件。 ItemCommand事件：在控件生成事件时发生。向DataList控件加入按钮类控件的CommandName属性可以设置成除上述规定外的任何名字，当这些按钮被单击时，都将引发ItemCommand事件，在这个事件处理程序中通过判别按钮控件的CommandName属性就知道单击的是哪个按钮。 SelectedIndexChange事件：当控件内的选择项发生改变后激发。 ItemCreated事件：在控件内创建项时激发。若要对控件内的子控件做某些初始设置时，可以利用这个事件，如此正当其时。子控件的初始设置不能够放在Pag
7、e_Load中做，在那里访问不到这些子控件，因为它们被包含到了容器控件中。,一、DataList控件概述(4/4),二、DataList控件的模板编辑器（1/9）,使用DataList控件的模板编辑器 (一)新建项目 新建一个Web应用程序项目。 (二)连接数据库 DadaList控件最适宜于显示数据库中的数据。为了测试以下程序的运行效果，我们使用数据连接向导将数据库product的数据表fruitInfo连接到网页，此举将生成以下3个数据控件：sqlConnecton1、sqlDataAdapter1和dataSet11。 (三)编辑项模板 DataList控件的模板生成器可以方便地生成项模
8、板、页眉页脚模板和分隔符模板。项模板的使用方法: 将DataList控件拖至页面，右击控件DataList弹出快捷菜单，在快捷菜单上单击【编辑模板】，会弹出它的子菜单如下图。,在子菜单上单击【项模板】，打开项模板编辑器如下图。,二、DataList控件的模板编辑器（2/9）,在项模板编辑器中有4个编辑区，分别用来编辑ItemTemplate项模板、AlternatingItemTemplate交替项模板、SelecteItemTemplate选择项模板和EditItemTemplate编辑项模板。 (四)编辑ItemTemplate项模板 ItemTemplate项模板是必选的模板，它确定Da
9、taList控件需要显示的数据项及其布局。鼠标单击ItemTemplate下的编辑区，可以看到有输入光标出现，这意味着可以向编辑区加入子控件或在编辑区内直接输入文本。数据源的数据字段需要通过加入的子控件表现，方法是将子控件绑定到数据源的字段上。如果有必要对这些数据进行必要的说明，就直接在编辑区输入说明性文本就可以了。,二、DataList控件的模板编辑器（3/9）,向ItemTemplate模板的编辑区中拖入6个Label控件，以便每个Label对应于一个字段数据，并在编辑区最后面输入一个“元”字。如右图。,接下来需要将各个Label控件绑定到数据源的对应字段。选中第一个子控件Label1，右
10、击它打开其属性窗口，单击“（DataBindings）”属性后的打开按钮“”,打开Label1控件的数据绑定对话框，如下图。,二、DataList控件的模板编辑器（4/9）,在数据绑定对话框左侧的可绑定属性列表中选中“Text”,在右侧绑定操作区单击“自定义绑定表达式”，于其下的编辑区内输入绑定表达式DataBinder.Eval(Container.DataItem,“商品编号“)，将控件Label1绑定到数据源的商品编号字段。,二、DataList控件的模板编辑器（5/9）,此举使得在HTML标记中生成标记： 如果在上图的数据绑定对话框中选择“简单绑定”方式，则还需要切换到HTML视图中修
11、改绑定表达式，反而比较麻烦。 依次对其余5个Label控件做相同的操作，注意在编辑自定义绑定表达式时，数据源字段名称需要与子控件表达的数据对应。完成数据绑定操作后，在项模板编辑器上击右键，于弹出的快捷菜单上击【结束模板编辑】。,二、DataList控件的模板编辑器（6/9）,(五)编辑页眉和页脚模板 再次在DataList1上击右键，选择“页眉和页脚模板”就可以打开页眉和页脚模板编辑器，如右图。,分别在页眉和页脚模板的编辑区输入相应的文本，并做简单的格式设置。在控件DataList1击右键后单击【结束模板编辑】，结束页眉和页脚模板的编辑工作。,二、DataList控件的模板编辑器（7/9）,（
12、六）编写Code_Bihand代码 在页面加载时填充数据集，指定控件DataList1的数据源并做绑定。 private void Page_Load(object sender, System.EventArgs e) if(!IsPostBack) /填充数据集 sqlDataAdapter1.Fill(dataSet11,“fruitInfo“); /数据绑定 DataList1.DataSource=dataSet11.Tables“fruitInfo“.DefaultView; DataList1.DataBind(); ,二、DataList控件的模板编辑器（8/9）,程序运行结果
13、如下图。,二、DataList控件的模板编辑器（9/9）,三、DataList控件的属性生成器 （1/4）,DataList控件有很多属性用来控制其布局和外观，通过设置这些属性可以更生动地展示数据。当然可以象其他控件一样在属性窗口中进行属性设置，或在程序代码（Code_Behind代码或HTML标记）中设置，但对于 DataList控件和接下来要讲到的DataGrig控件，使用属性生成器来设置这些属性是一种便捷的方法。,DataList控件的属性生成器如右图。从图可以看到，属性的设置分常规、格式和边框3页进行。图中为常规页。 1.常规页 常规页用来设置数据项、页眉和页脚以及重复布局，从上至下说
14、明各设置项的含义。,数据组中的数据源、数据成员和数据键字段3项分别对应DataSource、DataMember和DataKeyField三个数据属性。 页眉页脚中的显示页眉和显示页脚分别对应ShowHeader和ShowFooter属性。 重复布局组的列、方向和布局分别对应RepeatColumns、RepeatDirection和RepeatLayout属性。,三、DataList控件的属性生成器 （2/4）,2.格式页 格式页如右图。 格式页用来设置外观，右侧的各个选项的含义十分清楚，注意要将外观设置与对象对应起来，图中当前设置的是普通项的外观。,三、DataList控件的属性生成器 （
15、3/4）,3.边框页 边框页如右图。 边框页设置边框的颜色、宽度和单元格间距等。如果想设置是否需要边框，应该在常规页中的“布局”中选择表（有边框）或流（无边框）。,三、DataList控件的属性生成器 （4/4）,四、DataList控件应用之一 （1/7）,（一）示例 在DataList控件中显示fruitInfo数据表中水果信息，包括它的图片。 创建一个Web应用程序项目，加入DataList控件到页面。 1.自动套用格式 在DataList控件上击右键，在快捷菜单上单击【自动套用格式】，在自动套用格式对话框中选择一种格式。 2.编辑项模板 打开项模板编辑器，如右图。 选中子控件Label
16、1，使出现8个控制点而成为活动控件，打开它的属性窗口，在属性(DataBindings)右侧单击“”打开按钮，打开子控件Label1的数据绑定对话框。,在属性窗口左边的“可绑定属性(B)”列表中选中Text属性，在右下部的“自定义绑定表达式(C)”编辑框中输入表达式DataBinder.Eval(Container.DataItem,”商品名称”)，单击【确定】按钮完成子控件Label1的数据绑定操作。,四、DataList控件应用之一 （2/7）,以相同的方法顺次将 Label2、Label3和Label4分别绑定到数据字段“产地”、“等级”和“价格”。图片控件Image1绑定到字段“图片URL”的做法见右图。,四、DataList控件应用之一 （3/7）,数据绑定完成后，右击模板编辑器弹出快捷菜单，于快捷菜单上单击【结束模板编辑】。,(二)编辑页眉和页脚模板 打开页眉和页脚模板编辑器如右图。,在页眉和页脚编辑区分别输入页眉和页脚文本，并对文本作必要的格式设置。例如这里可以看到页眉文本的字体和字号都有一些变
