Using ASP.NET 3.5′s ListView and DataPager Controls: Grouping

A Multipart Series on ASP.NET's ListView and DataPager Controls 關於ASP.NET的listVie和DataPager 控制項的一個系列
This article is one in a series of articles on ASP.NET's ListView and DataPager controls, which were introduced with ASP.NET version 3.5. 這篇文章是關於ASP.NET的listVie和DataPager 控制項的一個系列，使用ASP.NET 3.5版本來介紹。 Displaying Data with the ListView - looks at the ListView control basics, with demos on how to display data using the LayoutTemplate and ItemTemplate.     Displaying Data with the ListView  - 關注listView的一些基礎， 使用DEMO示範如何顯示使用layoutTepmlate和ItemTepmlate來顯示資料 Grouping Data with the ListView Control - shows how to render different formatting or encasing markup to every N rendered records.    Grouping Data with the ListView Control  - 介紹對於每N條被呈現的記錄如何呈現不同格式和封裝標識

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:一個是呈現記錄成為一連串的訂單列表，另一個是說明如何在一個多列的表裡顯示資料。

- continued -

 

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控制項使用下面的聲明的標識：

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

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條記錄的訂單列表。為了完成這個要求使用下面標識來代替：

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

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:

<p><p>    <asp:PlaceHolder runat="server" ID="groupsGo

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,這就是下面標識的結果：

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

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

對於每條綁定到listView控制項的記錄listView將呈現它的ItempTemplate.可能的結果會是下面的標識：

<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

The ItemTemplates' rendered markuItemTemplate呈現的標識會被放置到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

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>),像這樣：

 

 

Copyright 2013 曹振華

posted @ 2008-02-17 15:24 曹振華 閱讀(...) 評論(...) 編輯 收藏

重新整理評論重新整理頁面返回頂部

部落格園首頁博問新聞快閃記憶體程式員招聘知識庫

公告

<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!