ASP.NET 3.5's ListView and DataPager—Part1 用ListView控件展示数据

本文英文原版及代码下载：
http://aspnet.4guysfromrolla.com/articles/122607-1.aspx

ASP.NET 3.5's ListView and DataPager—Part1 用ListView控件展示数据

导言：

在2007年11月微软发布了ASP.NET 3.5，正如文章《An Overview of ASP.NET 3.5 and Visual Studio 2008》（http://aspnet.4guysfromrolla.com/articles/112107-1.aspx）提到的那样，ASP.NET 3.5包含了2个新的ASP.NET data controlsb控件:ListView 和 DataPager.简单的说，ListView控件在实现分页、排序、编辑、插入等功能之外，还提供了一些非常灵活的方法来展示数据。而DataPager控件可以与一个ListView控件一道实现一个分页接口(paging interface).

在ASP.NET 3.5之前，开发人员要展示一个记录集(set of records)时，要使用GridView, DataList和 Repeater控件，GridView虽然有丰富的数据特性(data features)，开外形看起来方方正正的；DataList 和 Repeater控件虽然外形灵活，但数据特性又不如GridView、DetailsView以及FormView 丰富.而ListView控件恰好兼顾外观的灵活性和内置数据特性.

本文作为ListView and DataPager控件系列的第一篇， 考察ListView里可用到的多个模板，并演示如何呈现数据.

ListView概述

很多ASP.NET data Web控件自动的用一些额外的标记将要绑定的数据框起来.比如，GridView控件将它要呈现的数据置于一个HTML <table>里, 将绑定每条记录放在一个table row (<tr>)里，每列作为一个单元又放在row (<tr>)里.因此，GridView的外观看起来非常的方正.虽然页面开发员可以用TemplateFields以及其它的工具来定制GridView的外观，但GridView的输出结果(output)依然包含在一个<table>标签里.而ListView控件则不然，不会用额外的标记将要绑定的数据框起来，而由我们(页面开发人员)负责来对控件的HTML呈现效果进行控制.以下是

listView控件的的11个模板：

.AlternatingItemTemplate
.EditItemTemplate
.EmptyDataTemplate
.EmptyItemTemplate
.GroupSeparatorTemplate
.GroupTemplate
.InsertItemTemplate
.ItemSeparatorTemplate
.ItemTemplate
.LayoutTemplate
.SelectedItemTemplate

其中比较重要的模式是LayoutTemplate 和ItemTemplate。其中LayoutTemplate指定了ListView的外观标记(encasing markup)，而ItemTemplate指定的标记用于生成绑定到ListView的每条记录。比如，我们要展示一个清单，我们可以这样做：

<asp:ListView ID="..." runat="server" DataSourceID="..."> DataSourceID="...">width="100%" bgColor=#cccccc><asp:ListView

ID="..." runat="server" DataSourceID="...">
<LayoutTemplate>
<ol>
<asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
</ol>
</LayoutTemplate>

<ItemTemplate>
<li><%# Eval("columnName") %></li>
</ItemTemplate>
</asp:ListView>

当分别指定ListView的LayoutTemplate和ItemTemplate之后，我们需要告知LayoutTemplate：“听好，对要展示的每条记录，将呈现条目标记(rendered item markup)放在这里”。具体方法是添加一个服务器端的控件，其ID由ListView控件的ItemPlaceholderID属性指定. 该属性默认值为"itemPlaceholder", 如上述代码所示.当然我也可以使用其它的名称，只需要为ListView的ItemPlaceholdID属性指定一个值即可.

要在ItemTemplate里输出某个字段值，使用绑定语法<%# Eval("columnName")%>.

假定上面的listView绑定到employees数据库表，我们想在ItemTemplate里的<li>元素输出FullName列，那么怎样在ListView里声明呈现声明(rendered markup)呢？

我们先处理LayoutTemplate，如下：
<ol>
<asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
</ol>

接下来，将绑定到ListView控件的每一条记录呈现在ItemTemplate模板里，比如这样：
<li>Scott Mitchell</li>
<li>Sam Smith</li>
<li>Jisun Lee</li>
<li>Andrew Fuller</li>
<li>Edgar Johnson</li>
<li>Ellen Plank</li>

ItemTemplate的rendered markup放置在PlaceHolder控件里(因为其ID与ListView控件的 ItemPlaceholderID值吻合)，最终结果如下：

<ol>
<li>Scott Mitchell</li>
<li>Sam Smith</li>
<li>Jisun Lee</li>
<li>Andrew Fuller</li>
<li>Edgar Johnson</li>
<li>Ellen Plank</li>
</ol>

An Example of Displaying Simple Data with the ListView

在本文结尾部分可下载到示例代码，为一个ASP.NET 3.5的website，代码演示了如何使用ListView控件.代码使用的是微软Access类型的Northwind数据库，其放置在App_Data文件夹下.而"Simple Data"代码演示了如何使用ListView展示Northwind数据库里Products表的记录.我们用一个AccessDataSource控件来检索Products数据表，并将最终结果绑定到ListView.

具体来说，listView控件最开始将标题"Product lising"显示在一个<h3>元素。然后将products信息放置在一个<blockquote>元素里，该元素具有对页面输出(output)进行缩进的效果。product的name, category, unit price和quantity都展示在一个单元格里.每条产品由水平规则元素(<hr>)分割开来，当然这是在ItemSeparatorTemplate里定义的.

ListView 和accessDataSource的声明代码如下：

<asp:ListView ID="ProductList" runat="server" DataSourceID="ProductDataSource">
<LayoutTemplate>
<h3>Product Listing</h3>
<blockquote>
<asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
</blockquote>
</LayoutTemplate>

<ItemSeparatorTemplate>
<hr />
</ItemSeparatorTemplate>

<ItemTemplate>
<h4><%#Eval("ProductName")%> (<%# Eval("CategoryName") %>)</h4>
Available at <%#Eval("UnitPrice", "{0:c}")%>,
with <%#Eval("QuantityPerUnit")%>.
</ItemTemplate>
</asp:ListView>

<asp:AccessDataSource ID="ProductDataSource" runat="server"
DataFile="~/App_Data/Northwind.mdb"
SelectCommand="SELECT [ProductName], [QuantityPerUnit], [UnitPrice], [CategoryName] FROM [Alphabetical List of Products]">
</asp:AccessDataSource>

当访问页面时，listView控件将显示为如下的HTML：

<h3>Product Listing</h3>
<blockquote>

<h4>Chai (Beverages)</h4>
Available at $18.00,
with 10 boxes x 20 bags.

<hr />

<h4>Chang (Beverages)</h4>
Available at $19.00,
with 24 - 12 oz bottles.

<hr />

<h4>Aniseed Syrup (Condiments)</h4>
Available at $10.00,
with 12 - 550 ml bottles.

<hr />

<h4>Chef Anton's Cajun Seasoning (Condiments)</h4>
Available at $22.00,
with 48 - 6 oz jars.

<hr />

<h4>Grandma's Boysenberry Spread (Condiments)</h4>
Available at $25.00,
with 12 - 8 oz jars.

... Many products have been removed for brevity ...

</blockquote>

在客户端浏览器里，控件看起来像这样：

图

结语

ListView控件是ASP.NET 3.5里新添加的，它像GridView一样具有丰富的数据特性，同时在界面输出方面具有更好的可塑性.正如本文探讨的那样，ListView的界面输出由声明代码(markup)，数据绑定表达式以及LayoutTemplate以及ItemTemplate里添加的Web controls进行控制.此外，还有其它的一些模板，在后面涉及排序、分页、编辑、插入功能的文章里我们再进行探究.

祝编程快乐！