ListView 使用方法（Asp.Net）

您将须要用到的独有数据绑定控件。

Fritz Onion

代码下载位置: ExtremeASPNET2008_03.exe
(192 KB)
Browse the Code
Online

 文件夹

ListView 基础
ListView 和 CSS
分页
排序、编辑、插入和删除
分组

開始运行 ListView

随 Visual Studio®
2008 一同公布的 ASP.NET 3.5 引入了新的数据绑定控件—ListView。我知道您正在想什么：为什么 ASP.NET
里还须要还有一个数据绑定控件呢?毕竟，当显示数据收集时，我们已经有超过 10 个控件可供选择，当中包含逐渐不再使用的 DataGrid、新的和改进的
GridView、很可靠和简单的 Repeater、独特和灵活的 DataList、方便的 FormView 及其稍显冗余的同行
DetailsView。当然，另一维列表控件 BulletedList、ListBox、DropDownList、RadioButtonList 和
CheckBoxList。

理论上，ListView 能够代替 ASP.NET
里的全部其他数据绑定控件。这一点没有疑义。您能够使用 ListView 控件取代上面列表中的其他每一个控件。ListView
还能够使一些数据绑定任务比使用前几个控件工作起来更加便利，包含 CSS 样式设定、灵活的分页和完好的排序、插入、删除和更新功能。

我们让介绍 ListView
的典型使用模式，然后解说控件的功能，展示其灵活性和强大的能力。在本专栏的结尾，您将掌握足够的信息来决定应该在您的 ASP.NET
工具箱中保留多少个数据绑定控件。

ListView 基础

ListView
是模板驱动的控件，这意味着它默认情况下不会呈现不论什么数据——您必须以模板的形式全然指定希望它呈现的 HTML。与大多数模板控件相似，ItemTemplate
将成为您工作的重点，您须要将绑定数据集中每一行不断反复的 HTML 内容放在 ItemTemplate 里。

ListView 中的新功能，也是它与其他控件的真正不同之处在于引进了
LayoutTemplate。在 LayoutTemplate 中，您能够将要输出的顶级 HTML 定义为控件呈现的内容。比如，假设希望 ListView
作为表格呈现，则能够在 LayoutTemplate 中包括顶级 <table> 和 <thead> 元素，把行和单元格的呈现留给
ItemTemplate，如图 1 所看到的（在本演示样例中，绑定的数据源将显示包括电影标题和发行日期的简单表格）。图
2 显示了浏览器呈现。

 Figure 1 Using
LayoutTemplate and ItemTemplate

复制代码

<asp:ListView runat="server" ID="_simpleTableListView" 
  DataSourceID="_moviesDataSource">
  <LayoutTemplate>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Title</th>
          <th>Release Date</th>
        </tr>
      </thead>
      <tbody>
        <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
      </tbody>
    </table>
  </LayoutTemplate>
  <ItemTemplate>
    <tr>
      <td><%# Eval("movie_id") %></td>
      <td><%# Eval("title") %></td>
      <td><%# Eval("release_date", "{0:d}") %></td>
    </tr>
  </ItemTemplate>
</asp:ListView>

Figure
2 显示在表格中的列表 (单击该图像获得较大视图)

LayoutTemplate 和 ItemTemplate 之间的关联由 LayoutTemplate
中 ID 设置为 itemPlaceholder 的单一server端控件完毕。（您能够使用 ListView 的 ItemPlaceholderID 属性更改 ID
字符串的默认值。）在第一个演示样例中，我将 PlaceHolder 控件的实例放置在模板中，即我希望注入 ItemTemplate
内容的位置。请注意：虽然必须支持子控件，但并没有限制必须使用什么类型的控件作为占位符——ID 才是重要。比如，我能够使用server端表格行取代
PlaceHolder 控件编写 LayoutTemplate，实现相同的效果：

复制代码

<LayoutTemplate>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Title</th>
        <th>Release Date</th>
      </tr>
    </thead>
    <tbody>
      <tr runat="server" ID="itemPlaceholder" />
    </tbody>
  </table>
</LayoutTemplate>

通常情况下，出于下面两个原因，我更喜欢使用通用的 PlaceHolder
控件。第一个原因是名称匹配得非常好。并且，该控件并不呈现其自身的 HTML，而是用 ItemTemplate
的内容取代，因此假设控件除在层次结构中保留位置以外无不论什么其他目的，这是更合乎逻辑的选择。

当然，使 ListView 如此灵活的原因是您能够全然控制 LayoutTemplate
的内容。您不是仅仅能使用表格——您能够将不论什么希望呈现的 HTML 放置在 LayoutTemplate 中，仅仅要注入 itemPlaceholder 控件位置时
ItemTemplate 的内容有效就可以。下面是绑定到同样电影数据源的 ListView
演示样例，但这次不是表格，是带有标题和发行日期的电影显示在项目符号列表中（结果列表如图 3 所看到的）：

Figure
3 同样列表，不同格式 (单击该图像获得较大视图)

复制代码

   <asp:ListView runat="server"
     ID="_simpleTableListView" 
     DataSourceID="_moviesDataSource">
     <LayoutTemplate>
       <ul>
         <asp:PlaceHolder runat="server" 
              ID="itemPlaceholder" />
       </ul>
     </LayoutTemplate>
     <ItemTemplate>
       <li><%# Eval("title") %>, 
           <%# Eval("release_date", "{0:d}") %> </li>
     </ItemTemplate>
                         </asp:ListView>

ListView 和 CSS

ASP.NET 开发者长久以来在创建 CSS
驱动的网站时都受到单独控件的限制。很多默认控件呈现内联样式，或者难于使 CSS 类与其 HTML 输出部分相关联。实际上 Microsoft 在 2006 年
4 月已公布名为“CSS 控件适配器”的工具包，该工具包为几个全然由 CSS 驱动的控件（包含
GridView）提供了可选呈现机制，帮助纠正该问题（有关具体信息，请參见 2006 年 10 月的“很 ASP.NET”专栏 msdn.microsoft.com/msdnmag/issues/06/10/ExtremeASPNET）。这些备用呈现机制从未并入完整版其中，所以须要单独安装且缺少设计人员支持。

ListView 通过让您全然控制何时何地应用样式表，使您在网站里利用 CSS
变得更为简捷。一种常见的情形是开发者为特定页面手动预先设计，通常包括 HTML 和 CSS。採用传统的 GridView
呈现数据表的特定设计总是非常难保证正确，由于 GridView 类仅提供用于改动 HTML 结果的有限挂接集。

我见过很多开发者经历过的试验和错误，将样式属性应用到网格，查看页面源以准确理解样式放置的位置，并重复试验直到网格可以按要求呈现为止。使用
ListView，您不必再做这些推測工作了，由于如今您能够控制布局和内容。

比如，如果提供给您的表格须要依照图 4 所看到的的方式显示，并使用由
.htm 和 .css 文件组成的设计，如图 5中所看到的。

 Figure 5 HTML and CSS
for the Table

HTML

复制代码

<div class="PrettyGrid">
  <table cellpadding="0" cellspacing="0" summary="">
    <thead>
      <tr>
        <th scope="col"><a href="http://.">ID</a></th>
        <th scope="col"><a href="http://.">Title</a></th>
        <th scope="col"><a href="http://.">Release date</a></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Where the Wild Things Are</td>
        <td>12/15/2008</td>
      </tr>
  <!-- ... -->
    </tbody>
  </table>
  <div class="Pagination">
    <span>1</span>
    <a href="http://.">2</a>
    <a href="http://.">3</a>
  </div>
</div>

CSS

复制代码

.PrettyGrid
{
  width: 100%;
}

.PrettyGrid div.Pagination,
.PrettyGrid div.Pagination a,
.PrettyGrid div.Pagination span
{
  color: #00FFFF;
  background: #284775;
  font-weight: normal;
  padding: 2px;
}
.PrettyGrid table
{
  border: solid 1px #CCCCCC;
  width: 100%;
}
/*...*/

Figure
4 表格目标设计 (单击该图像获得较大视图)

您可以通过从 HTML 中选取适当部分，并将其置于的相应模板中，来高速创建可以精确依照
HTML/CSS 组合要求呈现的 ListView，如图 6 所看到的。终于结果将与全然使用 CSS 设定 HTML
样式时全然一致。仅更新 HTML 或对应的 CSS 就能够非常easy地改动设计。

 Figure 6 ListView to
Construct the Table

复制代码

<asp:ListView ID="_moviesGrid" runat="server" DataKeyNames="movie_id" 
  DataSourceID="_moviesDataSource">            
  <LayoutTemplate>
    <div class="PrettyGrid">
      <table cellpadding="0" cellspacing="0" summary="">
        <thead>
          <tr>
            <th scope="col"><a href="http://.">ID</a ></th>
            <th scope="col"><a href="http://.">Title</a></th>
            <th scope="col"><a href="http://.">Release date</a></th>
          </tr>
        </thead>
        <tbody>
          <asp:PlaceHolder ID="itemPlaceholder" runat="server" />  
        </tbody>
      </table>
      <div class="Pagination">
        <span>1</span>
        <a href="http://.">2</a>
        <a href="http://.">3</a>
      </div>
    </div>
  </LayoutTemplate>

  <AlternatingItemTemplate>
    <tr class="Alternate">
      <td><asp:Label ID="movie_idLabel" runat="server" 
        Text='<%# Eval("movie_id") %>' /></td>
      <td><asp:Label ID="titleLabel" runat="server" 
        Text='<%# Eval("title") %>' /></td>
      <td><asp:Label ID="release_dateLabel" runat="server" 
        Text='<%# Eval("release_date", "{0:d}") %>' />  </td>
    </tr>
  </AlternatingItemTemplate>  

  <ItemTemplate>
    <tr>
      <td><asp:Label ID="movie_idLabel" runat="server" 
        Text='<%# Eval("movie_id") %>' /></td>
      <td><asp:Label ID="titleLabel" runat="server" 
        Text='<%# Eval("title") %>' /></td>
      <td><asp:Label ID="release_dateLabel" runat="server" 
        Text='<%# Eval("release_date", "{0:d}") %>' /> </td>
    </tr>
  </ItemTemplate>
</asp:ListView>

分页

在前一部分開始时介绍的原 HTML
设计中内含分页和排序，所以依据规范完整实现该网格的任务尚未完毕。我们先分页，然后再排序。

ListView 控件中的分页通过引入还有一个新控件 DataPager
实现。通过在单独的控件中隔离分页，DataPager 将分页 UI 与 ListView 用于呈现数据的页面分离。这意味着您能够在页面的不论什么位置放置分页
UI，而且能够创建随意多个 DataPager
控件。分页控件一个常见的应用是在数据网格的顶部和底部提供分页界面，这样用户不必滚动网格就可以导航到下一页——DataPager 能够非常easy做到这一点。

我们先在上一节的 ListView 演示样例中实现分页。要创建与 ListView 关联的
DataPager 控件，最简单方法是将 DataPager 控件实际嵌入到 ListView 的 LayoutTemplate 中：

复制代码

<asp:ListView ID="_moviesGrid"
  runat="server" DataKeyNames="movie_id" 
  DataSourceID="_moviesDataSource">            
  <LayoutTemplate>
    <!-- ... -->
    <div class="Pagination">
      <asp:DataPager ID="_moviesGridDataPager" runat="server">
        <Fields>
          <asp:NumericPagerField />
        </Fields>
      </asp:DataPager>
    </div>
  </LayoutTemplate>
</asp:ListView>

通过将 DataPager 嵌入 ListView 的 LayoutTemplate
中，它们会建立内在联系。还有一种方法是将 DataPager 放在页面的其他位置，并通过将其 PagedControlID 设置为关联 ListView 的 ID
以便与 ListView 关联。

在这样的特例中，NumericPagerField
精确显示了我想要的界面——就是一系列显示为超链接的数字，能够导航至页面。DataPager 支持三种类型的字段：

• NumericPagerField 显示 1 2 3... 分页界面。
• NextPreviousPagerField
  显示“Next”（下一页）、“Previous”（上一页）、“First”（第一页）和“Last”（最后一页）button在行间往复。
• TemplatePagerField 让您使用 PagerTemplate 定义精确设计和实现分页接口的功能。

普通情况下，採用 DataPager 控件是为不论什么实现了 IPageableItemContainer
界面的控件（眼下 ListView 是唯一实现了该接口的控件）提供分页支持，例如以下所看到的：

复制代码

public interface IPageableItemContainer
{
    event EventHandler<PageEventArgs> TotalRowCountAvailable;
    void SetPageProperties(int startRowIndex, int maximumRows, 
                           bool databind);
    int MaximumRows { get; }
    int StartRowIndex { get; }
}

图 7 显示了 ListView、DataPager 与关联的 DataSource
控件之间的关系。DataPager 从不与用于填充 ListView 的 DataSource 直接交互，而是通过该界面查询所需的数据。

Figure 7 ListView、DataPager 和
DataSource 之间的关系 (单击该图像获得较大视图)

准备分页时，首先是 ListView 查询 DataSource
以查看其是否支持分页，假设支持，那它是否可以返回总行数。假设可以返回总行数，ListView 将检索数据源中的总行数，然后引发
TotalRowCountAvailable 事件，该事件作为其 IPageableItemContainer 接口一部分实现。不论什么关联的 DataPager
控件都将订阅该事件，并使用总行数初始化显示分页界面所需的字段。DataPager 将随后调用 ListView 的 SetPageProperties
方法设置初始行索引和要返回的最大行数。

当 ListView 从关联的数据源检索数据时，它将依据 DataPager
设置的值仅仅请求行的子集。不管何时 DataPager 更改其当前页索引（通常因为用户交互），它都将再次调用 ListView 的
SetPageProperties 以反映当前须要检索行的子集。能够通过设置 DataPager 控件的 PageSize
属性来更改一个页面上显示的记录条数，该属性的值将影响相关 ListView 中设置的最大行数信息。

DataPager 还支持 QueryStringField 属性，该属性能够彻底更改
DataPager 的工作方式。通过将 QueryStringField 属性设置为某些字符串（比如 pageNum），表示您请求 DataPager 发送
HTTP GET 请求以响应用户单击页面编号的操作，所请求的页面编号将通过您指定字符串的查询字符串參数发送，而不是通过传统的 POST
回发模式发送。

该变化带来的还有一个优点是：它让client可以创建到数据绑定 ListView
控件中特定页面的书签，由于能够在 URL 中看到页面编号。请注意，假设切换到这样的 GET 通信模式，那由 ASP.NET AJAX UpdatePanel
控件使用的 POST 回发挂接机制将无法截取分页请求，并会将其变为异步回发：

复制代码

<asp:DataPager ID="_moviesGridDataPager" runat="server"
  QueryStringField="pageNum" >
  <Fields>
    <asp:NumericPagerField />
  </Fields>
</asp:DataPager>

请注意：由于 DataPager 全然依赖 ListView 运行实际的数据分页，而 ListView
又依赖 DataSource 控件，所以对于其他数据绑定控件也存在同样的分页限制。比如，对于 SqlDataSource 控件，仅当其设置为 DataSet
模式时分页才干正常工作，这意味着须要将整个结果集载入到内存中才干运行分页。当然，您能够使用自己定义 DataSource 控件或使用
ObjectDataSource 控件自己定义自己的分页。

排序、编辑、插入和删除

假设 ListView 不具备支持排序和完备的创建、读取、更新和删除 (CRUD)
操作，那么它是不完整的。它实现每种命令的方式与 FormView 控件实现命令的方式类似。

由于 ListView 全然由模板驱动，所以对于其模板中将 CommandName
属性设置为下面七种特定命令字符串之中的一个的button，可以予以识别：Cancel（取消）、Delete（删除）、Select（选择）、Edit（编辑）、Insert（插入）、Update（更新）和
Sort（排序）。每一个命令都会启动 ListView 中的对应操作——这样假设希望为 ListView 加入�排序，那仅仅须要在 LayoutTemplate
中放置一个button（图 8 的演示样例中使用 LinkButton），将其 CommandName 属性设置为 Sort，并将
CommandArgument 设置为希望数据源进行排序的列名称。在图 8
中，我将曾经网格中每列的静态标题链接改动为可单击的链接，通过单击该链接能够请求 ListView 依据该列对数据进行排序。

 Figure 8 Sorting in
ListView

复制代码

<asp:ListView ID="_moviesGrid" runat="server" DataKeyNames="movie_id" 
  DataSourceID="_moviesDataSource">            
  <LayoutTemplate>
    <div class="PrettyGrid">
      <table cellpadding="0" cellspacing="0" summary="">
        <thead>
          <tr>
            <th scope="col">
              <asp:LinkButton ID="_movieIdSortLink" 
                CommandName="Sort" CommandArgument="movie_id" 
                runat="server">ID</asp:LinkButton>
            </th>
            <th scope="col">
              <asp:LinkButton ID="_titleSortLink" 
                CommandName="Sort" CommandArgument="title" 
                runat="server">Title</asp:LinkButton>
            </th>
            <th scope="col">
              <asp:LinkButton ID="_releaseDateSortLink"
                CommandName="Sort" CommandArgument="release_date" 
                runat="server">Release date</asp:LinkButton>
            </th>
          </tr>
        </thead>  
    <!-- ... -->
  </LayoutTemplate>
</asp:ListView>

您能够为启动编辑模式、删除行或在数据集中插入新行加入�命令button，具体过程与其他基于模板的数据绑定控件（如
FormView 和 GridView）基本同样，此处就不再赘述。

分组

ListView 的最后一个主要功能是将数据分组成子集的能力，很相似于 DataList
控件提供的功能。DataList 是表格格式的控件，它能够在所呈现数据表的每一个单元格中呈现单行数据。您能够通过设置 RepeatColumns
属性来控制将基础数据集的多少行归入单个表格行中。

因为 ListView 并不仅限于呈现表格，所以它须要更加一般的方式指定将组合呈现的项目组，而这正是
GroupTemplate 提供的方式。图 9 显示了 ListView 中
LayoutTemplate、GroupTemplate 和 ItemTemplate 元素之间的关系。GroupTemplate 能够为基础数据集中每 n
个元素指定外围 HTML，当中 n 的值由 ListView 的 GroupItemCount 属性指定。

Figure 9 ListView
中的模板 (单击该图像获得较大视图)

当在 ListView 中使用 GroupTemplate 时，不须要再在
LayoutTemplate 中指定带有 itemPlaceholder ID 的控件——该控件如今须要位于 GroupTemplate 之内。而是须要在
LayoutTemplate 中指定带有 groupPlaceholder ID 的控件（能够通过设置 ListView 的
GroupPlaceholderID 属性更改控件 ID）以说明对于基础数据集中每 n 个项目，应在哪个位置注入 GroupTemplate
的内容。

比如，图 10 中的 ListView 显示了怎样通过将
GroupTemplate 定义为搜索行，并将 ItemTemplate 设为仅布局单元格，以在表格的每一行中显示来自数据库的四个电影。结果如图
11 所看到的。

 Figure 10 Defining
Rows with GroupTemplate

复制代码

<asp:ListView ID="_groupListView" runat="server" 
  DataKeyNames="movie_id" DataSourceID="_moviesDataSource" 
  GroupItemCount="4" >
  <GroupTemplate>
    <tr>
      <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
    </tr>
  </GroupTemplate>
  <LayoutTemplate>
    <table>
      <asp:PlaceHolder ID="groupPlaceholder" runat="server" />
    </table>
  </LayoutTemplate>
  <ItemTemplate>
    <td>
      movie_id:
      <asp:Label ID="_movie_idLabel" runat="server" 
        Text='<%# Eval("movie_id") %>' /> <br />
      title:
      <asp:Label ID="_titleLabel" runat="server" 
        Text='<%# Eval("title") %>' /> <br />
      release_date:
      <asp:Label ID="_release_dateLabel" runat="server" 
        Text='<%# Eval("release_date", "{0:d}") %>' /> <br />
      <br />
    </td>
  </ItemTemplate>
</asp:ListView>

Figure 11 结果 Web 页面中的 GroupTemplate
行 (单击该图像获得较大视图)

这与使用 DataList 完毕的工作很类似，但由于使用的是
ListView，所以能够像前面所看到的的网格呈现一样轻松加入�分页和排序功能，而使用 DataList
完毕这些工作则很复杂。用于本文的下载代码包括实现了分页和排序功能的演示样例供您參考。

開始运行 ListView

您可能希望通过使用 Visual Studio 2008 中的设计器来试用 ListView
控件，该设计器能够提供五种不同的布局供您选择：网格、平铺、项目符号列表、流动和单行。您能够高速查看可用的各种布局选项——但 ListView
真正强大的功能在于您对它所呈现 HTML 的控制，所以在实际的项目中您非常可能要自行构建 LayoutTemplate。您是否最后决定今后每次遇到数据绑定都使用
ListView 呢？尽管可能有点过头——但知道您会这样做我还是非常高兴。我想今后我还会很多其它地研究这个灵活的数据绑定控件。

请将您想向 Fritz 询问的问题和提出的意见发送至 xtrmaspt@microsoft.com.

Fritz Onion 是 Pluralsight（一家 Microsoft
.NET 培训提供商）的创始人之中的一个，负责主持 Web 开发课题。Fritz 是《Essential ASP.NET》和《Essential
ASP.NET 2.0》的作者。要了解本作者，请登录 pluralsight.com/fritz。