第六篇：ListView控件与DataPager控件详解（1）

 

简介：

VS2008提供的新控件中只有ListView与DataPaper两个控件。ListView是一个很强大的控件，他可以实现其它数据控件可以实现的任意功能。而且ListView也前所未有的灵活。通过定义它的模板我们几乎可以实现任意一种数据展现方式。ListView提供了默认的5种展现样式Grid、Tiled、Bulleted List、Flow和SigleRow。下面五张图分别为这五种样式的最终效果。

Grid

BulletedList

DefaultTiled

Flow

入门：

要真正了解ListView最好是能自己试验下。下面演示一下如何使用拖拽方式使用这两个控件。有开发经验的同志可以直接跳过这部分。

1、 新建一个web项目或web站点

2、 使用Ctrl+N创建一个新的WebForm

3、 双击工具箱面板中的ListView控件在页面上添加一个ListView。

4、使用右键通过快捷菜单的Show Smart Tag打开Smart Tag窗口。

5、选择一个数据源，参见第二篇。

6、使用Smart Tag配置List View。

7、 选择Layout、Style、Options与分页方式。

8、 使用Shift+F5浏览页面内容。

进阶：

ListView之所以功能强大并且灵活其主要功劳是他的模板列与之前出现的模板有本质的不同。在ListView中布局定义与数据绑定分开在不同的模板中，然后再根据布局使用绑定的数据元素替换布局元素的方式来展现数据。例如：

Code
                           <table ID="itemPlaceholderContainer" runat="server" border="1">

                                <tr>

                                <th colspan="6">Customers</th>

                                </tr>

                                <tr runat="server">

                                    <th runat="server">

                                        CompanyName</th>

                                    <th runat="server">

                                        ContactName</th>

                                    <th runat="server">

                                        ContactTitle</th>

                                    <th runat="server">

                                        Address</th>

                                    <th runat="server">

                                        City</th>

                                    <th runat="server">

                                        CustomerID</th>

                                </tr>

                                <tr ID="itemPlaceholder" runat="server">

                                </tr>

                            </table>

 其显示样式跟标准Table完全一样。

其中<tr ID="itemPlaceholder" runat="server"></tr>是必不可少的元素，由它来指定重复替换的元素。这样的方式使得我们定义布局更方便自由。灵活也就是理所当然的了。

现在来详细看看ListView的模板。

（以下ListView的模板部分内容翻译自MSDN）

l LayoutTemplate：指定用来定义ListView控件布局的根模板。它包括占位符对象，例如：table row (tr), div, 或 span 元素. 这个元素将被定义在ItemTemple模板或GroupTemple模板中的内容替换。也可以包含一个DataPager对象。

l ItemTemplate：为 TemplateField 对象中的项指定要显示的内容。

l ItemSeparatorTemplate：在 TemplateField 对象中的项之间指定要显示的内容。

l GroupTemplate：为分组布局指定内容。它包括占位符对象，例如：table row (tr), div, 或 span 元素.这个元素将被定义在ItemTemple模板或EmptyItemTemplate模板中的内容替换。

l GroupSeparatorTemplate：为分组项之间指定要显示的内容。

l EmptyItemTemplate：指定使用GroupTemplate时的空项内容。例如，如果GroupItemCount属性设置为5，并且数据源返回的总数为8，ListView控件最后一行将有3项根据ItemTemple显示，两项根据EmptyTemplate显示。

l EmptyDataTemplate：指定数据源为空时的内容。

l SelectedItemTemplate：为选中项指定显示内容。

l AlternatingItemTemplate：为交替项指定要显示的内容。

l EditItemTemplate：为编辑项指定要显示的内容。当数据进行编辑时EditItemTemplate将替换ItemTemple的数据。

l InsertItemTemplate：为插入项指定要显示的内容。当数据进行编辑时InsertItemTemplate将替换ItemTemple的数据。

ListView的显示样式：

LayoutTemplate

要使用LayoutTemplate只需要在<asp:ListView>中增加<LayoutTemplate></LayoutTemplate>标记，再在LayoutTemplate使用表示样式的Html就可。

下面看几个例子：

如何实现下面的显示样式呢？

其实也很简单，我们只需要在LayoutTemplate中加入如下Html代码：

< LayoutTemplate >

                 < table  runat ="server"  border ="1"   >

                     < tr  ID ="itemPlaceholderContainer"  runat ="server" >

                         < td  ID ="itemPlaceholder"  runat ="server" >

                         </ td >

                     </ tr >

                 </ table >

</ LayoutTemplate >

< td ID="itemPlaceholder" runat="server"></td> 也就代表了我们对td 元素进行重复替换。

 

那么我们又如何实现的每页只显示3项数据信息的呢？这就要看DataPager了，在LayoutTemplate内加入分页控件。

            < LayoutTemplate >

                 < table  runat ="server"  border ="1"   >

                     < tr  ID ="itemPlaceholderContainer"  runat ="server" >

                         < td  ID ="itemPlaceholder"  runat ="server" >

                         </ td >

                     </ tr >

                 </ table >

                             < asp:DataPager  ID ="DataPager1"  runat ="server"  PageSize ="3" >

                                 < Fields >

                                     < asp:NextPreviousPagerField  ButtonType ="Button"  ShowFirstPageButton ="True"  

                                        ShowLastPageButton ="True"   />

                                 </ Fields >

                             </ asp:DataPager >                         

             </ LayoutTemplate >

 我们设置了PageSize="3"也就是说每页有6项。关于DataPager我们稍后再说，下面对ListView的讲解讲先略过对分页的说明。

再看这样的布局方式：

对HTML代码了解比较深的应该应经想到了这是一个ul样式，对的，正是如此。来看看具体的LayoutTemplate内部的html。

                 < ul  ID ="itemPlaceholderContainer"  runat ="server" >

                     < li  ID ="itemPlaceholder"  runat ="server"   />

                     </ ul >

是不是非常简单呢？你要不要也试试这两个？

 

题目1：

题目2：

GroupTemplate

来看这幅图：

似乎没办法来完成了，不错只是前面的方法的确是无法来完成了，现在就要使用GroupTemplate了。我们来看看是如何完成的。

首先我们将LayoutTemplate内部的被替换元素的ID“itemPlaceholderContainer”换成“groupPlaceholderContainer”，这样来告知替换元素为组替换。

             < LayoutTemplate >

                             < table  ID ="groupPlaceholderContainer"  runat ="server"  border ="1" >

                                 < tr  ID ="groupPlaceholder"  runat ="server" >

                                 </ tr >

                             </ table >                     

             </ LayoutTemplate >

然后我们再为ListView 添加一个GroupTemplate 元素，如下：

                 < GroupTemplate >

                     < tr  ID ="itemPlaceholderContainer"  runat ="server" >

                         < td  ID ="itemPlaceholder"  runat ="server" >

                         </ td >

                     </ tr >

                 </ GroupTemplate >

读过了上面的LayoutTemplate模板的教程应该可以明白这段的意思了吧。通过itemPlaceholderContainer知道这是一段要被替换的元素，而且是根据tr进行行替换。然后再配合LayoutTemplate形成分组。

我们是如何来定义每行的列数的呢？只需要在ListView里添加一个属性定义       
<asp:ListView ID="ListView1" runat="server" DataKeyNames="CategoryID" DataSourceID="LinqDataSource1" GroupItemCount="3">

我们这里设置GroupItemCount属性的值为3，也就代表我们的每个Group里面包含的3项。

那么我们又如何实现的每页只有两行呢？有朋友应该猜出来了，是DataPager了，对只需要在LayoutTemplate内加入分页控件，并将其PageSize设为6就可以了。

EmptyDataTemplate

这个模板是用来替换当数据源为空时候的显示布局的，比如：
<EmptyDataTemplate> 
No data was returned.
</EmptyDataTemplate>
其结果就是如果用来替换LayoutTemplate的数据源为空，那么将显示这么一句话No data was returned. 在EmptyDataTemplate我们也可以向LayoutTemplate使用复杂的Html。

EmptyItemTemplate

EmptyItemTemplate是用来替换空数据项的。比如
<EmptyItemTemplate>
     <td runat="server" />
</EmptyItemTemplate>
意思就是如果如果Item数据为空将使用一个替换一个空的td来保持table的完整。

DataPageControl

要使用DataPageControl用来向实现了IPageableItemContainer接口的控件提供分页。比如ListView控件。

虽然Visual Studio 2008中实现了IPageableItemContainer的控件只有ListView。不过也不要因为如此就觉得它是鸡肋，我们可以通过自己实现IPageableItemContainer自定义自己的控件，然后再用DataPageControl分页，这个我们以后会再提到。

要在ListView中使用DataPageControl只需要在LayoutTemplate模板中加入DataPager控件，如LayoutTemplate介绍中的第一个例子。

我们来看看DataPageControl默认两种分页方式Next/Previous与Numeric。

Next/Previous样式：

Next/Previous

实现代码：

         < asp:DataPager  ID ="DataPager1"  runat ="server" >

             < Fields >

                 < asp:NextPreviousPagerField  ButtonType ="Button"  ShowFirstPageButton ="True"  

                    ShowLastPageButton ="True"   />

             </ Fields >

         </ asp:DataPager >

Numeric样式：

Numeric

实现代码：

         < asp:DataPager  ID ="DataPager1"  runat ="server" >

             < Fields >

                 < asp:NextPreviousPagerField  ButtonType ="Button"  ShowFirstPageButton ="True"  

                    ShowNextPageButton ="False"  ShowPreviousPageButton ="False"   />

                 < asp:NumericPagerField  />

                 < asp:NextPreviousPagerField  ButtonType ="Button"  ShowLastPageButton ="True"  

                    ShowNextPageButton ="False"  ShowPreviousPageButton ="False"   />

             </ Fields >

         </ asp:DataPager >

除了这两个方式之外我们还可以自定义它，首先向DataPager中的Fields中添加TemplatePagerField，再在TemplatePagerField中添加PagerTemplate，在PagerTemplate中我们可以添加任意服务器控件，来扩展我们的功能。然后通过定义TemplatePagerField的OnPagerCommand事件来实现我们的功能。

下面的例子我们向分页控件中添加了一个button来实现展开全部数据的功能。

                         < asp:DataPager  ID ="DataPager1"  runat ="server"  PageSize ="3" >

                             < Fields >                                      < asp:TemplatePagerField  OnPagerCommand ="ButtonExpandAll_Click" >

                                     < PagerTemplate >

                                     < asp:Button  ID ="ButtonExpandAll"  runat ="server"  Text ="Expand All" />

                                     </ PagerTemplate >

                                     </ asp:TemplatePagerField >

                             </ Fields >

                         </ asp:DataPager >

除此之外我们还要在C#代码中实现ButtonExpandAll_Click事件。

OK，今天就先到这里，明天我们继续来实现ListView的其它功能。