ListView控件与DataPager控件详解

简介：

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事件。

ListView的操作

我们可以创建模板来为ListView控件提供编辑、插入、删除一条数据项的操作。

要使用户可以编辑数据，我们可以向ListView添加一个EditItemTemplate模板。当选定项切换到编辑模式的时候ListView控件使用EditItemTemplate模板来显示此项。该模板在用户编辑时应该包含绑定了数据的可输入控件。例如，TextBox控件。

要使用户可以编辑数据，我们可以向ListView添加一个InsertItemTemplate模板。与EditItemTemplate控件一样，该模板包含绑定了数据的可输入控件。通过指定InsertItemPosition 属性InsertItemTemplate模板可以选择显示在开头或者结尾部分。

我们可以向ItemTemplate、SelectedItemTemplate与AlternatingItemTemplate模板添加一个编辑按钮来使用户可以切换到编辑模式。在EditItemTemplate模板中我们可以添加更新按钮来使用户可以保存数据。同样也可以添加一个取消按钮来使用户可以不保存数据切换回显示模式。

我们可以通过为按钮设置CommandName属性来定义一个动作。下面列出了ListView控件内建的ComandName属性名称。

Select

         为选中的项显示SelectedItemTemplate模板中的内容。

Insert

       在InsertItemTemplate模板中，保存被指定的数据绑定控件。

Edit

       使ListView可以进入编辑模式，并显示EditItemTemplate中的项。

Update

       在EditItemTemplate模板中，使被绑定的控件可以保存到数据源。

Delete

       删除数据项。

Cancel

       取消当前的动作。或清空InsertItemTemplate中的控件值。

插入：

使用InsertItemTemplate模板在ListView中自定义插入界面来实现数据的插入。InsertItemTemplate一般包含一些为用户提供新记录输入的可输入控件。并且通常它也包含实现插入或取消操作的按钮控件。

向ListView中添加一个InsertItemTemplate模板。通过使用实现了双向绑定的可输入控件来建立与字段的关联。当一条数据被插入以后，ListView控件自动从可输入控件来获取字段的值。

要创建实现了内建插入与取消操作的控件，需要向模板中添加一个按钮。并设置CommandName属性为"Cancel"或"Insert"。

我们可以通过设置ListView控件的InsertItemPostion属性自由的设置插入项的位置。

看一段InsertItemTemplate的例子.

   < InsertItemTemplate >
     < tr  runat ="server"  style ="background-color:#D3D3D3" >
       < td  valign ="top" >
         < asp:Label  runat ="server"  ID ="FirstNameLabel"  
          AssociatedControlID ="FirstNameTextBox"  Text ="First Name" />
         < asp:TextBox  ID ="FirstNameTextBox"  runat ="Server"  
          Text ='<%#Bind("FirstName")  % > ' /> < br  />
         < asp:Label  runat ="server"  ID ="LastNameLabel"  
          AssociatedControlID ="LastNameTextBox"  Text ="Last Name"   />
         < asp:TextBox  ID ="LastNameTextBox"  runat ="Server"  
          Text ='<%#Bind("LastName")  % > ' /> < br  />
         < asp:Label  runat ="server"  ID ="EmailLabel"  
          AssociatedControlID ="EmailTextBox"  Text ="E-mail"   />
         < asp:TextBox  ID ="EmailTextBox"  runat ="Server"  
          Text ='<%#Bind("EmailAddress")  % > ' />
       </ td >
       < td >
         < asp:LinkButton  ID ="InsertButton"  runat ="server"  
          CommandName ="Insert"  Text ="Insert"   />
       </ td >
     </ tr >
   </ InsertItemTemplate >

   其中的 TextBox 控件就是我们所说的双向绑定控件。
 

编辑：

通过向ItemTemplate、SelectedItemTemplate与AlternatingItemTemplate中添加按钮，并将按钮CommandName属性定义为"Edit" ，ID定义为"EditButton"。通过点击按钮来启动编辑状态。下面是AlternatingItemTemplate中的示例。

             < AlternatingItemTemplate >
                 < tr  style ="" >
                     < td >
                         < asp:Button  ID ="EditButton"  runat ="server"  CommandName ="Edit"  Text ="Edit"   />
                     </ td >
                    //后面的代码省略

使用EditItemTemplate模板在ListView中自定义数据编辑模式。EditItemTemplate一般包含一些为用户提供记录修改的可输入控件。并且通常它也包含实现更新或取消操作的按钮控件。

向ListView中添加一个EditItemTemplate模板。通过使用实现了双向绑定的可输入控件来建立与字段的关联。当一条数据被插入以后，ListView控件自动从可输入控件来获取字段的值。

要创建实现了内建更新与取消操作的控件，需要向模板中添加一个按钮。并设置CommandName属性为"Cancel"或" Update "。

EditItemTemplate模板举例：

         < EditItemTemplate >
           < tr  style ="background-color: #ADD8E6"  runat ="server" >
             < td >
               < asp:LinkButton  ID ="UpdateButton"  runat ="server"  CommandName ="Update"  Text ="Update"   /> &nbsp;
               < asp:LinkButton  ID ="CancelButton"  runat ="server"  CommandName ="Cancel"  Text ="Cancel"   />
             </ td >
             < td >
               < asp:TextBox  ID ="FirstNameTextBox"  runat ="server"  Text ='<%#Bind("FirstName")  % > ' 
                MaxLength="50" /> < br  />
             </ td >
             < td >
               < asp:TextBox  ID ="LastNameTextBox"  runat ="server"  Text ='<%#Bind("LastName")  % > ' 
                MaxLength="50" /> < br  />
             </ td >
           </ tr >
         </ EditItemTemplate >
       </ asp:ListView >

 

删除：

通过向ItemTemplate、SelectedItemTemplate与AlternatingItemTemplate中添加按钮，并将按钮CommandName属性定义为" Delete "， ID定义为" DeleteButton "。通过点击按钮来启动删除事件。

下面是AlternatingItemTemplate中的示例。

             < AlternatingItemTemplate >
                 < tr  style ="" >
                     < td >
                         < asp:Button  ID ="DeleteButton"  runat ="server"  CommandName ="Delete"  Text ="Delete"   />
                     </ td >
                    //后面的代码省略

 

深入：使用ListView来显示父子表关系

实现父子表的关系，嵌套的数据显示是一种不错的方法。ListView来实现数据的嵌套可以说是小菜一叠。只需要在ItemTemplate中再放入一个ListView就可以了，或其它的数据控件。

(来源：http://www.cnblogs.com/tianyamoon/archive/2008/01/17/1043690.html)