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="width: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="width: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>