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进行控制.此外,还有其它的一些模板,在后面涉及排序、分页、编辑、插入功能的文章里我们再进行探究.

祝编程快乐!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章