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