导言
在之前的28篇教程的例子里,如果我们需要显示某个数据源的多条记录,我们使用GridView .GridView 的一行表示数据源的一条记录,列表示一个字段.虽然GridView 用来显示数据,分页,排序,编辑,删除非常的方便,但是有点臃肿.而且GridView 结构的标记是固定的—它包含一个带有
| Category: | ' /> | Supplier: | ' /> |
| Qty/Unit: | ' /> | Price: | ' /> |
注意：上面的例子使用的是Text指定为数据绑定的值的Label控件．我们也可以不使用Label，而只是保留数据绑定的代码．也就是说，我们可以用<%# eval("CategoryName") %>来代替' />．
使用Label控件有两个好处,第一点在下一章我们会看到,就是提供了一个格式化数据的简单途径.第二点是不使用web控件的时候,Edit Templates 不显示声明的数据绑定代码.通过Edit Templates 的界面很容易操作静态标记语言和web控件,其前提是所有的数据绑定都是通过web控件的智能标签里的Edit DataBindings对话框来实现.因此,使用DataList的时候,我建议使用Label控件,这样通过Edit Templates 就可以操作其内容.我们会看到,使用Repeater 时如果需要编辑其内容,需要切换到源视图.而设计Repeater模板的时候,我通常不使用Label控件,除非我需要格式化绑定数据的外观.
图 8: 用DataList的 ItemTemplate显示Product
第三步: 改善DataList的外观
和GridView一样,DataList 提供了一些和风格有关的属性,比如Font, ForeColor, BackColor, CssClass, ItemStyle, AlternatingItemStyle, SelectedItemStyle等.当使用 GridView 和DetailsView 时,我们首先在DataWebControls Theme里创建了一些皮肤文件,这些文件预定义了这两个控件的CssClass 属性和RowStyle, HeaderStyle等.我们使用DataList的时候也采取这种方法.
象在使用ObjectDataSource展现数据 里谈到的那样,一个Skin 文件定义了一个web控件的默认显示属性.一个Theme 是一组Skin, CSS, image, 和Javascript files 的集合,它定义了一个web站点的外观.在使用ObjectDataSource展现数据 那一章里,我们创建了一个DataWebControls Theme(App_Themes 文件夹下) ,它包含两个Skin文件- GridView.skin 和DetailsView.skin.我们现在来为DataList添加第三个.右键单击App_Themes/DataWebControls 文件夹,选择Add a New Item,选择Skin File,在名字里填DataList.skin.
图 9: 创建一个名为DataList.skin的Skin文件
将下面的标记语言添加到DataList.skin里.
上面用GridView 和DetailsView 使用的CSS文件设置DataList .在DataWebControlStyle, AlternatingRowStyle, RowStyle里用到的CSS文件是在Styles.css 里定义的.
添加完Skin后,DataList的外观看起来会变了(你可以在视图菜单里选择刷新来看改变后的效果).见图10,alternating product 的背景色为粉红色.
图 10: 添加skin文件后的效果
第四步: 浏览DataList的其它Templates
DataList 还支持除了ItemTemplate外的其它6种template:
HeaderTemplate — 用来呈现 header row
AlternatingItemTemplate — 用来呈现alternating items
SelectedItemTemplate — 用来呈现selected item; selected item 的index 可以通过DataList 的 SelectedIndex property 得到
EditItemTemplate — 用来呈现被编辑的item
SeparatorTemplate — 用来分隔各个item
FooterTemplate - 用来呈现footer row
当指定HeaderTemplate 或FooterTemplate时,DataList 会加一个header 或footer .和GridView一样,DataList 的header 和footer 没有和数据绑定在一起.
注意:如我们在在GridView的页脚中显示统计信息 一章里看到的那样,header 和footer 不支持数据绑定语法,而数据绑定的信息可以通过GridView的RowDataBound event handler来写.这个技术可以用来技术绑定的数据的和或其它信息,并在footer里显示.同样的,可以在DataList 和Repeater 里面这样做.它们唯一的区别在于对DataList 和Repeater 来说是为ItemDataBound 创建event handler (而不是RowDataBound ).
在我们的例子里,我们将标题“Product Information”用 显示在DataList的results 的顶部.为了达到这个目的,在HeaderTemplate 中添加合适的标记语言.或者通过DataList的智能标签中的Edit Templates 来实现.从下拉列表中选择Header Template ,从style 下拉列表中选择Heading 3 并输入Text(见图11).
图 11: 添加Text 为“Product Information”的HeaderTemplate
同样,直接在标记里加入以下代码也可以达到上面的目的.
Product Information
为了在每个列出的product 之间保留一些空间,我们现在来添加一个SeparatorTemplate .
标签可以完成这种分割的功能.见下面的标记语言
注意:与HeaderTemplate 和FooterTemplates一样,SeparatorTemplate 并不和数据源里的任何数据绑定.因此,并不能直接的和DataList绑定的数据发生关系.
现在在浏览器里浏览这个页面,看起来应该和图12差不多.注意header 和各个product 之间的线.
图 12: DataList 现在包含了 Header Row 和每个Product 之间有一条线
第五步: 使用Repeater
在浏览图12的例子时,你可以看看页面的源文件.你会看到DataList 包含有
| Category 1 | Category 2 | ...Category N |
由于
<%# eval("CategoryName") %>
Repeater 精确的包含在它模板里指定的标记,不会有任何多余的部分.图17显示通过浏览器浏览Repeater的样子.
图 17: 在单行的HTML 第六步: 改善Repeater的外观 既然Repeater 是精确呈现在templates里指定的标记,那么你应该可以想到它不包含任何和风格有关的属性.为了改变Repeater产生的内容的外观,我们需要手动的将HTML或CSS加到它的templates里. 在这个例子里,我们将做一个类似DataList的alternating rows那样的东西,改变category 的背景色.我们通过ItemTemplate 和AlternatingItemTemplate 来为每个Repeater item 指定RowStyle CSS class ,为每个alternating Repeater item 指定AlternatingRowStyle CSS class ,象下面的代码一样: 我们还要添加一个text为“Product Categories”的header .由于我们不知道 下面的 HeaderTemplate 和FooterTemplate 产生需要的标记: 图18 里可以看到现在Repeater的样子. 图 18: Category 列的背景色交替变换and Includes a Header Row 总结 虽然使用GridView 来显示,编辑,删除,排序和分页数据都非常容易,但是很臃肿.为了更好的控制外观,我们需要使用DataList 或Repeater .这些控件使用templates 来显示记录,而不是BoundFields. DataList 包含一个HTML 用单独的列列出每个Category
<%# eval("CategoryName") %>
<%# eval("CategoryName") %>
会由多少列组成,最简单的方法保证产生的header 可以跨越所有的列是使用两个
.第一个
包含两行 — header 和一行包含第二个
的行.第二个
里每个category 为一列.
Product Categories
Category 1
Category 2
...
Category N
Product Categories
<%# eval("CategoryName") %>
<%# eval("CategoryName") %>
