ASP.NET 3.5's ListView and DataPager—Part2用ListView控件分组数据

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

ASP.NET 3.5's ListView and DataPager—Part2用ListView控件分组数据

导言：

ItemTemplate模式是用来输出绑定到ListView控件的记录，且被引用到LayoutTemplate模板里.这样将生成定义在LayoutTemplate模板里的输出代码(rendered markup)以及ItemTemplate模板里针对每条记录的输出代码.如果是很简单的输出，这样做问题不大；但是在一些比较复杂的情况下，我们需要针对不同的记录组(groups of record)输出不同的格式.比如，设想我们需要一系列的记录展示在一个有3列的HTML <table>里，每条记录放在一个表格单元里table cell (<td>),自然，每隔3条记录我们就需要用一个new table row (<tr>)把记录进行分组.要实现这个目的，我们可以利用声明ListView控件的GroupTemplate 和 GroupItemCount属性来达到.

在本文我们将看到如何利用GroupTemplate模板以及GroupItemCount属性来让ListView控件每隔n条记录便输出不同的外观标记(encasing markup)。我们将看到2个示例代码：一个将记录像订单列表(a series of ordered lists)那样输出来；另一个演示如何将记录放入一个多列的table里.

Grouping Basics

正如我们在part1探讨的那样，ListView控件必须包含的2个模板是LayoutTemplate 和 ItemTemplate.其中LayoutTemplate负责生成ListView的声明(markup),且包含了一个对ItemTemplate的引用，而ItemTemplate模板用于输出绑定到ListView控件的每条记录.LayoutTemplate是这样来引用ItemTemplate的，通过一个服务器端控件(比如PlaceHolder控件)，该控件的ID值与ListView控件的ItemPlaceholderID属性值一致(ItemPlaceholderID属性的默认值为"itemPlaceholder").

如果针对每个item的外观标记都是一样，那么直接在LayoutTemplate里引用ItemTemplate是没有问题的。不过在有些时候我们需要每隔n条item输出不同的外观标记.要实现这个效果，我们可以在GroupTemplate模板里进行定制，并且把ListView控件的GroupItemCount属性设置为n.然后，我们用LayoutTemplate引用GroupTemplate模板，而GroupTemplate模板又引用ItemTemplate模板。这样一来的话，ItemTemplate模板依然是输出绑定到ListView控件的每条记录，而GroupTemplate模板每隔GroupItemCount条记录进行分组输出.

为了更好的理解ListView控件如何进行分组工作，我们先看part1里第1个例子，扩展它使用分组.该示例将记录象列表那样显示出来，ListView控件的声明代码如下：

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

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

假如我们象每3个一组进行输出，我们可以这样修改：

<asp:ListView ID="ProductList1" runat="server" ID="ProductList1" runat="server"
   DataSourceID="ProductDataSource"
   GroupItemCount="3" ItemPlaceholderID="itemsGoHere"
   GroupPlaceholderID="groupsGoHere">

   <LayoutTemplate>
      <p>
         <asp:PlaceHolder runat="server" ID="groupsGoHere"></asp:PlaceHolder>
      </p>
   </LayoutTemplate>

   <GroupTemplate>
      <ol>
         <asp:PlaceHolder runat="server" ID="itemsGoHere"></asp:PlaceHolder>
      </ol>
   </GroupTemplate>

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

ListView控件的声明代码和上一篇几乎一样，只是原本放置于LayoutTemplate模板的<ol>元素现在已经转而放置在GroupTemplate模板里了，ItemTemplate保存不变.要注意的是LayoutTemplate现在引用的是GroupLayout模板；还要注意的是，对groupPlaceholder 和 itemplaceholders我没有使用默认值("groupPlaceholder" 和 "itemPlaceholder")，而是通ListView控件的ItemPlaceHolderID 和 GroupPlaceholderID属性另外进行了指派.

假想上面的这个ListView控件绑定到employees数据表，我们想将FullName列输出到<li>元素里，那么ListView的声明代码该是怎么样的呢？自然，ListView应先输出它的LayoutTemplate模板：
<p><p>
   <asp:PlaceHolder runat="server" ID="groupsGo

然后就该输出GroupTemplate模板了，在该模板里绑定到ListView控件的记录每3条为一组进行分组。假设总共8条记录，应该这样：

<ol>ODE><ol>
  <asp:PlaceHolder runat="server" ID="itemsGoHere"></asp:PlaceHolder>
</ol>

<ol>
  <asp:PlaceHolder runat="server" ID="itemsGoHere"></asp:PlaceHolder>
</ol>

<ol>
  <asp:PlaceHolder runat="server" </ol>

接下来是ItemTemplate模板，如下：

<li>Scott Mitchell</li>avy"><li>Scott Mitchell</li>
<li>Sam Smith</li>
<li>Jisun Lee</li>
<li>Andrew Fuller</li>
<li>Edgar Johnson</li>
<li>Ellen Plank</li>
<li>Tito Wald&l

ItemTemplates模板的rendered markup应放置到相应的GroupLayout PlaceHolder控件里.最终结果如下：
 
<p>th="95%" border=0> 
<p><p>
<ol>
<li>Scott Mitchell</li>
<li>Sam Smith</li>
<li>Jisun Lee</li>
</ol>
<ol>
<li>Andrew Fuller</li>
<li>Edgar Johnson</li>
<li>Ellen Plank</li>
</ol>
<ol>
<li>Tito 

在一个拥有多个列的Table里展示数据

在一个多列的table里展示数据很常见，在为分组记录输出不同的格式化标记时也会用到.通常情况下，要达到这种格式化效果我们要使用一个多列的HTML <table>，比如要展示一个3列的table，我们在每个table row (<tr>)里输出3个table单元(<td>)，比如：

<table ...>
   <tr>
      <td>Record 1</td>
      <td>Record 2</td>
      <td>Record 3</td>
   </tr>

   ...

   <tr>
      <td>Record N - 2</td>
      <td>Record N - 1</td>
      <td>Record N</td>
   </tr>
</table>

为了在ListView控件里生成这样的markup，我们需要使用一个LayoutTemplate来输出外部<table>和</table>标签，用一个GroupTemplate来输出table row元素，以及一个ItemTemplate来输出每个表格单元，如下的声明代码演示了如何在一个3列table里展示数据：

<asp:ListView ID="ProductDataList2" runat="server"
   DataSourceID="..." GroupItemCount="3">
  
   <LayoutTemplate>
      <table>
         <tr>
            <td>
               <table border="0" cellpadding="5">
                  <asp:PlaceHolder runat="server" ID="groupPlaceHolder"></asp:PlaceHolder>
               </table>
            </td>
         </tr>
      </table>
   </LayoutTemplate>

   <GroupTemplate>
      <tr>
         <asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder>
      </tr>
   </GroupTemplate>

  <ItemTemplate>
      <td>
         <h2><%# Eval("ProductName") %></h2>
        
         Price: <%#Eval("UnitPrice", "{0:c}")%><br />
         Category: <%# Eval("CategoryName") %>
      </td>
   </ItemTemplate>
</asp:ListView>  

在本文结尾处可下载到本文的示例代码，它将Northwind数据库里的Products数据表的记录展示在一个3列的表里，从浏览器显示时，效果如下:

                                                                                                  图
结语：

本文我们考察了使用ListView控件的GroupTemplate模板和GroupItemCount属性根据指定的组大小进行批量地输出.当每隔n记录就需要改变输出格式时该模板和属性就很有用.在ListView控件出现之前，这样的分组需要开发人员每隔开n条记录就写代码来注入额外的格式声明.不过利用ListView控件的GroupTemplate模板和GroupItemCount属性，分组格式就可以完全通过声明的方式来实现了.

祝编程愉快！