ListView コントロールのテンプレートの作成
ListView コントロールで表示される項目は、DataList コントロールや Repeater コントロールと同じように、テンプレートで定義されます。ListView コントロールを使用すると、データを個別の項目またはグループとして表示できます。
LayoutTemplate テンプレートを作成して、ListView コントロールのメイン (ルート) レイアウトを定義します。LayoutTemplate には、データのプレースホルダとして機能するコントロールを含める必要があります。たとえば、ASP.NET の Table コントロール、Panel コントロール、または Label コントロールをレイアウト テンプレートに含めることができます (runat 属性が "server" に設定された table、div、または span の各 HTML 要素を含めることもできます)。これらのコントロールには、ItemTemplate テンプレートの定義に従って各項目の出力が格納されます。これらは、GroupTemplate テンプレートで定義されたコンテンツにグループ化できます。
個々の項目のコンテンツは、ItemTemplate テンプレートで定義します。通常、このテンプレートには、データ列またはその他の個別のデータ要素にデータをバインドするコントロールが含まれます。
項目のグループ化
GroupTemplate テンプレートを使用して、ListView コントロールで項目をグループ化することもできます。通常は、項目を並べて表示するテーブル レイアウトを作成する場合にグループ化を行います。並べて表示するテーブル レイアウトでは、GroupItemCount プロパティで指定した数の項目が 1 行に表示されます。並べて表示するテーブル レイアウトを作成するために、レイアウト テンプレートには、ASP.NET の Table コントロールまたは runat 属性が "server" に設定された HTML table 要素を含めることができます。次に、ASP.NET の TableRow コントロール (または HTML の tr 要素) をグループ テンプレートに含めます。項目テンプレートには、ASP.NET の TableCell コントロール (または HTML の td 要素) の内部にある個々のコントロールを含めることができます。
EditItemTemplate テンプレートを使用すると、ユーザーによる既存のデータ項目の変更を可能にするデータ バインド UI を指定できます。InsertItemTemplate テンプレートを使用すると、ユーザーによる新しいデータ項目の追加を可能にするデータ バインド UI を定義できます。詳細については、後で説明する「データの変更」を参照してください。
使用できるテンプレート
項目テンプレートの作成
項目テンプレートの基本的な構造を次の例に示します。
<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>ページのトップへ