Using ASP.NET 3.5's ListView and DataPager Controls: Grouping Data with the ListView Control (翻译)

Published: Wednesday, January 2, 2008

Introduction
ASP.NET version 3.5 added two new data Web controls to the Toolbox: the ListView and DataPager. As discussed in the first installment of this article series, Displaying Data with the ListView, the ListView control offers the same built-in features found in the GridView, but much finer control over the rendered output. The ListView's output is defined using a variety of templates, and we looked at examples using the control's LayoutTemplate and ItemTemplates. In particular, these examples used a LayoutTemplate that included a placeholder for the ItemTemplate's rendered output.

 Asp.net 3.5版本在Toolbox添加了新的数据控件：listView和DataPager.在这文章列子的第一个部分(Displaying Data with the ListView)做了讨论,listView控件提供了一些GridView拥有的内建特性，而且还有更出色的控制呈现。ListView的呈现是使用多种template来定义的，并且我们关注了使用 layoutTemplate和itemTemplaet的控件的例子。特别的是，针对itemTemplate的呈现这些例子使用了包含Plachholder控件的LayoutTepmplate

The ItemTemplate is rendered for each record bound to the ListView control, and is typically referenced in the LayoutTemplate. This approach generates the rendered markup defined in the LayoutTemplate, plus the rendered markup created by the ItemTemplate for each record. This works fine for simple rendering scenarios, but in more complex scenarios we may need to render different formatting markup for different groups of records. For example, imagine that we needed to display a set of records in a three-column HTML <table>. For each record we would want to emit a table cell (<td>), but for every three records we would need to emit a new table row (<tr>). Such customizations can be accomplished declaratively with the ListView control's includes GroupTemplate and GroupItemCount properties.

ItemTemplate 为绑定到listView的每条记录呈现输出，并且在layoutTepmplate里被引用。这个步骤生成在LayoutTepmlate被定义的标识.并加上itempTemplate为每条记录创建的输出标识.对于简单的输出要求这能做的很好，但是在更灵活的要求里对于不同的记录组我们可能需要去呈现不同格式的标识。例如，想象我们需要在一个3列的<table>显示一组记录。对于每条记录我们想展现一个table cell(<td>),但是对于每3条记录我们需要展现一个新的table row(<tr>).这种定制可以使用listView控件自带的GroupTemplate和GrouipItemCount属性声明完成。

In this article we will see how to use the GroupTemplate and GroupItemCount properties to instruct the ListView control to render different encasing markup for every n records. We will look at two demos: one that renders records into a series of ordered lists, and another that illustrates how to display data in a multi-column table. Read on to learn more!

在这篇文章我们将看到怎样使用GroupTemplate和 GroupItemGcount属性通知listView控件生成每N条记录生成不同的包含标识。 我们将关注两个demo:一个是呈现记录成为一连串的订单列表，另一个是说明如何在一个多列的表里显示数据。

Grouping Basics
As we saw in the Displaying Data with the ListView article, the ListView control contains two requisite templates: LayoutTemplate and ItemTemplate. The LayoutTemplate is rendered to generate the ListView control's markup and can contain a reference to the ItemTemplate, which is used to render each record bound to the ListView control. The LayoutTemplate references the ItemTemplate through a server-side control (such as the PlaceHolder control) whose ID is the same as the ListView's ItemPlaceholderID property. (The ItemPlaceholderID property has a default value of "itemPlaceholder".)

分组基础
如同我们在GroupTemplate and setting the ListView control's GroupItemCount property to n. Then, instead of referencing the ItemTemplate in the LayoutTemplate, have the LayoutTemplate reference the GroupTemplate, and the GroupTemplate reference the ItemTemplate. Such a setup still has the ItemTemplate rendered for every record bound to the ListView control, but causes the GroupTemplate to be rendered every GroupItemCount number of records.

如果每项包含标识是一样的那么从layoutTemplate到itemlate的引用很好做，但是在一些构思里不同的包含标识也许需要每N个项的显示。这样的定制可以通过定义一个GroupTemolate并且设置listView控件的GroupItemCount属性为n.那么在layoutTemplate里代替引用的ItemTemplate ,LayoutTemplate 引用GroupTemplate,GroupTemolate引用itemTemplate.这样设置对于绑定到listView控件的纪律仍然有itempTemplate被生成，但是会每GroupItemCount数量的记录会引发GroupTemplate被生成.

To better understand how grouping with the ListView control works, let's take the first example we examined in the Displaying Data with the ListView article and extend it to use grouping. The first example illustrated how to display a set of records in an ordered list, and used the following declarative markup for the ListView control:

为了更好的明白使用listView控件的分组如何工作，让我们拿我们在Displaying Data with the ListView 文章里分析的作为第一个例子，使用分组扩展它。第一个列子说明如何在一个订单列表里显示一组数据。ListView控件使用下面的声明的标识：

Imagine, however, that we want to display an ordered list for each group of three records. To accomplish this use the following markup instead:

我们想显示一个每组有3条记录的订单列表。为了完成这个要求使用下面标识来代替：

The ListView control's declarative markup is nearly the same as in the previous article, but instead of the <ol> element being in the LayoutTemplate, it has been moved to the GroupTemplate. The ItemTemplate has reamined the same. Note, however, that the LayoutTemplate still must be present and now references the GroupLayout. Also note that instead of the default values for the group and item placeholders ("groupPlaceholder" and "itemPlaceholder") I have explicitly changed these values through the ListView control's ItemPlaceHolderID and GroupPlaceholderID properties.

ListView控件的声明标识几乎跟上篇文章一样，但是在layoutTepmplate里<ol>元素被替代，它已经在被转移到GroupTemplate里.ItemTemplate保持一样。注意，LayoutTemplate仍然必须出现只是现在引用GroupLayout.也注意替换针对Group 和 placeHolder项的默认值("GroupPlaceholder"  和 “itemPlaceholder”)我已经明确的通过listView控件的itemPlaceHolderID和GroupPlaceholderID属性改变这些值.

Imagine that the above ListView is bound to an employees database table, and that in the ItemTemplate we were rendering the FullName column within the <li> element. What would the ListView's rendered markup look like?

设想在上面的listView绑定一个emplaoyees数据库表，并且在ItemTemplate我们呈现FullName列在<li>元素里.listView的呈现标识看起来应像想什么样？

Well, the ListView would start by rendering it's LayoutTemplate:

好的，listView应该先开始呈现它的layoutTepmlate:

It would then render its GroupTemplate for each group of three records bound to the ListView control. Assuming that there were eight total employees, this would result in the following markup:

对于每3条ListView控件绑定的记录的一个组ListView将呈现它的GroupTemplate。设想我们有8个完整的employees,这就是下面标识的结果：

It would then render its ItemTemplate for each record bound to the ListView control. This might result in the following markup:

对于每条绑定到listView控件的记录listView将呈现它的ItempTemplate.可能的结果会是下面的标识：

The ItemTemplates' rendered markuItemTemplate呈现的标识会被放置到GroupLayout PlaceHolder控件的适当位置。最终结果如下：

Displaying Data in a Multi-Column Table
Displaying records in a multi-column table is a very common scenario, and is one that requires rendering different formatting markup for groups of records. Oftentimes, such formatting is achieved through the use of a multi-column HTML <table>. For example, to display a three-column table, we would render three table cells (<td>) in each table row (<tr>), like so: 在在一个多列表里显示记录
在一个多列表里显示数据是一个非常公用的场景，而且对于记录组呈现不同的格式标识也是需求之一。一般的,这些格式可以通过使用一个一个多列的HTML<TABLE>来完成。例如，显示一个3列表，我们将呈现3个table cell(td)在每一个tableRow(<tr>),像这样：

<table ...>ccc><table ...> row (<tr>), like so: <table ...> <tr> <td>Record 1</td> <td>Record 2</td> <td>Record 3</td> </tr> ... <tr> <td>Record N - </table> In order to generate such markup with a ListView control, we need to use a LayoutTemplate that renders the outer <table> and </table> tags, a GroupTemplate that renders the table row elements, and an ItemTemplate that renders each table cell. The following declarative markup illustrates how to display data in a three-column table: 为了使用ListView控件生成这样的标识，我们需要使用一个LayoutTemplate来呈现外面的 <table> 和 </table> 标识,一个GroupTemplate用来呈现table Row元素，并且使用一个ItemTemplate来呈现一个Table Cell. 下面声明的标识说话如何在一个3列表显示数据。 <asp:ListView ID="ProductDataList2" runat="server" n a three-column 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 </asp:ListView> The download available at the end of this article includes a demo that displays the records from the Northwind database's Products table in a three-column table, which yields the following when viewed through a browser. 在文章的结尾有一个有用的下载包含了一个在3列表里显示来自Northwind数据库Product表数据的Demo.当通过游览器访问它时会出现下面的页面： Conclusion In this article we examined how to render output batched into a specified group size using the ListView control's GroupTemplate and GroupItemCount property. This template and property are useful in scenarios where the formatting layout needs to change for every n rendered records, such as when displaying a multi-column table. Prior to the ListView control, such grouping required the page developer to write code that would intelligently inject additional formatting markup for every n records. But with the ListView control's GroupTemplate and GroupItemCount property, group formatting is now possible entirely through declarat 结论 这在篇文章我们研究了如何使用listView控件的GroupTemplate和GroupItemCount属性在一个指定的组呈现输出。这些模板和属性在格式布局针对每次输出需要改变的场景非常有用，例如我们显示一个多列的表.ListView控件在前，像Grouping这样的需求对于每N条记录页面开发者需要写一些可以智能的插入附加格式标识的代码。但是使用ListView控件的GroupTemplate和GroupItemCount属性，分组格式已经可以通过声明完成。 Happy Programming! By Scott Mitchell Further Readings: An Overview of ASP.NET 3.5 and Visual Studio 2008 The asp:ListView Control (Part 1) Displaying Data with the ListView