快速业务通道

ASP.NET 2.0数据教程之二十九:用DataList和Repeater来显示数据

作者 佚名技术 来源 NET编程 浏览 发布时间 2012-05-21
plates 不能通过设计器来配置,只能写页面 代码.

我们用如下标记来将每个category作为一列显示在单行的 <table>里:

ASP.NET

<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.NET

<asp:Repeater ID="Repeater1" 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的样 子.

ASP.NET 2.0数据教程之二十九:用DataList和Repeater来显示数据

图17: 在单行的HTML <table> 用单独的列列出每个Category

第六步: 改善Repeater的外观

既然Repeater 是精确呈现在templates 里指定的标记,那么你应该可以想到它不包含任何和风格有关的属性.为了改变 Repeater产生的内容的外观,我们需要手动的将HTML或CSS加到它的templates 里.

在这个例子里,我们将做一个类似DataList的alternating rows那样的 东西,改变category 的背景色.我们通过ItemTemplate 和 AlternatingItemTemplate 来为每个Repeater item 指定RowStyle CSS class , 为每个alternating Repeater item 指定AlternatingRowStyle CSS class ,象下 面的代码一样:

ASP.NET

<ItemTemplate>
<td class="RowStyle"><%# Eval ("CategoryName") %></td>
</ItemTemplate>
<AlternatingItemTemplate>
<td class="AlternatingRowStyle"><%# Eval ("CategoryName") %></td>
</AlternatingItemTemplate>

我们还要添加一个text为 “Product Categories”的header .由于我们不知道 <table> 会由多少列组成,最简单的方法保证产生的header 可以跨越所有的列是使用两个 <table>.第一个<table>包含两行 — header 和一行包含第二 个 <table>的行.第二个 <table>里每个category 为一 列.

ASP.NET

<table>
<tr>
<th>Product Categories</th>
</tr>
<tr>
<td>
<table>
<tr>
<td>Category 1</td>
<td>Category 2</td>
...
<td>Category N</td>
</tr>
</table>
</td>
</tr>
</table>

下面的HeaderTemplate 和FooterTemplate 产 生需要的标记:

ASP.NET

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2" EnableViewState="False">
<HeaderTemplate>
<table cellpadding="0" cellspacing="0" style="border: solid 1px black;">
<tr>
<th class="HeaderStyle">Product Categories</th>
</tr>
<tr>
<td>
<tab

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号