在浏览图12的例子时,你可以看看页面的源文件.你会看到DataList 包含有<tr>和<td>标记的HTML<table>.这个实际上和GridView一样.我们会在将来的教程里看到,DataList允许每一行显示多条记录.
但如果你不想使用HTML<table>呢?我们将使用Repeater .Repeater 也是基于templates构建的.它提供以下5种template:
HeaderTemplate — 在items前加指定的标记
ItemTemplate — 用来呈现items
AlternatingItemTemplate — 用来呈现alternating items
SeparatorTemplate —在各个item 之间加指定的标记
FooterTemplate - 在items后加指定的标记
在ASP.NET 1.x版本里.Repeater 通常用来显示一些数据列.在这种情况下,HeaderTemplate 和FooterTemplates 包含一对<ul>标记,而ItemTemplate 包含 <li> 和数据绑定语法.这种方法在ASP.NET 2.0也适用,比如我们在母板页和站点导航一章里看到的例子:
在Site.master母板页里, Repeater 用来显示顶级站点内容(Basic Reporting, Filtering Reports, Customized Formatting, and so on); 嵌套的Repeater 用来显示 子区域的内容.
在SectionLevelTutorialListing.ascx用户控件里, Repeater 用来显示当前站点区域的子区域内容.
注意:ASP.NET 2.0可以使用BulletedList control.使用它的时候不需要指定任何和list有关的HTML.而仅仅是指定每个list item的字段.
Repeater 是一个"全能"的控件,如果你找不到控件可以产生需要的标记语言,那么可以使用Repeater .我们来举例说明,在第二步里创建的显示Product信息的DataList上显示出categoried.我们将每个categorie作为一列显示在单行的HTML<table>里.从工具箱里拖一个Repeater 到显示Product 的DataList上.和DataList一样,在定义templates前,Repeater 是灰色的.
图 13: 添加一个 Repeater 控件
在Repeater 的智能标签里只有一个可选项:选择数据源.创建一个ObjectDataSource ,用CategoriesBLL 类的GetCategories 方法配置它.
图 14: 创建ObjectDataSource
图 15: 用 CategoriesBLL 类配置ObjectDataSource
图16: 用 GetCategories Method获取所有Categories的信息
和DataList不一样,在绑定到数据源后,Visual Studio不会为Repeater 自动创建ItemTemplate .而且Repeater 的templates 不能通过设计器来配置,只能写页面代码.
我们用如下标记来将每个category作为一列显示在单行的<table>里:
<table> <tr> <td>Category 1</td> <td>Category 2</td> ... <td>Category N</td> </tr> </table>
由于<td>Category X</td>是重复的一部分,因此会显示在Repeater的ItemTemplate里.在它之前的标记<table><tr>会放在HeaderTemplate里,而结束标记</tr></table>会放在FooterTemplate里.在设计器的左下角点源视图按钮进入ASP.NET页的声明代码部分,输入以下代码:
<asp:Repeater runat="server" DataSourceID="ObjectDataSource2" EnableViewState="False"> <HeaderTemplate> <table> <tr> </HeaderTemplate> <ItemTemplate> <td><%# Eval("CategoryName") %></td> </ItemTemplate> <FooterTemplate> </tr> </table> </FooterTemplate> </asp:Repeater>
Repeater 精确的包含在它模板里指定的标记,不会有任何多余的部分.图17显示通过浏览器浏览Repeater的样子.
图 17: 在单行的HTML <table> 用单独的列列出每个Category
第六步: 改善Repeater的外观