《ASP-NET程序设计》-说课课件-数据绑定控件的使用(三)数据绑定控件DataList的使用

单元六数据绑定控件的使用（三）数据绑定控件DataList主讲教师：宋园园单元六数据绑定控件的使用（三）主讲教师：宋园园学习目标【知识目标】了解数据绑定控件DataLsit的常用属性方法；掌握数据绑定控件DataList的应用过程

【技能目标】能够熟练应用DataList控件显示数据；注：本课内容参考教材单元六学习目标【知识目标】注：学习提纲DataList控件概述DataList控件的属性生成器DataList控件的模板DataList控件实例学习提纲DataList控件概述DataList控件概述

DataList控件也是以模板为基础的数据绑定控件，与Repeater控件有许多相似之处。可以定义Repeater控件所具有的5个模板，还增加了SelectedItemTemplate模板（定义选定项的内容和布局）和EditItemTemplate模板（定义当前编辑项的内容和布局）。与Repeater控件相比较，DataList控件最大的优势在于它有内置的样式和属性，可以使用模板编辑器和属性生成器来设计模板和设置属性，并支持分页和排序，由于增加了2个模板，功能上更加强大。(一)HTML标记<asp:DataListid="DataList1"runat="server"> <%--各种模板标记--%></asp:DataList>

DataList控件概述DataList控件也是以模板为基(二)常用属性DataSource属性：绑定到控件的数据源，可以是数组、数据集、数据视图等。DataList控件将其ItemTemplate模板和AlternatingItemTemplate模板绑定到DataSource属性声明和引用的数据模型上。DataMember属性：若DataSource属性指定的是一个数据集，则DataMember属性指定到该数据集的一个数据表。DataKeyField属性：用于填充DataKey集合的数据源中的字段，一般应指定到数据表的主键字段。RepeatColumns属性：用于布局中的列数，默认值为0（一列）。RepeatDirection属性：用于布局中的方向，默认为Vertical(垂直布局)，也可以选择Horizontal(水平布局)RepeatLayout属性：控件的布局形式，当为Table时，以表格形式显示数据；为Flow时将不以表格形式显示数据。SelectedIndex属性：当前选定项的索引号，未选中任何项时为-1。DataList控件概述

(二)常用属性DataList控件概述(三)常用事件DataList是容器控件，在DataList内可以加入其他子控件。子控件本身可以引发事件（例如Button控件的Click事件），事件会反升至容器控件（也就是DataList控件），这样的事件就称为反升事件。这时事件处理程序不再写在子控件的事件中，而是要写在DataList控件的反升事件中。按钮子控件与反升事件的名称对应取决于按钮的CommandName属性，对应规则为：

按钮的CommandName属性设置为delete，将引发DataList控件的DeleteCommand事件。

按钮的CommandName属性设置为update，将引发DataList控件的UpdateCommand事件。

按钮的CommandName属性设置为edit，将引发DataList控件的EditCommand事件。

按钮的CommandName属性设置为cancel，将引发DataList控件的CancelCommand事件。DataList控件概述

(三)常用事件DataList控件概述

若按钮的CommandName属性设置不为上述各项，将引发DataList控件的ItemCommand事件。

特别地，按钮的CommandName属性设置为select，除了引发DataList控件的ItemCommand事件外，还会引发SelectedIndexChange事件。ItemCommand事件：在控件生成事件时发生。向DataList控件加入按钮类控件的CommandName属性可以设置成除上述规定外的任何名字，当这些按钮被单击时，都将引发ItemCommand事件，在这个事件处理程序中通过判别按钮控件的CommandName属性就知道单击的是哪个按钮。SelectedIndexChange事件：当控件内的选择项发生改变后激发。ItemCreated事件：在控件内创建项时激发。若要对控件内的子控件做某些初始设置时，可以利用这个事件，如此正当其时。子控件的初始设置不能够放在Page_Load中做，在那里访问不到这些子控件，因为它们被包含到了容器控件中。DataList控件概述

若按钮的CommandName属性设置不为上述各项，将引DataList控件的属性生成器DataList控件有很多属性用来控制其布局和外观，通过设置这些属性可以更生动地展示数据。当然可以象其他控件一样在属性窗口中进行属性设置，或在程序代码（Code_Behind代码或HTML标记）中设置，但对于DataList控件，使用属性生成器来设置这些属性是一种便捷的方法。DataList控件的属性生成器DataList控件有很多DataList控件的属性生成器如右图。从图可以看到，属性的设置分常规、格式和边框3页进行。图中为常规页。1.常规页常规页用来设置数据项、页眉和页脚以及重复布局，从上至下说明各设置项的含义。数据组中的数据源、数据成员和数据键字段3项分别对应DataSource、DataMember和DataKeyField三个数据属性。页眉页脚中的显示页眉和显示页脚分别对应ShowHeader和ShowFooter属性。重复布局组的列、方向和布局分别对应RepeatColumns、RepeatDirection和RepeatLayout属性。

DataList控件的属性生成器DataList控件的属性生成器如右图。从图可以看到，属性的2.格式页格式页如右图。格式页用来设置外观，右侧的各个选项的含义十分清楚，注意要将外观设置与对象对应起来，图中当前设置的是普通项的外观。DataList控件的属性生成器2.格式页DataList控件的属性生成器3.边框页边框页如右图。边框页设置边框的颜色、宽度和单元格间距等。如果想设置是否需要边框，应该在常规页中的“布局”中选择表（有边框）或流（无边框）。DataList控件的属性生成器3.边框页DataList控件的属性生成器

不同的数据绑定控件的功能各不相同，其模板拥有模板也不完全相同，表6-6是常用的数据绑定模板。表6-6常用的数据绑定模板数据绑定控件常见模板DataList控件的模板不同的数据绑定控件的功能各不相同，其模板拥有模板也不完全模板中使用的数据既可以自动绑定到数据源，也可以手动绑定到数据源，数据绑定完整的语法为：DataBinder.Eval(Container.DataItem,FieldName)

上述写法为之前版本定义的完整语法，是标准的数据绑定语法，现在中可以简化地写为：Eval(FieldName)

2．数据绑定的基本语法DataList控件的模板模板中使用的数据既可以自动绑定到数据源，也可以手动绑定到数据HeaderTemplate模板

FooterTemplate模板

页眉和页脚的模板包括

用于修改数据显示区域上部的信息，

修改数据显示区域尾部信息。

这两个模板一般用于输入文字，并可以利用VisualStudio2008菜单的“格式”菜单项对字体、字号、字色等进行设置，与Word中文字设置方法相同。3．页眉和页脚模板的基本使用方法DataList控件的模板HeaderTemplate模板FooterTemplat

实例1：设置页眉。现以DataList控件为例，操作时，首先单击控件右侧“<”，调出该控件的任务栏，然后单击其上面的“编辑模板”，调出“模板编辑模式”窗口。说明如下所示：单击进入模板编辑模式选择模板DataList控件实例实例1：设置页眉。现以DataList控件为例，操作

实例2：设置页脚。在上例中选中页脚设置模板，并输入“当前日期是：”，切换到源视图，输入如下代码：<FooterTemplate>

当前日期是：<%=DateTime.Now.ToShortDateString()%></FooterTemplate>

运行后将在数据显示区下面显示当前日期。同样也可以在此处添加任意控件，并与数据进行绑定。

DataList控件实例实例2：设置页脚。在上例中选中页脚设置模板，并输入“当

图中，单击左侧标题修改文字，同时可以对文字进行字体、字号、字色、位置的设定。当鼠标放在右侧中括号内数据绑定控件时，其右侧将显示一个“<”，单击此符号后可以对该字段进行编辑。完成修改后，单击“结束模板编辑”返回即可。单击后编辑文字单击后编辑字段

编辑模板图中，单击左侧标题修改文字，同时可以对文字进行字体、图

在页脚中编写代码图在页脚中编写代码

项模板的基本使用方法

常见的项模板包括

ItemTemplate

AlternatingItemTemplate

SelectedItemTemplate

EditItemTemplate

这些模板主要用来显示数据，其主要操作是对显示的文字内容的修改、显示风格的修改、对齐方式的修改等。

项模板的基本使用方法常见的项ItemTemplateA在DataList中显示数据<%@PageLanguage="C#"%><%@ImportNamespace="System.Data.SqlClient"%><scriptrunat=server>voidPage_Load(Objectsender,EventArgse){SqlConnectionconn;SqlCommandcmd;SqlDataReaderdr;conn=newSqlConnection("Server=localhost;Database=Pubs;uid=cdd;psw=123");cmd=newSqlCommand("Selectau_fnameFromauthors",conn);conn.Open();dr=cmdSelect.ExecuteReader();DataList1.DataSource=dr;DataList1.DataBind();dr.Close();conn.Close();}</Script><html><head><title>DataList.aspx</title></head><body><formRunat="Server"><asp:DataListID="DataList1"Runat="Server"><ItemTemplate><%#DataBinder.Eval(Container.DataItem,"au_fname")%></ItemTemplate></asp:DataList></form></body></html>在DataList中显示数据<%@PageLanguag在DataList中显示数据在DataList中显示记录时，authors表中每行都显示在独立的HTML表格中，只要你愿意，也可以修改其RepeatLayout属性把DataList的项显示在HTML的<div></div>中。在默认情况下，RepeatLayout属性值为Table。如果把RepeatLayout属性设为Flow，那么每个项就显示在<div></div>中。<asp:DataListRepeatLayout=”Flow”Runat=”Server”>当RepeatLayout属性为Table时，通过设置GridLines属性可以在每个单元格周围显示线条。GridLines属性可选值有：Both/Horizontal/Vertical在DataList中显示数据在DataList中显示记录时，在DataList中创建多列DataList的一个好处的特征是可以以多个列显示数据现。通过设置其RepeatColumns和RepeatDirection属性，可以控制DataList的列的布局。RepeatColumns属性决定要显示的列的数量。比如，如果要在DataList中显示四列的项，那么可以把这个属性设为4。RepeatDirection属性句顶列是按水平或垂直方向来重复。在默认情况下，RepeatDirection值为Vertical，因此，如果RepeatColumns值为4，则列就像这样显示：Column1Column3Column5Column7Column2Column4Column6Column8如果把RepeatDirection设为Horizontal，而且RepeatColumns值为4，那么列就像这样显示：Column1Column3Column5Column7Column2Column4Column6Column8注意，即使RepeatDirection值为Vertical，还是显示为4个列。RepeatColumns永远是指重复的列的数量，而不是行的数量。在DataList中创建多列DataList的一个好处的特捕获DataList控件中产生的事件 DataList控件可以捕获DataList内包含的控件产生的事件，并且通过普通的子程序处理这些事件，这也就是事件冒泡。如果没有事件冒泡，那么对于DataList内包含的每一个控件产生的事件都需要定义一个相应的处理函数，如果DataList中包含10000个控件呢？或者更多呢？那我们得写多少个事件处理程序。所以有了事件冒泡，不管DataList中包含多少个控件，我们只需要一个处理程序就可以了。DataList控件支持五个事件：1)EditCommand：由带有CommandName=”edit”的子控件产生2)CancelCommand：由带有CommandName=”cancel”的子控件产生3)UpdateCommand：由带有CommandName=”update”的子控件产生4)DeleteCommand：由带有CommandName=”delete”的子控件产生5)ItemCommand：DataList的默认事件有了这五个事件，那么当我点击了DataList控件中的某一个按钮的时候，应该触发哪一个事件呢？什么时候才触发它们呢？在ASP.NET中有三个控件带有CommandName属性，分别是Button、LinkButton和ImageButton，可以设置它们的CommandName属性来表示容器控件内产生的时间类型。比如，如果设置DataList中的一个LinkButton的CommandName属性为“update”，那么点击此按钮的时候，将会触发DataList的CancelCommand事件，我们可以将相关处理代码写到对应的事件处理程序中去。捕获DataList控件中产生的事件 DataLi项目实训【实训目的】1.掌握DataList控件的属性方法。【实训内容】1.编写页面应用DataList显示信息。项目实训【实训目的】单元六数据绑定控件的使用（三）数据绑定控件DataList主讲教师：宋园园单元六数据绑定控件的使用（三）主讲教师：宋园园学习目标【知识目标】了解数据绑定控件DataLsit的常用属性方法；掌握数据绑定控件DataList的应用过程

【技能目标】能够熟练应用DataList控件显示数据；注：本课内容参考教材单元六学习目标【知识目标】注：学习提纲DataList控件概述DataList控件的属性生成器DataList控件的模板DataList控件实例学习提纲DataList控件概述DataList控件概述

DataList控件也是以模板为基础的数据绑定控件，与Repeater控件有许多相似之处。可以定义Repeater控件所具有的5个模板，还增加了SelectedItemTemplate模板（定义选定项的内容和布局）和EditItemTemplate模板（定义当前编辑项的内容和布局）。与Repeater控件相比较，DataList控件最大的优势在于它有内置的样式和属性，可以使用模板编辑器和属性生成器来设计模板和设置属性，并支持分页和排序，由于增加了2个模板，功能上更加强大。(一)HTML标记<asp:DataListid="DataList1"runat="server"> <%--各种模板标记--%></asp:DataList>

DataList控件概述DataList控件也是以模板为基(二)常用属性DataSource属性：绑定到控件的数据源，可以是数组、数据集、数据视图等。DataList控件将其ItemTemplate模板和AlternatingItemTemplate模板绑定到DataSource属性声明和引用的数据模型上。DataMember属性：若DataSource属性指定的是一个数据集，则DataMember属性指定到该数据集的一个数据表。DataKeyField属性：用于填充DataKey集合的数据源中的字段，一般应指定到数据表的主键字段。RepeatColumns属性：用于布局中的列数，默认值为0（一列）。RepeatDirection属性：用于布局中的方向，默认为Vertical(垂直布局)，也可以选择Horizontal(水平布局)RepeatLayout属性：控件的布局形式，当为Table时，以表格形式显示数据；为Flow时将不以表格形式显示数据。SelectedIndex属性：当前选定项的索引号，未选中任何项时为-1。DataList控件概述

(二)常用属性DataList控件概述(三)常用事件DataList是容器控件，在DataList内可以加入其他子控件。子控件本身可以引发事件（例如Button控件的Click事件），事件会反升至容器控件（也就是DataList控件），这样的事件就称为反升事件。这时事件处理程序不再写在子控件的事件中，而是要写在DataList控件的反升事件中。按钮子控件与反升事件的名称对应取决于按钮的CommandName属性，对应规则为：

按钮的CommandName属性设置为delete，将引发DataList控件的DeleteCommand事件。

按钮的CommandName属性设置为update，将引发DataList控件的UpdateCommand事件。

按钮的CommandName属性设置为edit，将引发DataList控件的EditCommand事件。

按钮的CommandName属性设置为cancel，将引发DataList控件的CancelCommand事件。DataList控件概述

(三)常用事件DataList控件概述

若按钮的CommandName属性设置不为上述各项，将引发DataList控件的ItemCommand事件。

特别地，按钮的CommandName属性设置为select，除了引发DataList控件的ItemCommand事件外，还会引发SelectedIndexChange事件。ItemCommand事件：在控件生成事件时发生。向DataList控件加入按钮类控件的CommandName属性可以设置成除上述规定外的任何名字，当这些按钮被单击时，都将引发ItemCommand事件，在这个事件处理程序中通过判别按钮控件的CommandName属性就知道单击的是哪个按钮。SelectedIndexChange事件：当控件内的选择项发生改变后激发。ItemCreated事件：在控件内创建项时激发。若要对控件内的子控件做某些初始设置时，可以利用这个事件，如此正当其时。子控件的初始设置不能够放在Page_Load中做，在那里访问不到这些子控件，因为它们被包含到了容器控件中。DataList控件概述

若按钮的CommandName属性设置不为上述各项，将引DataList控件的属性生成器DataList控件有很多属性用来控制其布局和外观，通过设置这些属性可以更生动地展示数据。当然可以象其他控件一样在属性窗口中进行属性设置，或在程序代码（Code_Behind代码或HTML标记）中设置，但对于DataList控件，使用属性生成器来设置这些属性是一种便捷的方法。DataList控件的属性生成器DataList控件有很多DataList控件的属性生成器如右图。从图可以看到，属性的设置分常规、格式和边框3页进行。图中为常规页。1.常规页常规页用来设置数据项、页眉和页脚以及重复布局，从上至下说明各设置项的含义。数据组中的数据源、数据成员和数据键字段3项分别对应DataSource、DataMember和DataKeyField三个数据属性。页眉页脚中的显示页眉和显示页脚分别对应ShowHeader和ShowFooter属性。重复布局组的列、方向和布局分别对应RepeatColumns、RepeatDirection和RepeatLayout属性。

DataList控件的属性生成器DataList控件的属性生成器如右图。从图可以看到，属性的2.格式页格式页如右图。格式页用来设置外观，右侧的各个选项的含义十分清楚，注意要将外观设置与对象对应起来，图中当前设置的是普通项的外观。DataList控件的属性生成器2.格式页DataList控件的属性生成器3.边框页边框页如右图。边框页设置边框的颜色、宽度和单元格间距等。如果想设置是否需要边框，应该在常规页中的“布局”中选择表（有边框）或流（无边框）。DataList控件的属性生成器3.边框页DataList控件的属性生成器

不同的数据绑定控件的功能各不相同，其模板拥有模板也不完全相同，表6-6是常用的数据绑定模板。表6-6常用的数据绑定模板数据绑定控件常见模板DataList控件的模板不同的数据绑定控件的功能各不相同，其模板拥有模板也不完全模板中使用的数据既可以自动绑定到数据源，也可以手动绑定到数据源，数据绑定完整的语法为：DataBinder.Eval(Container.DataItem,FieldName)

上述写法为之前版本定义的完整语法，是标准的数据绑定语法，现在中可以简化地写为：Eval(FieldName)

2．数据绑定的基本语法DataList控件的模板模板中使用的数据既可以自动绑定到数据源，也可以手动绑定到数据HeaderTemplate模板

FooterTemplate模板

页眉和页脚的模板包括

用于修改数据显示区域上部的信息，

修改数据显示区域尾部信息。

这两个模板一般用于输入文字，并可以利用VisualStudio2008菜单的“格式”菜单项对字体、字号、字色等进行设置，与Word中文字设置方法相同。3．页眉和页脚模板的基本使用方法DataList控件的模板HeaderTemplate模板FooterTemplat

实例1：设置页眉。现以DataList控件为例，操作时，首先单击控件右侧“<”，调出该控件的任务栏，然后单击其上面的“编辑模板”，调出“模板编辑模式”窗口。说明如下所示：单击进入模板编辑模式选择模板DataList控件实例实例1：设置页眉。现以DataList控件为例，操作

实例2：设置页脚。在上例中选中页脚设置模板，并输入“当前日期是：”，切换到源视图，输入如下代码：<FooterTemplate>

当前日期是：<%=DateTime.Now.ToShortDateString()%></FooterTemplate>

运行后将在数据显示区下面显示当前日期。同样也可以在此处添加任意控件，并与数据进行绑定。

DataList控件实例实例2：设置页脚。在上例中选中页脚设置模板，并输入“当

图中，单击左侧标题修改文字，同时可以对文字进行字体、字号、字色、位置的设定。当鼠标放在右侧中括号内数据绑定控件时，其右侧将显示一个“<”，单击此符号后可以对该字段进行编辑。完成修改后，单击“结束模板编辑”返回即可。单击后编辑文字单击后编辑字段

编辑模板图中，单击左侧标题修改文字，同时可以对文字进行字体、图

在页脚中编写代码图在页脚中编写代码

项模板的基本使用方法

常见的项模板包括

ItemTemplate

AlternatingItemTemplate

SelectedItemTemplate

EditItemTemplate

这些模板主要用来显示数据，其主要操作是对显示的文字内容的修改、显示风格的修改、对齐方式的修改等。

项模板的基本使用方法常见的项ItemTemplateA在DataList中显示数据<%@PageLanguage="C#"%><%@ImportNamespace="System.Data.SqlClient"%><scriptrunat=server>voidPage_Load(Objectsender,EventArgse){SqlConnectionconn;SqlCommandcmd;SqlDataReaderdr;conn=newSqlConnection("Server=localhost;Database=Pubs;uid=cdd;psw=123");cmd=newSqlCommand("Selectau_fnameFromauthors",conn);conn.Open();dr=cmdSelect.ExecuteReader();DataList1.DataSource=dr;DataList1.DataBind();dr.Close();conn.Close();}</Script><html><head><title>DataList.aspx</title></head><body><formRunat="Server"><asp:DataListID="DataList1"Runat="Server"><ItemTemplate><%#DataBinder.Eval(Container.DataItem,"au_fname")%></ItemTemplate></asp:DataList></form></body></html>在DataList中显示数据<%@PageLanguag在DataList中显示数据在DataList中显示记录时，authors表中每行都显示在独立的HTML表格中，只要你愿意，也可以修改其RepeatLayout属性把DataList的项显示在HTML的<div></div>中。在默认情况下，RepeatLayout属性值为Table。如果把RepeatLayout属性设为Flow，那么每个项就显示在<div></div>中。<asp:DataListRepeatLayout=”Flow”Runat=”Server”>当RepeatLayout属性为Table时，通过设置GridLines属性可以在每个单元格周围显示线条。GridLines属性可选值有：Both/Horizontal/Vertical在DataList中显示数据在DataList中显示记录时，在DataList中创建多列DataList的一个好处的特征是可以以