ListView Web 服务器控件概述.docx

ListView Web 服务器控件概述.NET Framework 4其他版本 · Visual Studio 2008利用 ASP.NET ListView 控件，可以绑定从数据源返回的数据项并显示它们。这些数据可以显示在多个页面。您可以逐个显示数据项，也可以对它们分组。ListView 控件会按照您使用模板和样式定义的格式显示数据。与 DataList 和 Repeater 控件相似，此控件也适用于任何具有重复结构的数据。但与这些控件不同的是，ListView 控件允许用户编辑、插入和删除数据，以及对数据进行排序和分页，所有这一切都无需编写代码。本主题包括：· 将数据绑定到 ListView 控件· 为 ListView 控件创建模板· 对数据进行分页· 对数据进行排序· 修改数据· 对 ListView 项应用样式· 类参考· 代码示例· 其他资源将数据绑定到 ListView 控件通过下列方法，可以将 ListView 控件绑定到数据：· 使用 DataSourceID 属性。通过此属性可以将 ListView 控件绑定到数据源控件，例如 SqlDataSource 控件。我们建议采用这种方法，因为它可以使 ListView 控件利用数据源控件的功能。此外，它还可以提供用于排序、分页、插入、删除和更新操作的内置功能。采用这种方法时，还可以使用双向绑定表达式。有关数据源控件的更多信息，请参见数据源控件概述。· 使用 DataSource 属性。此属性允许绑定到各种对象，包括 ADO.NET 数据集、数据读取器以及内存中的结构（例如集合）。采用此方法时，您需要为所有附加功能（例如排序、分页和更新）编写代码。返回页首为 ListView 控件创建模板与在 DataList 和 Repeater 控件中使用模板的方法类似，ListView 控件显示的项可以由模板定义。利用 ListView 控件，可以逐项显示数据，也可以按组显示数据。如果使用的是布局模板，则可以通过创建 LayoutTemplate 模板来定义 ListView 控件的主（根）布局。LayoutTemplate 必须包含一个充当数据占位符的控件。例如，该布局模板可以包含 ASP.NET Table、Panel 或 Label 控件。（它还可以包含 runat 特性设置为“server”的 table、div 或 span 元素）。如果没有定义布局模板，则会自动插入一个占位符控件。此占位符控件包含 ItemTemplate 模板所定义的每个项的输出，您可以在 GroupTemplate 模板定义的内容中对这些输出进行分组。在 ItemTemplate 模板中，需要定义各个项的内容。此模板包含的控件通常已绑定到数据列或其他单个数据元素。对项分组使用 GroupTemplate 模板，可以选择对 ListView 控件中的项进行分组。对项分组通常是为了创建平铺的表布局。在平铺的表布局中，各个项将在行中重复 GroupItemCount 属性指定的次数。注意在未定义布局的情况下，如果将 GroupItemCount 属性设置为一个大于零的值，并且还定义 ItemTemplate 属性，则此控件会如同定义了 LayoutTemplate 属性一样工作。如果定义 LayoutTemplate 属性，则 PlaceHolder 控件必须存在。为创建平铺的表布局，布局模板可以包含 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" > <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>下面的示例演示了采用布局模板的项模板的基本结构。复制<asp:ListView runat="server" ID="ListView1" DataSourceID="SqlDataSource1"> <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>返回页首对数据进行分页若要使用户能够按页查看 ListView 控件中的数据，可以使用 DataPager 控件。DataPager 控件可以位于 LayoutTemplate 模板内部，也可以位于 ListView 控件之外的页面上。如果 DataPager 控件不在 ListView 控件内，则必须将 PagedControlID 属性设置为 ListView 控件的 ID。DataPager 控件支持内置的分页用户界面。您可以使用 NumericPagerField 对象，此对象允许用户按页码选择数据页。此外也可以使用 NextPreviousPagerField 对象。利用此对象，用户可以逐页浏览数据页，也可以直接跳到第一个或最后一个数据页。默认情况下，如果用户在某个页上选择一个行，则将在每个页上选择此行。如果您只想为用户已选定的行（由此行的数据键标识）保持选择，则可以将 EnablePersistedSelection 属性设置为 true。数据页的大小由 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 事件的事件处理程序。该处理程序中的代码会移至用户指定的数据项。VBC#C+F#JScript复制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 属性中的所有列应用同一排序方向。VBC#C+F#JScript复制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 = sortColumns0 + " " + direction; for (int i = 1; i < sortColumns.Length; i+) sortExpression += ", " + sortColumnsi + " " + direction; e.SortExpression = sortExpression;返回页首修改数据通过为 ListView 控件创建模板，可允许用户编辑、插入或删除单个数据项。若要使