与 DataList 和 Repeater 控件类似,ListView 控件显示的项也是用模板定义的。利用 ListView 控件,可以逐项显示数据,也可以按组显示数据。
通过创建 LayoutTemplate 模板,可以定义 ListView 控件的主要(根)布局。LayoutTemplate 必须包含一个充当数据占位符的控件。例如,该布局模板可以包含 ASP.NET Table、Panel 或 Label 控件(它还可以包含 runat 属性设置为“server”的 table、div 或 span 元素)。这些控件将包含 ItemTemplate 模板所定义的每个项的输出,您可以在 GroupTemplate 模板定义的内容中对这些输出进行分组。
在 ItemTemplate 模板中,需要定义各个项的内容。此模板包含的控件通常已绑定到数据列或其他单个数据元素。
对项分组
可用的模板
更改项模板
下面的示例演示了项模板的基本结构。
<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 模板)的占位符。这样,该控件在运行时将被其他模板中的内容替换。
定义布局模板后,可以添加 ItemTemplate 模板,它通常包含用于显示数据绑定内容的控件。通过使用 Eval 方法将这些控件绑定到数据源中的值,可以指定要用于显示每个项的标记。有关 Eval 元素的更多信息,请参见 数据绑定表达式概述。
ItemSeparatorTemplate 模板用于标识要在各个项之间包括的内容,若要提供其他内容进行呈现,则可以使用此模板。
下图显示的布局使用多个表行来显示数据源中的每项数据。
.png)
下面的示例演示如何创建此布局。
<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 模板,并提供要在每个项的包含控件内显示的数据绑定内容。
使用 ItemSeparatorTemplate 模板可以指定各个项之间的分隔符。使用 GroupSeparatorTemplate 属性可以指定各个组之间的分隔符。
下图显示的布局在每行中显示了数据源中的多个项。
.png)
下面的示例演示如何创建此布局。
<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>返回页首