【教学课件】第08讲Repeater控件应用.ppt
第八讲 Repeater控件应用,教学内容 一、模板概述二、Repeater控件的项模板三、Repeater控件的交替项模板 四、Repeater控件的分隔模板五、Repeater控件的页眉和页脚模板,教学目标,理解模板的概念；掌握模板的编写方法；掌握Repeater控件各种模板的使用；掌握Repeater控件应用。,一、模板概述(1/2),模板（Template）就是样板或标准规格，在ASP.NET中模板是一个声明性页段落，其HTML标记为：模板包含表示元素，如原意文本、数据、格式标记等，它为模板化的ASP.NET服务器控件提供可视化界面。模板标记必须嵌套在它所属的模板控件的HTML标记之内。模板控件基于模板，是一种ASP.NET服务器控件，它本身不提供可视化界面，由程序员在HTML视图中标记或使用模板编辑器编辑生成。若模板控件中未定义任何模板，程序运行后在页面上不会有任何显示。当ASP.NET的Web应用程序页分析器发现模板控件时，它分析控件的模板，并动态地创建子控件，产生可视化界面。Repeater和DataList是两个典型的模板控件，它们基于模板技术。,ASP.NET有7种模板，Repeater控件只能使用其中的5种，而DataList控件可以使用全部的7种模板。下表列出了这些模板。注：备注列中标有*者Repeater控件不可用,一、模板概述(2/2),二、Repeater控件的项模板(1/7),Repeater控件Repeater控件是一个根据模板定义样式循环显示数据的控件，它以没有预定义外观的方式显示数据源的内容，即没有内置的布局和样式，必须在控件所应用的模板内显式声明所有的HTML布局、格式设置和样式标记，用来实现界面的可视化。当网页执行时，Repeater服务器控件会循环处理数据源的所有数据记录，并将每一笔数据呈现到一个“项”或“交替项”。1.HTML标记 2.常用属性 DataSource属性：绑定到控件的数据源，可以是数组、数据集、数据视图等。Repeater控件将其ItemTemplate模板和AlternatingItemTemplate模板绑定到DataSource属性声明和引用的数据模型上。,DataMember属性：若DataSource属性指定的是一个数据集，则DataMember属性指定到该数据集的一个数据表。由于Repeater控件没有内置的布局和样式，设计阶段将Repeater控件加至网页后，切换至HTML视图手工编辑它的各种模板是使用Repeater控件的一项重要的设计操作。ItemTemplate项模板 ItemTemplate称为项模板，它定义Repeater控件显示项的内容和布局。该模板是Repeater控件的必选模板，若Repeater控件内没有ItemTemplate项模板或AlternatingItemTemplate交替项模板之一，控件就没有要显示的数据项，失去了使用Repeater控件的意义。,二、Repeater控件的项模板(2/7),ItemTemplate模板的HTML标记为：Repeater控件的所有模板必须由程序员在页面的HTML视图内手工编辑它的标记，模板控件的任何一个模板标记必须嵌套在控件的HTML标记之内，ItemTemplate模板也不能例外。ItemTemplate项模板应用示例1.准备数据库 为了演示定义Repeater控件的项模板来显示数据库中的数据，为此，建立一个数据库product，其下建立一个数据表fruitInfo，记录某商业企业的水果信息。该数据表的结构如下表。,二、Repeater控件的项模板(3/7),本章中的示例会多次使用到这个数据表，为了测试程序效果，向数据表fruitInfo内输入若干条记录,二、Repeater控件的项模板(4/7),2.使用项模板以下将数据库product的数据表fruitInfo中商品名称、产地、单价3个字段的内容用Repeater控件显示出来。从工具箱将Repeater控件拖入页面，生成一个控件对象Repeater1。在后台代码中连接数据库，并将Repeater控件绑定到数据源。在HTML视图中手工编辑ItemTemplate模板。,二、Repeater控件的项模板(5/7),在页面的HTML代码中最重要的标记为红色的3行，称为数据绑定表达式。形如：,二、Repeater控件的项模板(6/7),运行程序得到结果如右图。,二、Repeater控件的项模板(7/7),三、Repeater控件的交替项模板(1/4),AlternatingItemTemplate用于定义交替项呈现的内容和布局。所谓的交替项方式，就是在Repeater控件和DataList控件中允许奇偶项以不同的内容和布局形式显示数据，其中奇数行由AlternatingItemTemplate模板定义（索引号从1开始），偶数行由ItemTemplate模板定义（索引号从0开始）。若仅定义了ItemTemplate模板而未定义AlternatingItemTemplate模板，则所有行全部按ItemTemplate模板指定的数据与布局形式显示。若仅定义了AlternatingItemTemplate模板而未定义ItemTemplate模板，则仅显示AlternatingItemTemplate模板指定的数据与布局形式的奇数行，偶数行不会显示。若这两种项模板都未定义，则什么数据都不会显示，那是没有意义的。AlternatingItemTemplate模板的HTML标记为：,因为AlternatingItemTemplate模板内含数据项，所以Repeater控件使用该模板时，也必须进行数据绑定，绑定方式同ItemTemplate模板。为了说明AlternatingItemTemplate模板的使用方法和使用的效果，在上例中加进一个AlternatingItemTemplate模板，其页面的HTML视图变为下面的形式。,三、Repeater控件的交替项模板(2/4),三、Repeater控件的交替项模板(3/4),在标签内增加了一个标签，它是交替项标签。交替项模板所指定的数据项与项模板所指定的数据项相同，它们显示同样的字段数据，不过显示的文本的字体与颜色是不同的。不需要修改任何后台代码，运行程序，效果如右图。,AlternatingItemTemplate交替项模板定义的是红色的黑体粗字，而ItemTemplate模板定义的是蓝色的宋体，使得页面有了一些变化。,三、Repeater控件的交替项模板(4/4),四、Repeater控件的分隔模板(1/4),SeparatorTemplate模板用于定义Repeater控件各项之间的分隔符。SeparatorTemplate模板所定义的分隔符为自定义样式，允许程序员使用任何合法的字符作为分隔符元素，例如：横线（-），竖线（|），句点（.）和冒号（:）等，程序员可以根据自己的喜好和数据内容表现的要求来选用，这也体现了Repeater控件的灵活性。SeparatorTemplaet模板的HTML标记为：如果Repeater控件定义了SeparatorTemplat模板，则在各数据项之间出现分隔，包括交替项也是如此。各项之间有了分隔，可能使数据项更具条理性，有助于阅读。,对上例加入一个SeparatorTemplat分隔模板。,四、Repeater控件的分隔模板(2/4),td-,四、Repeater控件的分隔模板(3/4),向Repeater控件的标记中加入了一个标签，就为控件增加了一个分隔模板。Repeater控件内的模板标记没有先后顺序之分，只要各模板彼此独立就是了。运行后的效果如右图。,四、Repeater控件的分隔模板(4/4),五、Repeater控件的页眉和页脚模板(1/3),HeaderTemplate模板和FooterTemplate模板分别定义Repeater控件的页眉和页脚的内容和布局。HeaderTemplate模板的HTML标记为：FooterTemplate模板的HTML标记为：Repeater控件有了页眉和页脚后，看起来不至于显得无头无尾，表现力更强一些。我们重新来构造上例Repeater控件，加入一个页眉模板、一个页脚模板和一个项模板。页面的HTML代码如下。,水果品种-欢迎选购,五、Repeater控件的页眉和页脚模板(2/3),五、Repeater控件的页眉和页脚模板(3/3),可以看到，各模板的定义顺序是可以随意的，甚至可以将页脚模板放在最前面，但它总是显示在页脚的位置。程序运行后的效果如右图。,
