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

翻译此文的目的是为了学习英语，有什么不对还请指正

原文地址:http://aspnet.4guysfromrolla.com/articles/122607-1.aspx

Using ASP.NET 3.5's ListView and DataPager Controls: Displaying Data with the ListView
By Scott Mitchell

A Multipart Series on ASP.NET's ListView and DataPager Controls
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. 这篇文章是一个介绍listview和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介绍如何显示使用loayoutTemplate和itemTemplay 显示数据. 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条被呈现的数据（N 在这里不知道怎么翻译，路过的达人请告知）

A Multipart Series on ASP.NET's ListView and DataPager Controls

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.
这篇文章是一个介绍listview和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介绍如何显示使用loayoutTemplate和itemTemplay 显示数据.

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条被呈现的数据（N 在这里不知道怎么翻译，路过的达人请告知）

Introduction
In November 2007 Microsoft released ASP.NET 3.5. As noted in An Overview of ASP.NET 3.5 and Visual Studio 2008, this released included two new ASP.NET data Web controls: the ListView and DataPager. In a nutshell, the ListView control provides a very flexible means for displaying a collection of data while still offerring rich data features like paging, sorting, editing, inserting, and deleting. The DataPager control can be associated with a ListView to render a paging interface.

在2007年11月Microsoft 发布了ASP.NET 3.5. 作为记录.在这里 An Overview of ASP.NET 3.5 and Visual Studio 2008有记录，这次发布包括两个新的ASP.net data web控件：listview 和 DataPager. 顺便说，这个ListView 控件提供了非常灵活的方法显示一个数据集合，当然仍提供了丰富的数据功能，比如分页，排序，编辑，插入和删除。DataPagerkon 控件可以联合一个listview展现一个分页界面.

Prior to ASP.NET 3.5, developers who needed to display a set of records could choose between the GridView, DataList, and Repeater controls. The GridView provides rich data features, but has a very boxy layout; the DataList and Repeater allow for a more flexible layout, but lack the "point and click" data features found in the GridView, DetailsView, and FormView controls. The ListView bridges the gap between layout flexibility and built-in data features.

ASP.NET 3.5之前，开发者需要显示一些数据一般会在GrdiView,DatasList 和Repeater控件之间选择。 GridView 提供了丰富的功能，但是有非常固定的布局;DataList 和Repeater允许更灵活的布局，但是缺少在Gridview，DetailsVView和FormView控件里出现的“一点就行”的一些数功能.ListView 联通了在灵活的布局和构建数据功能之间的缝隙。

This article, the first in a series of articles on the ListView and DataPager controls, looks at the ListView's many available templates and illustrates how to display data. Read on to learn more!

这篇文章，是这个关于listView和DataPager控件系列的第一篇，着眼于listView的游泳模板并且用图例说明如何显示数据。Read on to learn more! （阅读它学到更多？呵呵，请指教）

- continued -

ListView Basics
Many of ASP.NET's data Web controls automatically surround the data bound to them with additional markup. For example, the GridView control displays its data rendered inside of an HTML <table>, displaying each record of data bound to it as a table row (<tr>) and each record field as a cell within the row (<td>). Consequently, the GridView's layout is extremely boxy. While page developers can use TemplateFields and other tools to tweak the appearance of a GridView, the GridView's output will still be encased within a <table>.

许多ASP.NET的数据web控件会自动的使用一些附加的标识包围绑定的数据。比如，gridview控件显示它呈现的数据是在一个Hmtl<table>标记里面，显示每条数据记录绑定在一个table的row(<tr>)并且每个数据字段作为一个cell在row里面(<td>).因此，gridView的不见是非常固定的。然而页面开发者使用TemplateFields和其他的工具改变一个grivew的外观， GridView的输出仍然包在一个<table>里面.

The ListView control, on the other hand, does not encase its rendered output with any additional markup. We (the page developer) are responsible for specifying the precise HTML rendered foListView控件，从另一个角度出发，是不会使用任何附加的标识包住它的输出。对于listView控件我们（页面开发者）可以负责的指定精确的Html来生成.这些标识通过listView的11个templaes来指定.

The two key templates are the LayoutTemplate and ItemTemplate. The LayoutTemplate specifies the ListView's encasing markup, while the ItemTemplate specifies the markup used to generate each record bound to the ListView. For example, to display an ordered list of items with a ListView, the resulting templates would look like the following:

两个关键的templates是LayoutTemplate 和ItemTemplate.LayoutTemplate 指定了 listview包含的标识,而ItemTemplate 指定了绑定到listView用来生产每条记录的标识.例如，使用listView来显示的一个item的排序列表，作为结果的模板一般会像下面这样：

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

Since the ListView's LayoutTemplate and ItemTemplate are each defined separately, we need some way to tell the LayoutTemplate, "Hey, for each record you are displaying, put the rendered item markup here." This is accomplished by adding a server-side control with the ID value specified by the ListView's ItemPlaceholderID property. This property defaults to a value of "itemPlaceholder", which is why I have named the PlaceHolder control in the LayoutTemplate as such. I could, however, had given the PlaceHolder control an alternate ID, but then I'd need to specify this value in the ListView's ItemPlaceholdID property.

当listView的layoutTemlate 和itemTemplate被分别定义时，我们需要一些方法告诉layoutemplate,"嗨,你生成的每条记录要呈现的标识在这里。"增加一个服务器端控件使用ID的值必须由listView的ItemPlaceholderID property来指定。这个熟悉默认值为"itemPlaceholder",这就是为什么我在layoutTemplate里面声明一个PlaceHolder控件。我愿意当然也可以得到PlaceHolder控件另外一个ID，不过我需要在ListView的itemPlaceholdiD的里指定这个值.

To output a particular field value in the ItemTemplate, use the databinding syntax, <%# Eval("columnName") %>.

在ItemTemplae输出一个特定的字段值，使用这样的绑定语法， <%# Eval("columnName") %>.

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上面绑定一个 employees数据库表，然后在itemTemplate 我们在<li>标记里生成 FullName 列。那么listView生产的标记会是怎么样的？

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

好，listview 将开始呈现它的layoutTemplate:

<ol>

                  <asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>

                </ol>

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

绑定到listView控件的每条记录将被呈现到它的ItempTemplate.结果大概如下的标记：

<li>Scott Mitchell</li>

                <li>Sam Smith</li>

                <li>Jisun Lee</li>

                <li>Andrew Fuller</li>

                <li>Edgar Johnson</li>

                <li>Ellen Plank</li>

The ItemTemplate's rendered markup is put in place of the PlaceHolder control (since its ID matches the ListView's ItemPlaceholderID value. The net result is the following markup:

ItemTemplate 生成的标识被放入到 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
An ASP.NET version 3.5 website is available at the end of this article with a demo illustrating the ListView control in action. This demo uses the Microsoft Access Northwind database, which is included in the demo application's App_Data folder. The "Simple Data" demo illustrates how to use the ListView to display records from the Northwind database's Products table. An AccessDataSource control is used to query the Products table and bind the resulting records to the ListView.

一个使用listView显示简单数据的例子
一个Asp.net 3.5版本的站点是有用的，在文档的末尾使用一个图例说明一个运转的Listvew。这个 demo使用微软 Access 的Northwind 数据库, 它被放在demo应用程序的App_Data文件夹."Simple Data" demo 说明怎样使用listView记录从Northwind库Product表现是数据。一个AccessDataSource控件被使用来查找Porduct表并且把绑定结果记录到ListView.

In particular, the ListView starts by displaying the title "Product Listing" in an <h3> element. It then lists the products within a <blockquote> element, which has the effect of indenting the output. Each product has its name, category, unit price, and quantity per unit displayed. And each product is separated from one another via a horizontal rule element (<hr>), which is defined in the ItemSeparatorTemplate.

在细节上，listView开始先显示标题"Product lising"在一个<h3>元素里。接着把产品在一个<blockquote>元素里罗列出来，这个blockquote>元素有缩进输出的效果。每个产品的名字，类别，单价，和数量会显示在每个单元格。并且每一个产品之间都由一个<hr>元素来分割，它被定义在ItemSpearaorTemplate

The ListView and AccessDataSource's declarative markup follows:

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

When this page is visited, the ListView renders into the following HTML:

当这页被访问，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>

Which appears in the visitor's browser like so:

向访问的游览器显示这样界面：

Conclusion
The ListView control, new to ASP.NET 3.5, offers the same rich data features found in the GridView, but allows for a much more flexible rendered output. As we saw in this article, the ListView's rendered output is based on the markup, databinding expressions, and Web controls added to its LayoutTemplate and ItemTemplate. There are a number of other templates available, as well, and we will explore these along with features like sorting, paging, deleting, editing, and inserting in future installments of this article series.

结论
ListView控件，ASP.NET 3.5而言是陌生的，提供如同GRIDVIEW一样丰富的数据特性，但是允许更灵活的配置输出。在这篇文章里我们看到 listView的输出是基于标识，数据绑定表达式，以及被添加到layoutTepmlate和itemplate的web控件.有许多其他的template也是有用的，在这系列的其他部分我们将探究一些其中的特性，想sorting,deleting,editing和inserting。

Until then... Happy Programming!

By Scott Mitchell

Attachments

posted on 2008-01-13 15:30 仁面寿星阅读(925) 评论(0) 编辑收藏举报