第十九讲 Repeater控件应用教学目的：
理解模板的概念；
掌握模板的编写方法；
掌握 Repeater控件各种模板的使用；
掌握 Repeater控件应用 。
教学重点：
一、模板概述
二,Repeater控件的项模板
三,Repeater控件的交替项模板
四,Repeater控件的分隔模板
五,Repeater控件的页眉和页脚模板一、模板概述模板 （ Template）就是样板或标准规格，在 ASP.NET中模板是一个声明性页段落，其 HTML标记为：
<TemplateName>
<%--该模板内显示的内容与布局 --%>
</TemplateName>
模板包含表示元素，如原意文本、数据、格式标记等，
它为模板化的 ASP.NET服务器控件提供可视化界面。模板标记必须嵌套在它所属的模板控件的 HTML标记之内。
模板控件 基于模板，是一种 ASP.NET服务器控件，它本身不提供可视化界面，由程序员 在 HTML视图中标记或使用模板编辑器编辑生成。 若模板控件中未定义任何模板，程序运行后在页面上不会有任何显示。当 ASP.NET的 Web应用程序页分析器发现模板控件时，它分析控件的模板，并动态地创建子控件，产生可视化界面。
ASP.NET有 7种模板,Repeater控件只能使用其中的 5种，
而 DataList控件可以使用全部的 7种模板。下表列出了这些模板。注：备注列中标有 *者 Repeater控件不可用模板名称 含义 功能 备注
ItemTemplate 项模板 定义显示项的内容和布局
HeaderTemplate 页眉模板 定义页眉的内容和布局
FooterTemplate 页脚模板 定义页脚的内容和布局
AlternatingItemTemplate 交替项模板 定义交替项的内容和布局
SeparatorTemplate 分隔符模板 定义在项之间的分隔符
SelectedItemTemplate 选定项模板 定义选定项的内容和布局 *
EditItemTemplate 编辑项模板 定义当前编辑项的内容和布局
*
二,Repeater控件
Repeater控件是一个 根据模板定义样式循环显示数据的控件,它以没有预定义外观的方式显示数据源的内容，即没有内置的布局和样式,必须在控件所应用的模板内显式声明所有的 HTML布局、格式设置和样式标记，用来实现界面的可视化。 当网页执行时，
Repeater服务器控件会循环处理数据源的所有数据记录，并将每一笔数据呈现到一个“项”或“交替项”。
1.HTML标记
<asp:Repeater id="Repeater1"
runat="server">
<%--各种模板标记 --%>
</asp:Repeater>
2.常用属性
DataSource,绑定到控件的数据源，可以是数组、数据集、数据视图等。 Repeater
控件将其 ItemTemplate模板和
AlternatingItemTemplate模板绑定到
DataSource属性声明和引用的数据模型上。
DataMember,若 DataSource属性指定的是一个数据集，则 DataMember属性指定到该数据集的一个 数据表。
Controls,Reapter控件中子控件的集合
3、常用事件
ItemCommand:单击控件中的按钮时发生
ItemCreate:控件中的项创建时发生
ItemDataBound:控件中的项被数据绑定之后发生
ItemTemplate项模板它定义 Repeater控件显示项的内容和布局。 该模板是 Repeater控件的必选模板，若
Repeater控件内没有 ItemTemplate项模板或
AlternatingItemTemplate交替项模板之一，
控件就没有要显示的数据项，失去了使用
Repeater控件的意义。
ItemTemplate模板的 HTML标记为：
<ItemTemplate>
<%--该模板内显示的内容与布局 --%>
</ItemTemplate>
列名 数据类型 长度 允许空 是否主键商品编号 char 10 No Yes
商品名称 char 20 No No
等级 char 10 No No
产地 char 20 No No
供货商 char 20 No No
计量单位 char 10 No No
单价 float 8 No No
数量 float 8 No No
图片 URL char 20 Yes No
详情网页 URL char 20 Yes No
ItemTemplate项模板应用示例
1.准备数据库
2.使用项模板以下将数据库 product的数据表 fruitInfo中商品名称、
产地、单价 3个字段的内容用 Repeater控件显示出来。
①从工具箱将 Repeater控件拖入页面，生成一个控件对象 Repeater1。
②通过配置数据源将 Repeater控件绑定到数据源。
③在 HTML视图中手工编辑 ItemTemplate模板。
<form id=”Form1” method=”post” runat=”server”>
<% =” 品名 产地 单价” %> <%--显示 Repeater控件的头部 --%>
<asp:repeater id=”Repeater1” runat=”server”>
<ItemTemplate>
<p>
<%#DataBinder.Eval(Container.DataItem,” 商品名称” )%>
<%#DataBinder.Eval(Container.DataItem,” 产地” )%>
<%#DataBinder.Eval(Container.DataItem,” 单价” )%>
</p>
</ItemTemplate>
</asp:repeater>
</form>
在页面的 HTML代码中最重要的标记为红色的 3行，称为数据绑定表达式。形如：
<%#DataBinder.Eval(Container.DataItem,” 商品名称” )%>
运行程序得到结果如右图。
★ DataBinder.Eval()函数格式：
<%# DataBinder.Eval(Container.DataItem
,,字段名”,格式化字符串 ) %>
例如：
<%# DataBinder.Eval(Container.DataItem
,"Company","{0:yyyy-M-d}")%>
三,Repeater控件的交替项模板
AlternatingItemTemplate用于定义交替项呈现的内容和布局。所谓的交替项方式，就是在 Repeater控件和 DataList控件中 允许奇偶项以不同的内容和布局形式显示数据，其中奇数行由 AlternatingItemTemplate模板定义（索引号从 1开始），
偶数行由 ItemTemplate模板定义（索引号从 0开始）。 若仅定义了 ItemTemplate模板而未定义 AlternatingItemTemplate模板，则所有行全部按 ItemTemplate模板指定的数据与布局形式显示。若仅定义了 AlternatingItemTemplate模板而未定义
ItemTemplate模板，则仅显示 AlternatingItemTemplate模板指定的数据与布局形式的奇数行，偶数行不会显示。若这两种项模板都未定义，则什么数据都不会显示，那是没有意义的。
AlternatingItemTemplate模板的 HTML标记为：
<AlternatingItemTemplate>
<%--该模板内显示的内容与布局 --%>
</AlternatingItemTemplate>
因为 AlternatingItemTemplate模板内含数据项，所以 Repeater
控件使用该模板时，也必须进行数据绑定，绑定方式同
ItemTemplate模板。
为了说明 AlternatingItemTemplate模板的使用方法和使用的效果，在上例中加进一个 AlternatingItemTemplate模板，其页面的
HTML视图变为下面的形式。
<form id="Form1" method="post" runat="server">
<% ="品名 产地 单价 "%> <%--显示 Repeater控件的头部 --%>
<asp:repeater id="Repeater1" runat="server">
<AlternatingItemTemplate>
<font face="黑体 " color="#ff0000"><p>
<b><%#DataBinder.Eval(Container.DataItem,"商品名称 ")%></b>
<b><%#DataBinder.Eval(Container.DataItem,"产地 ")%></b>
<b><%#DataBinder.Eval(Container.DataItem,"单价 ")%></b>
</p>
</font>
</AlternatingItemTemplate>
<ItemTemplate>
<font face="宋体 " color="#0000ff">
<p>
<%#DataBinder.Eval(Container.DataItem,"商品名称 ")%>
<%#DataBinder.Eval(Container.DataItem,"产地 ")%>
<%#DataBinder.Eval(Container.DataItem,"单价 ")%>
</p>
</font>
</ItemTemplate>
</asp:repeater>
</form>
在 < asp:repeater >标签内增加了一个 <AlternatingItemTemplate>
标签，它是交替项标签。交替项模板所指定的数据项与项模板所指定的数据项相同，它们显示同样的字段数据，不过显示的文本的字体与颜色是不同的。
不需要修改任何后台代码，运行程序，效果如右图。
AlternatingItemTemplate交替项模板定义的是红色的黑体粗字，而 ItemTemplate模板定义的是蓝色的宋体，使得页面有了一些变化。
四,Repeater控件的分隔模板
SeparatorTemplate模板用于定义 Repeater控件各项之间的分隔符。 SeparatorTemplate模板所定义的分隔符为自定义样式，允许程序员使用任何合法的字符作为分隔符元素，例如：横线（ --），竖线（ |），句点（,）和冒号（,）等，程序员可以根据自己的喜好和数据内容表现的要求来选用，这也体现了 Repeater控件的灵活性。
SeparatorTemplaet模板的 HTML标记为：
<SeparatorTemplate>
<%--显示项之间的分割符 --%>
</SeparatorTemplate>
如果 Repeater控件定义了 SeparatorTemplat模板，则在各数据项之间出现分隔，包括交替项也是如此。各项之间有了分隔，可能使数据项更具条理性，有助于阅读。
对上例加入一个 SeparatorTemplat分隔模板。
<form id="Form1" method="post" runat="server">
<% ="品名 产地 单价 "%> <%--显示 Repeater控件的头部 --%>
<asp:repeater id="Repeater1" runat="server">
<AlternatingItemTemplate>
<font face="黑体 " color="#ff0000">
<p>
<b><%#DataBinder.Eval(Container.DataItem,"商品名称 ")%></b>
<b><%#DataBinder.Eval(Container.DataItem,"产地 ")%></b>
<b><%#DataBinder.Eval(Container.DataItem,"单价 ")%></b>
</p> </font>
</AlternatingItemTemplate>
<ItemTemplate>
<font face="宋体 " color="#0000ff">
<p>
<%#DataBinder.Eval(Container.DataItem,"商品名称 ")%>
<%#DataBinder.Eval(Container.DataItem,"产地 ")%>
<%#DataBinder.Eval(Container.DataItem,"单价 ")%>
</p>
</font>
</ItemTemplate>
<SeparatorTemplate>
<tr>
td><b>-------------------</b></td>
</tr>
</SeparatorTemplate>
</asp:repeater>
</form>
向 Repeater控件的标记中加入了一个
<SeparatorTemplate>
标签，就为控件增加了一个分隔模板。
Repeater控件内的模板标记没有先后顺序之分，
只要各模板彼此独立就是了。运行后的效果如右图。
五,Repeater控件的页眉和页脚模板
HeaderTemplate模板和 FooterTemplate模板分别定义
Repeater控件的页眉和页脚的内容和布局。
HeaderTemplate模板的 HTML标记为：
<HeaderTemplate>
<%--页眉内容和布局 --%>
</HeaderTemplate>
FooterTemplate模板的 HTML标记为：
<FooterTemplate>
<%--页脚内容和布局 --%>
</FooterTemplate>
Repeater控件有了页眉和页脚后，看起来不至于显得无头无尾，表现力更强一些。我们重新来构造上例 Repeater控件，
加入一个页眉模板、一个页脚模板和一个项模板。页面的 HTML
代码如下。
<form id=”Form1” method=”post” runat=”server”>
<asp:repeater id=”Repeater1” runat=”server”>
<ItemTemplate> <p>
<%#DataBinder.Eval(Container.DataItem,”商品名称” )%>
<%#DataBinder.Eval(Container.DataItem,”产地” )%> </p>
</ItemTemplate>
<HeaderTemplate>
水果品种 <br>
<b>---------------</b>
</HeaderTemplate>
<FooterTemplate>
<b>---------------</b><br>
欢迎选购
</FooterTemplate>
</asp:repeater>
</form>
可以看到，
各模板的定义顺序是可以随意的，甚至可以将页脚模板放在最前面，
但它总是显示在页脚的位置。
程序运行后的效果如右图 。
理解模板的概念；
掌握模板的编写方法；
掌握 Repeater控件各种模板的使用；
掌握 Repeater控件应用 。
教学重点：
一、模板概述
二,Repeater控件的项模板
三,Repeater控件的交替项模板
四,Repeater控件的分隔模板
五,Repeater控件的页眉和页脚模板一、模板概述模板 （ Template）就是样板或标准规格，在 ASP.NET中模板是一个声明性页段落，其 HTML标记为：
<TemplateName>
<%--该模板内显示的内容与布局 --%>
</TemplateName>
模板包含表示元素，如原意文本、数据、格式标记等，
它为模板化的 ASP.NET服务器控件提供可视化界面。模板标记必须嵌套在它所属的模板控件的 HTML标记之内。
模板控件 基于模板，是一种 ASP.NET服务器控件，它本身不提供可视化界面，由程序员 在 HTML视图中标记或使用模板编辑器编辑生成。 若模板控件中未定义任何模板，程序运行后在页面上不会有任何显示。当 ASP.NET的 Web应用程序页分析器发现模板控件时，它分析控件的模板，并动态地创建子控件，产生可视化界面。
ASP.NET有 7种模板,Repeater控件只能使用其中的 5种，
而 DataList控件可以使用全部的 7种模板。下表列出了这些模板。注：备注列中标有 *者 Repeater控件不可用模板名称 含义 功能 备注
ItemTemplate 项模板 定义显示项的内容和布局
HeaderTemplate 页眉模板 定义页眉的内容和布局
FooterTemplate 页脚模板 定义页脚的内容和布局
AlternatingItemTemplate 交替项模板 定义交替项的内容和布局
SeparatorTemplate 分隔符模板 定义在项之间的分隔符
SelectedItemTemplate 选定项模板 定义选定项的内容和布局 *
EditItemTemplate 编辑项模板 定义当前编辑项的内容和布局
*
二,Repeater控件
Repeater控件是一个 根据模板定义样式循环显示数据的控件,它以没有预定义外观的方式显示数据源的内容，即没有内置的布局和样式,必须在控件所应用的模板内显式声明所有的 HTML布局、格式设置和样式标记，用来实现界面的可视化。 当网页执行时，
Repeater服务器控件会循环处理数据源的所有数据记录，并将每一笔数据呈现到一个“项”或“交替项”。
1.HTML标记
<asp:Repeater id="Repeater1"
runat="server">
<%--各种模板标记 --%>
</asp:Repeater>
2.常用属性
DataSource,绑定到控件的数据源，可以是数组、数据集、数据视图等。 Repeater
控件将其 ItemTemplate模板和
AlternatingItemTemplate模板绑定到
DataSource属性声明和引用的数据模型上。
DataMember,若 DataSource属性指定的是一个数据集，则 DataMember属性指定到该数据集的一个 数据表。
Controls,Reapter控件中子控件的集合
3、常用事件
ItemCommand:单击控件中的按钮时发生
ItemCreate:控件中的项创建时发生
ItemDataBound:控件中的项被数据绑定之后发生
ItemTemplate项模板它定义 Repeater控件显示项的内容和布局。 该模板是 Repeater控件的必选模板，若
Repeater控件内没有 ItemTemplate项模板或
AlternatingItemTemplate交替项模板之一，
控件就没有要显示的数据项，失去了使用
Repeater控件的意义。
ItemTemplate模板的 HTML标记为：
<ItemTemplate>
<%--该模板内显示的内容与布局 --%>
</ItemTemplate>
列名 数据类型 长度 允许空 是否主键商品编号 char 10 No Yes
商品名称 char 20 No No
等级 char 10 No No
产地 char 20 No No
供货商 char 20 No No
计量单位 char 10 No No
单价 float 8 No No
数量 float 8 No No
图片 URL char 20 Yes No
详情网页 URL char 20 Yes No
ItemTemplate项模板应用示例
1.准备数据库
2.使用项模板以下将数据库 product的数据表 fruitInfo中商品名称、
产地、单价 3个字段的内容用 Repeater控件显示出来。
①从工具箱将 Repeater控件拖入页面，生成一个控件对象 Repeater1。
②通过配置数据源将 Repeater控件绑定到数据源。
③在 HTML视图中手工编辑 ItemTemplate模板。
<form id=”Form1” method=”post” runat=”server”>
<% =” 品名 产地 单价” %> <%--显示 Repeater控件的头部 --%>
<asp:repeater id=”Repeater1” runat=”server”>
<ItemTemplate>
<p>
<%#DataBinder.Eval(Container.DataItem,” 商品名称” )%>
<%#DataBinder.Eval(Container.DataItem,” 产地” )%>
<%#DataBinder.Eval(Container.DataItem,” 单价” )%>
</p>
</ItemTemplate>
</asp:repeater>
</form>
在页面的 HTML代码中最重要的标记为红色的 3行，称为数据绑定表达式。形如：
<%#DataBinder.Eval(Container.DataItem,” 商品名称” )%>
运行程序得到结果如右图。
★ DataBinder.Eval()函数格式：
<%# DataBinder.Eval(Container.DataItem
,,字段名”,格式化字符串 ) %>
例如：
<%# DataBinder.Eval(Container.DataItem
,"Company","{0:yyyy-M-d}")%>
三,Repeater控件的交替项模板
AlternatingItemTemplate用于定义交替项呈现的内容和布局。所谓的交替项方式，就是在 Repeater控件和 DataList控件中 允许奇偶项以不同的内容和布局形式显示数据，其中奇数行由 AlternatingItemTemplate模板定义（索引号从 1开始），
偶数行由 ItemTemplate模板定义（索引号从 0开始）。 若仅定义了 ItemTemplate模板而未定义 AlternatingItemTemplate模板，则所有行全部按 ItemTemplate模板指定的数据与布局形式显示。若仅定义了 AlternatingItemTemplate模板而未定义
ItemTemplate模板，则仅显示 AlternatingItemTemplate模板指定的数据与布局形式的奇数行，偶数行不会显示。若这两种项模板都未定义，则什么数据都不会显示，那是没有意义的。
AlternatingItemTemplate模板的 HTML标记为：
<AlternatingItemTemplate>
<%--该模板内显示的内容与布局 --%>
</AlternatingItemTemplate>
因为 AlternatingItemTemplate模板内含数据项，所以 Repeater
控件使用该模板时，也必须进行数据绑定，绑定方式同
ItemTemplate模板。
为了说明 AlternatingItemTemplate模板的使用方法和使用的效果，在上例中加进一个 AlternatingItemTemplate模板，其页面的
HTML视图变为下面的形式。
<form id="Form1" method="post" runat="server">
<% ="品名 产地 单价 "%> <%--显示 Repeater控件的头部 --%>
<asp:repeater id="Repeater1" runat="server">
<AlternatingItemTemplate>
<font face="黑体 " color="#ff0000"><p>
<b><%#DataBinder.Eval(Container.DataItem,"商品名称 ")%></b>
<b><%#DataBinder.Eval(Container.DataItem,"产地 ")%></b>
<b><%#DataBinder.Eval(Container.DataItem,"单价 ")%></b>
</p>
</font>
</AlternatingItemTemplate>
<ItemTemplate>
<font face="宋体 " color="#0000ff">
<p>
<%#DataBinder.Eval(Container.DataItem,"商品名称 ")%>
<%#DataBinder.Eval(Container.DataItem,"产地 ")%>
<%#DataBinder.Eval(Container.DataItem,"单价 ")%>
</p>
</font>
</ItemTemplate>
</asp:repeater>
</form>
在 < asp:repeater >标签内增加了一个 <AlternatingItemTemplate>
标签，它是交替项标签。交替项模板所指定的数据项与项模板所指定的数据项相同，它们显示同样的字段数据，不过显示的文本的字体与颜色是不同的。
不需要修改任何后台代码，运行程序，效果如右图。
AlternatingItemTemplate交替项模板定义的是红色的黑体粗字，而 ItemTemplate模板定义的是蓝色的宋体，使得页面有了一些变化。
四,Repeater控件的分隔模板
SeparatorTemplate模板用于定义 Repeater控件各项之间的分隔符。 SeparatorTemplate模板所定义的分隔符为自定义样式，允许程序员使用任何合法的字符作为分隔符元素，例如：横线（ --），竖线（ |），句点（,）和冒号（,）等，程序员可以根据自己的喜好和数据内容表现的要求来选用，这也体现了 Repeater控件的灵活性。
SeparatorTemplaet模板的 HTML标记为：
<SeparatorTemplate>
<%--显示项之间的分割符 --%>
</SeparatorTemplate>
如果 Repeater控件定义了 SeparatorTemplat模板，则在各数据项之间出现分隔，包括交替项也是如此。各项之间有了分隔，可能使数据项更具条理性，有助于阅读。
对上例加入一个 SeparatorTemplat分隔模板。
<form id="Form1" method="post" runat="server">
<% ="品名 产地 单价 "%> <%--显示 Repeater控件的头部 --%>
<asp:repeater id="Repeater1" runat="server">
<AlternatingItemTemplate>
<font face="黑体 " color="#ff0000">
<p>
<b><%#DataBinder.Eval(Container.DataItem,"商品名称 ")%></b>
<b><%#DataBinder.Eval(Container.DataItem,"产地 ")%></b>
<b><%#DataBinder.Eval(Container.DataItem,"单价 ")%></b>
</p> </font>
</AlternatingItemTemplate>
<ItemTemplate>
<font face="宋体 " color="#0000ff">
<p>
<%#DataBinder.Eval(Container.DataItem,"商品名称 ")%>
<%#DataBinder.Eval(Container.DataItem,"产地 ")%>
<%#DataBinder.Eval(Container.DataItem,"单价 ")%>
</p>
</font>
</ItemTemplate>
<SeparatorTemplate>
<tr>
td><b>-------------------</b></td>
</tr>
</SeparatorTemplate>
</asp:repeater>
</form>
向 Repeater控件的标记中加入了一个
<SeparatorTemplate>
标签，就为控件增加了一个分隔模板。
Repeater控件内的模板标记没有先后顺序之分，
只要各模板彼此独立就是了。运行后的效果如右图。
五,Repeater控件的页眉和页脚模板
HeaderTemplate模板和 FooterTemplate模板分别定义
Repeater控件的页眉和页脚的内容和布局。
HeaderTemplate模板的 HTML标记为：
<HeaderTemplate>
<%--页眉内容和布局 --%>
</HeaderTemplate>
FooterTemplate模板的 HTML标记为：
<FooterTemplate>
<%--页脚内容和布局 --%>
</FooterTemplate>
Repeater控件有了页眉和页脚后，看起来不至于显得无头无尾，表现力更强一些。我们重新来构造上例 Repeater控件，
加入一个页眉模板、一个页脚模板和一个项模板。页面的 HTML
代码如下。
<form id=”Form1” method=”post” runat=”server”>
<asp:repeater id=”Repeater1” runat=”server”>
<ItemTemplate> <p>
<%#DataBinder.Eval(Container.DataItem,”商品名称” )%>
<%#DataBinder.Eval(Container.DataItem,”产地” )%> </p>
</ItemTemplate>
<HeaderTemplate>
水果品种 <br>
<b>---------------</b>
</HeaderTemplate>
<FooterTemplate>
<b>---------------</b><br>
欢迎选购
</FooterTemplate>
</asp:repeater>
</form>
可以看到，
各模板的定义顺序是可以随意的，甚至可以将页脚模板放在最前面，
但它总是显示在页脚的位置。
程序运行后的效果如右图 。
