ListView Web 服务器控件

ListView是.net3.5中新增的服务器端控件，用来取代之前版本中的Repeater控件。

利用 ASP.NET ListView 控件，可以绑定从数据源返回的数据项并显示它们。这些数据可以显示在多个页面。您可以逐个显示数据项，也可以对它们分组。

ListView 控件会按照您使用模板和样式定义的格式显示数据。与 DataList 和 Repeater 控件相似，此控件也适用于任何具有重复结构的数据。但与这些控件不同的是，ListView 控件允许用户编辑、插入和删除数据，以及对数据进行排序和分页，所有这一切都无需编写代码。

通过下列方法，可以将 ListView 控件绑定到数据：

使用 DataSourceID 属性。通过此属性可以将 ListView 控件绑定到数据源控件，例如 SqlDataSource 控件。我们建议采用这种方法，因为它可以使 ListView 控件利用数据源控件的功能。此外，它还可以提供用于排序、分页、插入、删除和更新操作的内置功能。采用这种方法时，还可以使用双向绑定表达式。有关数据源控件的更多信息，请参见数据源控件概述。
使用 DataSource 属性。此属性允许绑定到各种对象，包括 ADO.NET 数据集、数据读取器以及内存中的结构（例如集合）。采用此方法时，您需要为所有附加功能（例如排序、分页和更新）编写代码。

与 DataList 和 Repeater 控件类似，ListView 控件显示的项也是用模板定义的。利用 ListView 控件，可以逐项显示数据，也可以按组显示数据。

通过创建 LayoutTemplate 模板，可以定义 ListView 控件的主要（根）布局。LayoutTemplate 必须包含一个充当数据占位符的控件。例如，该布局模板可以包含 ASP.NET Table、Panel 或 Label控件（它还可以包含 runat 属性设置为“server”的 table、div 或 span 元素）。这些控件将包含 ItemTemplate 模板所定义的每个项的输出，您可以在 GroupTemplate 模板定义的内容中对这些输出进行分组。

在 ItemTemplate 模板中，需要定义各个项的内容。此模板包含的控件通常已绑定到数据列或其他单个数据元素。

对项分组

使用 GroupTemplate 模板，可以选择对 ListView 控件中的项进行分组。对项分组通常是为了创建平铺的表布局。在平铺的表布局中，各个项将在行中重复 GroupItemCount 属性指定的次数。为创建平铺的表布局，布局模板可以包含 ASP.NET Table 控件以及将 runat 属性设置为“server”的 HTML table 元素。随后，组模板可以包含 ASP.NET TableRow 控件（或 HTML tr 元素）。而项模板可以包含 ASP.NET TableCell 控件（或 HTML td 元素）中的各个控件。

使用 EditItemTemplate 模板，可以提供已绑定数据的用户界面，从而使用户可以修改现有的数据项。使用 InsertItemTemplate 模板还可以定义已绑定数据的用户界面，以使用户能够添加新的数据项。有关更多信息，请参见本主题后面的修改数据。

可用的模板

下表列出了可用于 ListView 控件的所有模板。

LayoutTemplate: 标识定义控件的主要布局的根模板。它包含一个占位符对象，例如表行 (tr)、div 或 span 元素。此元素将由 ItemTemplate 模板或 GroupTemplate 模板中定义的内容替换。它还可能包含一个 DataPager 对象。
ItemTemplate: 标识要为各个项显示的数据绑定内容。
ItemSeparatorTemplate: 标识要在各个项之间呈现的内容。
GroupTemplate: 标识组布局的内容。它包含一个占位符对象，例如表单元格 (td)、div 或 span。该对象将由其他模板（例如 ItemTemplate 和 EmptyItemTemplate 模板）中定义的内容替换。
GroupSeparatorTemplate: 标识要在项组之间呈现的内容。
EmptyItemTemplate: 标识在使用 GroupTemplate 模板时为空项呈现的内容。例如，如果将 GroupItemCount 属性设置为 5，而从数据源返回的总项数为 8，则 ListView 控件显示的最后一行数据将包含ItemTemplate 模板指定的 3 个项以及 EmptyItemTemplate 模板指定的 2 个项。
EmptyDataTemplate: 标识在数据源未返回数据时要呈现的内容。
SelectedItemTemplate: 标识为区分所选数据项与显示的其他项，而为该所选项呈现的内容。
AlternatingItemTemplate: 标识为便于区分连续项，而为交替项呈现的内容。
EditItemTemplate: 标识要在编辑项时呈现的内容。对于正在编辑的数据项，将呈现 EditItemTemplate 模板以替代 ItemTemplate 模板。
InsertItemTemplate: 标识要在插入项时呈现的内容。将在 ListView 控件显示的项的开始或末尾处呈现 InsertItemTemplate 模板，以替代 ItemTemplate 模板。通过使用 ListView 控件的 InsertItemPosition 属性，可以指定 InsertItemTemplate 模板的呈现位置。

更改项模板

下面的示例演示了项模板的基本结构。

代码<asp:ListView runat="server" ID="ListView1" 
    DataSourceID="SqlDataSource1">
  <LayoutTemplate>
    <table runat="server" id="table1" runat="server" >
      <tr runat="server" id="itemPlaceholder" ></tr>
    </table>
  </LayoutTemplate>
  <ItemTemplate>
    <tr runat="server>
      <td runat="server">
        <%-- Data-bound content. --%>
        <asp:Label ID="NameLabel" runat="server" 
          Text='<%#Eval("Name") %>' />
      </td>
    </tr>
  </ItemTemplate>
</asp:ListView>

若要逐个显示项，请向 LayoutTemplate 模板中添加一个服务器端控件，并将该控件的 ID 属性设置为 itemPlaceholder。该控件只是其他模板（通常为 ItemTemplate 模板）的占位符。这样，该控件在运行时将被其他模板中的内容替换。

说明：
通过将 ItemPlaceholderID 属性设置为一个新值，可以更改用于标识项容器的 ID 属性的值。

定义布局模板后，可以添加 ItemTemplate 模板，它通常包含用于显示数据绑定内容的控件。通过使用 Eval 方法将这些控件绑定到数据源中的值，可以指定要用于显示每个项的标记。有关 Eval元素的更多信息，请参见数据绑定表达式概述。

ItemSeparatorTemplate 模板用于标识要在各个项之间包括的内容，若要提供其他内容进行呈现，则可以使用此模板。

下图显示的布局使用多个表行来显示数据源中的每项数据。

下面的示例演示如何创建此布局。

代码<asp:ListView runat="server" ID="EmployeesListView" 
    DataSourceID="EmployeesDataSource" 
    DataKeyNames="EmployeeID">
  <LayoutTemplate>
    <table cellpadding="2" runat="server" id="tblEmployees" 
        style="460px">
      <tr runat="server" id="itemPlaceholder">
      </tr>
    </table>
    <asp:DataPager runat="server" ID="DataPager" PageSize="3">
      <Fields>
        <asp:NumericPagerField
          ButtonCount="5"
          PreviousPageText="<--"
          NextPageText="-->" />
      </Fields>
    </asp:DataPager>
  </LayoutTemplate>
  <ItemTemplate>
     <tr runat="server">
       <td valign="top" colspan="2" align="center" 
           class="EmployeeName">
         <asp:Label ID="FirstNameLabel" runat="server" 
           Text='<%#Eval("FirstName") %>' />
         <asp:Label ID="LastNameLabel" runat="server" 
           Text='<%#Eval("LastName") %>' />
       </td>
     </tr>
     <tr style="height:72px" runat="server">
       <td valign="top" class="EmployeeInfo">
         <asp:Label ID="JobTitleLabel" runat="server" 
             Text='<%#Eval("JobTitle") %>' />
         <br />
         <asp:HyperLink ID="EmailAddressLink" runat="server" 
             Text='<%#Eval("EmailAddress") %>'  
             NavigateUrl='<%#"mailto:" + Eval("EmailAddress") %>' />
         <br />
         <asp:Label ID="PhoneLabel" runat="server" 
             Text='<%#Eval("Phone") %>' />
       </td>
       <td valign="top" class="EmployeeAddress">
         <asp:Label ID="AddressLine1Label" runat="server" 
             Text='<%#Eval("AddressLine1") %>' />
         <br />
         <asp:Panel ID="AddressLine2Panel" runat="server" 
            Visible='<%#Eval("AddressLine2").ToString() != String.Empty %>'>
         <asp:Label ID="AddressLine2Label" runat="server" 
            Text='<%#Eval("AddressLine2").ToString()%>'  />
         <br />
         </asp:Panel>
         <asp:Label ID="CityLabel" runat="server" 
           Text='<%#Eval("City") %>' />,
         <asp:Label ID="StateProvinceNameLabel" runat="server" 
           Text='<%#Eval("StateProvinceName") %>' />
         <asp:Label ID="PostalCodeLabel" runat="server" 
           Text='<%#Eval("PostalCode") %>' />
         <br />
         <asp:Label ID="CountryRegionNameLabel" runat="server" 
           Text='<%#Eval("CountryRegionName") %>' />
       </td>
     </tr>
   </ItemTemplate>
</asp:ListView>

创建组模板

下面的示例演示如何创建组模板。

代码<asp:ListView runat="server" ID="ListView1" 
    DataSourceID="SqlDataSource1" 
    GroupItemCount="5">
  <LayoutTemplate>
    <table runat="server" id="table1">
      <tr runat="server" id="groupPlaceholder">
      </tr>
    </table>
  </LayoutTemplate>
  <GroupTemplate>
    <tr runat="server" id="tableRow">
      <td runat="server" id="itemPlaceholder" />
    </tr>
  </GroupTemplate>
  <ItemTemplate>
    <td runat="server">
      <%-- Data-bound content. --%>
      <asp:Label ID="NameLabel" runat="server" 
          Text='<%#Eval("Name") %>' />
    </td>
  </ItemTemplate>
</asp:ListView>

若要按组显示各项，可以在 LayoutTemplate 模板中使用一个服务器控件来充当组的占位符。例如，可以使用 TableRow 控件。请将该占位符控件的 ID 属性设置为 groupPlaceholder。在运行时，该占位符控件将被 GroupTemplate 模板中的内容替换。

随后，请再添加一个占位符控件，并将其 ID 属性设置为 itemPlaceholder。该控件只是其他模板（通常为 ItemTemplate 模板）的占位符。这样，该控件在运行时将被其他模板中的内容替换。该内容将重复 ListView 控件的 GroupItemCount 属性所指定的项次数。

最后，请添加一个 ItemTemplate 模板，并提供要在每个项的包含控件内显示的数据绑定内容。

说明：
通过为 GroupPlaceholderID 属性设置一个新值，可以更改用于标识组占位符的 ID 属性的值。

使用 ItemSeparatorTemplate 模板可以指定各个项之间的分隔符。使用 GroupSeparatorTemplate 属性可以指定各个组之间的分隔符。

下图显示的布局在每行中显示了数据源中的多个项。

下面的示例演示如何创建此布局。

代码<asp:ListView runat="server" ID="ProductsListView"
    GroupItemCount="3"
    DataSourceID="ProductsSqlDataSource" DataKeyNames="ProductID">
  <LayoutTemplate>
    <table cellpadding="2" runat="server"
           id="tblProducts" style="height:320px">
      <tr runat="server" id="groupPlaceholder">
      </tr>
    </table>
    <asp:DataPager runat="server" ID="DataPager"
                   PageSize="9">
       <Fields>
         <asp:NumericPagerField ButtonCount="3"
              PreviousPageText="<--"
              NextPageText="-->" />
       </Fields>
    </asp:DataPager>
  </LayoutTemplate>
  <GroupTemplate>
    <tr runat="server" id="productRow"
        style="height:80px">
      <td runat="server" id="itemPlaceholder">
      </td>
    </tr>
  </GroupTemplate>
  <ItemTemplate>
    <td valign="top" align="center" style="100" runat="server">
      <asp:Image ID="ProductImage" runat="server"
           ImageUrl='<%#"~/images/thumbnails/" + 
               Eval("ThumbnailPhotoFileName") %>'
           Height="49" /><br />
      <asp:HyperLink ID="ProductLink" runat="server"
           Target="_blank" Text='<% #Eval("Name")%>'
           NavigateUrl='<%#"ShowProduct.aspx?ProductID=" + 
              Eval("ProductID") %>' />
    </td>
  </ItemTemplate>
</asp:ListView>

对数据进行分页

若要使用户能够按页查看 ListView 控件中的数据，可以使用 DataPager 控件。DataPager 控件可以位于 LayoutTemplate 模板内部，也可以位于 ListView 控件之外的页面上。如果 DataPager 控件不在 ListView 控件内，则必须将 PagedControlID 属性设置为 ListView 控件的 ID。

DataPager 控件支持内置的分页用户界面。您可以使用 NumericPagerField 对象，此对象允许用户按页码选择数据页。此外也可以使用 NextPreviousPagerField 对象。利用此对象，用户可以逐页浏览数据页，也可以直接跳到第一个或最后一个数据页。数据页的大小由 DataPager 控件的 PageSize 属性设置。单个 DataPager 控件中可以使用一个或多个页导航字段对象。

另外，通过使用 TemplatePagerField 对象，还可以创建自定义分页用户界面。在 TemplatePagerField 模板中，可以使用 Container 属性来引用 DataPager 控件。此属性可提供对 DataPager 控件的各个属性的访问。这些属性包括起始行索引、页面大小，以及当前绑定到 ListView 控件的总行数。

下面的示例演示了一个在 ListView 控件的 LayoutTemplate 模板中包括的 DataPager 类。

代码<asp:ListView runat="server" ID="ListView1" 
    DataSourceID="SqlDataSource1">
  <LayoutTemplate>
    <table runat="server" id=" table1">
      <tr runat="server" id="itemPlaceholder">
      </tr>
    </table>
    <asp:DataPager runat="server" ID="DataPager" PageSize="5">
        <Fields>
          <asp:NumericPagerField ButtonCount="10"
               PreviousPageText="<--"
               NextPageText="-->" />
        </Fields>
    </asp:DataPager>
  </LayoutTemplate>
  <ItemTemplate>
    <tr runat="server">
      <%-- Data-bound content. --%>
    </tr>
  </ItemTemplate>
</asp:ListView>

下图显示的布局使用 NumericPagerField 对象基于页码显示数据页的链接。

下面的示例演示如何创建此布局。

代码<asp:DataPager runat="server" ID="DataPager" PageSize="10">
  <Fields>
    <asp:NumericPagerField ButtonCount="10"
         CurrentPageLabelCssClass="CurrentPage"
         NumericButtonCssClass="PageNumbers"
         NextPreviousButtonCssClass="PageNumbers" NextPageText=" > "
         PreviousPageText=" < " />
  </Fields>
</asp:DataPager>

下图显示的分页用户界面使用 NextPreviousPagerField 对象显示下一个、上一个、第一个以及最后一个数据页的链接。分页用户界面还包括 TemplatePagerField 模板中的自定义内容，此模板用于显示当前的项编号范围以及总项数。TemplatePagerField 模板包含一个文本框，用户可以在其中输入要移到的项的编号。指定的项将显示为页面的第一项。

下面的示例演示如何创建分页用户界面。

代码<asp:DataPager runat="server" ID="EmployeesDataPager" PageSize="8">
  <Fields>
    <asp:TemplatePagerField>
      <PagerTemplate>
        &nbsp;
        <asp:TextBox ID="CurrentRowTextBox" runat="server"
             AutoPostBack="true"
             Text="<%# Container.StartRowIndex + 1%>" 
             Columns="1" 
             style="text-align:right" 
             OnTextChanged="CurrentRowTextBox_OnTextChanged" />
        to
        <asp:Label ID="PageSizeLabel" runat="server" Font-Bold="true"
             Text="<%# Container.StartRowIndex + Container.PageSize > Container.TotalRowCount ? Container.TotalRowCount : Container.StartRowIndex + Container.PageSize %>" />
        of
        <asp:Label ID="TotalRowsLabel" runat="server" Font-Bold="true"
             Text="<%# Container.TotalRowCount %>" />
      </PagerTemplate>
    </asp:TemplatePagerField>
    <asp:NextPreviousPagerField 
         ShowFirstPageButton="true" ShowLastPageButton="true"
         FirstPageText="|<< " LastPageText=" >>|"
         NextPageText=" > " PreviousPageText=" < " />
  </Fields>
</asp:DataPager>

下面的示例演示了 TextBox 控件（包含在 TemplatePagerField 模板中）的 TextChanged 事件的事件处理程序。该处理程序中的代码会移至用户指定的数据项。

代码protected void CurrentRowTextBox_OnTextChanged(object sender, 
    EventArgs e)
{
    TextBox t = (TextBox)sender;
    DataPager pager = 
        (DataPager)EmployeesListView.FindControl("EmployeesDataPager");
    pager.SetPageProperties(Convert.ToInt32(t.Text) - 1, 
         pager.PageSize, true);
}

对数据进行排序

通过在 LayoutTemplate 模板中添加一个按钮，并将该按钮的 CommandName 属性设置为“Sort”，可以对 ListView 控件中显示的数据进行排序。该按钮的 CommandArgument 属性应设置为要用作排序依据的列名。重复单击“Sort”（排序）按钮可在排序方向 Ascending 和 Descending 之间切换。

在“Sort”（排序）按钮的 CommandArgument 属性中，可以指定多个列名。但是，ListView 控件会向整个列表的列应用该排序方向。因此，只有列表的最后一列会应用该排序方向。例如，如果CommandArgument 包含“LastName, FirstName”，则重复单击“Sort”（排序）按钮会产生某种类似于“LastName, FirstName ASC”或“LastName, FirstName DESC”的表达式。

下面的示例演示了一个 ListView 控件，它包含的“Sort”（排序）按钮将按姓氏对数据排序。

代码<asp:ListView runat="server" ID="ListView1" DataSourceID="SqlDataSource1">
  <LayoutTemplate>
    <asp:LinkButton runat="server" ID="SortButton" 
         Text="Sort" CommandName="Sort" CommandArgument="LastName" />
    <table runat="server" id="table1">
      <tr runat="server" id="itemPlaceholder">
      </tr>
    </table>
    <asp:DataPager runat="server" ID="DataPager" PageSize="20">
        <Fields>
          <asp:NumericPagerField ButtonCount="10"
               PreviousPageText="<--"
               NextPageText="-->" />
        </Fields>
    </asp:DataPager>
  </LayoutTemplate>
  <ItemTemplate>
    <tr runat="server">
      <td><asp:Label runat="server" ID="FirstNameLabel" 
               Text='<%# Eval("FirstName")' /></td>
      <td><asp:Label runat="server" ID="LastNameLabel" 
               Text='<%# Eval("LastName")' /></td>
    </tr>
  </ItemTemplate>
</asp:ListView>

动态设置排序表达式

通过动态设置 ListView 控件的排序表达式，可以创建自定义排序。若要执行此操作，请调用 Sort 方法或处理 Sorting 事件。

下面的示例演示 Sorting 事件的处理程序。此代码将向 SortExpression 属性中的所有列应用同一排序方向。

代码protected void EmployeesListView_OnSorting(object sender, 
        ListViewSortEventArgs e)
{
    if (String.IsNullOrEmpty(e.SortExpression)) { return; }
    string direction = "";
    if (ViewState["SortDirection"] != null)
        direction = ViewState["SortDirection"].ToString();

    if (direction == "ASC")
        direction = "DESC";
    else
        direction = "ASC";

    ViewState["SortDirection"] = direction;

    string[] sortColumns = e.SortExpression.Split(',');
    string sortExpression = sortColumns[0] + " " + direction;
    for (int i = 1; i < sortColumns.Length; i++)
        sortExpression += ", " + sortColumns[i] + " " + direction;
    e.SortExpression = sortExpression;
}

修改数据

通过为 ListView 控件创建模板，可允许用户编辑、插入或删除单个数据项。

若要使用户能够编辑数据项，可以向 ListView 控件添加一个 EditItemTemplate 模板。在将一个项切换至编辑模式时，ListView 控件将使用编辑模板显示该项。该模板应包含一些数据绑定控件，以便用户可以在其中编辑各个值。例如，该模板可以包含用户可以在其中编辑现有值的文本框。

若要使用户能够插入新项，可以向 ListView 控件中添加一个 InsertItemTemplate 模板。与编辑模板一样，插入模板也应该包含允许输入数据的数据绑定控件。InsertItemTemplate 模板呈现在所显示项的开始或末尾。通过使用 ListView 控件的 InsertItemPosition 属性，可以指定 InsertItemTemplate 模板的呈现位置。

通常需要向模板中添加一些按钮，以允许用户指定要执行的操作。例如，可以向项模板中添加“Delete”（删除）按钮，以允许用户删除该项。

通过在模板中添加“Edit”（编辑）按钮，可允许用户切换到编辑模式。在 EditItemTemplate 中，可以添加允许用户保存更改的“Update”（更新）按钮。此外，还可以添加“Cancel”（取消）按钮，以允许用户在不保存更改的情况下切换回显示模式。

通过设置按钮的 CommandName 属性，可以定义按钮将执行的操作。下表列出了一些 CommandName 属性值，ListView 控件已内置了针对这些值的行为。

Select: 显示所选项的 SelectedItemTemplate 模板的内容。
Insert: 在 InsertItemTemplate 模板中，指定应将数据绑定控件的内容保存在数据源中。
Edit: 指定 ListView 控件应切换到编辑模式，并使用 EditItemTemplate 模板显示项。
Update: 在 EditItemTemplate 模板中，指定应将数据绑定控件的内容保存在数据源中。
Delete: 从数据源中删除项。
Cancel: 取消当前操作。显示 EditItemTemplate 模板时，如果该项是当前选定的项，则取消操作会显示 SelectedItemTemplate 模板；否则将显示 ItemTemplate 模板。显示 InsertItemTemplate模板时，取消操作将显示空的 InsertItemTemplate 模板。
（自定义值）: 默认情况下，不执行任何操作。您可以为 CommandName 属性提供自定义值。随后可以在 ItemCommand 事件中测试该值并执行相应的操作。

有关配置为允许执行编辑、删除和插入操作的 ListView 控件的示例，请参见演练：使用 ListView Web 服务器控件修改数据。

返回页首

对 ListView 项应用样式

ListView 控件不支持 BackColor 和 Font 等样式属性。若要向 ListView 控件应用样式，必须对 ListView 模板中的各个控件应用级联样式表 (CSS) 类或内联样式元素。

某些对象支持允许对输出元素设置样式的属性。例如，NumericPagerField 对象包括下列属性：

NumericButtonCssClass 属性，可为用于按页码在数据页间移动的按钮指定 CSS 类名。
CurrentPageLabelCssClass 属性，可为当前页码指定 CSS 类名。
NextPreviousButtonCssClass 属性，可为用于移到数字按钮的下一个或上一个组的按钮指定 CSS 类名。

下表列出了与 ListView 控件相关的关键类。

类	说明
ListView	一个服务器控件，它使用用户定义的模板显示数据源的值。此控件可配置为允许用户选择、删除、编辑和插入记录，以及对记录进行排序。
ListViewItem	一个对象，表示 ListView 控件中的项。
ListViewDataItem	一个对象，表示 ListView 控件中的数据项。
ListViewItemType	一个枚举，用于标识 ListView 控件中各个项的功能。
DataPager	一个服务器控件，可为实现 IPageableItemContainer 接口的控件（例如 ListView 控件）提供分页功能。
NumericPagerField	一个 DataPager 字段，它允许用户按页码选择数据页。
NextPreviousPagerField	一个 DataPager 字段，它允许用户逐页浏览数据页，或者跳到第一个或最后一个数据页。
TemplatePagerField	一个 DataPager 字段，它允许用户创建自定义分页用户界面。

From:http://msdn.microsoft.com/zh-cn/library/bb398790(v=VS.90).aspx