更新 : 2007 年 11 月
ASP.NET の ListView コントロールを使用すると、データ ソースから返されたデータ項目にバインドし、それらを表示することができます。データはページに表示できます。各項目は、個別に表示することも、グループ化することもできます。
ListView コントロールには、テンプレートとスタイルを使用して定義した形式でデータが表示されます。これは、DataList コントロールや Repeater コントロールと同様に、反復構造を持つデータを表示する場合に便利です。ただし、それらのコントロールとは異なり、ListView コントロールでは、コードを記述しなくても、データの編集、挿入、削除、並べ替え、ページングのすべてをユーザーが実行できます。
このトピックの内容は次のとおりです。
ListView コントロールへのデータのバインド
ListView コントロールは、次の方法でデータにバインドできます。
DataSourceID プロパティを使用する。これにより、ListView コントロールを、SqlDataSource コントロールなどのデータ ソース コントロールにバインドできます。ListView コントロールでデータ ソース コントロールの機能を利用できるため、この方法をお勧めします。また、並べ替え、ページング、挿入、削除、および更新のための組み込み機能も用意されています。この方法では、双方向のバインド式も使用できます。データ ソース コントロールの詳細については、「データ ソース コントロールの概要」を参照してください。
DataSource プロパティを使用する。これにより、ADO.NET データセットと ADO.NET データ リーダーや、コレクションなどのインメモリ構造を含め、さまざまなオブジェクトにバインドできます。この方法では、並べ替え、ページング、更新などの追加機能のためのコードを記述する必要があります。
ページのトップへ
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>
ページのトップへ
ListView コントロールでユーザーがデータをページごとに表示できるようにするには、DataPager コントロールを使用します。DataPager コントロールは、LayoutTemplate テンプレートの内部にも、ListView コントロールの外部のページにも配置できます。DataPager コントロールが ListView コントロール内にない場合は、PagedControlID プロパティを ListView コントロールの ID に設定する必要があります。
DataPager コントロールは、組み込みのページング UI をサポートしています。NumericPagerField オブジェクトを使用すると、ユーザーがページ番号でデータのページを選択できるようになります。また、NextPreviousPagerField オブジェクトも使用できます。これにより、ユーザーは 1 ページずつ移動したり、データの最初のページや最後のページに直接移動したりできるようになります。データのページのサイズは、DataPager コントロールの PageSize プロパティを使用して設定します。1 つの DataPager コントロールで、1 つまたは複数のページャ フィールド オブジェクトを使用できます。
また、TemplatePagerField オブジェクトを使用して、カスタム ページング UI を作成することもできます。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 オブジェクトを使用して、ページ番号に基づいてデータのページへのリンクを表示するレイアウトを示しています。
.png)
このレイアウトを作成する方法を次の例に示します。
<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 オブジェクトを使用して、データの次のページ、前のページ、最初のページ、および最後のページへのリンクを表示するページング UI を示しています。このページング UI には、現在の項目番号の範囲と項目の総数を表示する、TemplatePagerField テンプレートのカスタム コンテンツも含まれています。TemplatePagerField テンプレートには、移動する項目の数をユーザーが入力できるテキスト ボックスが含まれています。指定した項目がページの最初の項目として表示されます。
.png)
ページング UI を作成する方法を次の例に示します。
<asp:DataPager runat="server" ID="EmployeesDataPager" PageSize="8">
<Fields>
<asp:TemplatePagerField>
<PagerTemplate>
<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>
TemplatePagerField テンプレートに含まれている TextBox コントロールの TextChanged イベントのイベント ハンドラを次の例に示します。このハンドラのコードは、ユーザーが指定したデータ項目に移動します。
Protected Sub CurrentRowTextBox_OnTextChanged(ByVal sender As Object, _
ByVal e As EventArgs)
Dim t As TextBox = CType(sender, TextBox)
Dim pager As DataPager = _
CType(EmployeesListView.FindControl("EmployeesDataPager"), _
DataPager)
pager.SetPageProperties(Convert.ToInt32(t.Text) - 1, _
pager.PageSize, True)
End Sub
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 プロパティを、並べ替えの基準にする列名に設定します。[並べ替え] ボタンを繰り返しクリックすると、並べ替えの方向が Ascending と Descending の間で切り替わります。
[並べ替え] ボタンの CommandArgument プロパティには、複数の列名を指定できます。ただし、ListView コントロールは並べ替えの方向を列リスト全体に対して適用します。そのため、リストの最後の列にのみ並べ替えの方向が適用されます。たとえば、CommandArgument が "LastName, FirstName" に設定されている場合、[並べ替え] を繰り返しクリックすると、"LastName, FirstName ASC" や "LastName, FirstName DESC" のような並べ替え式が生成されます。
姓でデータを並べ替える [Sort] ボタンのある ListView コントロールを次の例に示します。
<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 Sub ContactsListView_Sorting(ByVal sender As Object, _
ByVal e As ListViewSortEventArgs)
If (String.IsNullOrEmpty(e.SortExpression)) Then Return
Dim direction As String = ""
If Not (ViewState("SortDirection") Is Nothing) Then
direction = ViewState("SortDirection").ToString()
End If
If direction = "ASC" Then
direction = "DESC"
Else
direction = "ASC"
End If
ViewState("SortDirection") = direction
Dim sortColumns As String() = e.SortExpression.Split(","c)
Dim sortExpression As String = sortColumns(0) & " " & direction
Dim i As Integer
For i = 1 To sortColumns.Length - 1
sortExpression += ", " & sortColumns(i) & " " & direction
Next i
e.SortExpression = sortExpression
End Sub
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 コントロールに対して、ユーザーが 1 つのデータ項目を編集、挿入、または削除できるようにするテンプレートを作成できます。
ユーザーがデータ項目を編集できるようにするには、EditItemTemplate テンプレートを ListView コントロールに追加します。項目が編集モードに切り替えられると、ListView コントロールは、編集テンプレートを使用して項目を表示します。このテンプレートには、ユーザーが値を編集できるデータ バインド コントロールを含める必要があります。たとえば、テンプレートには、ユーザーが既存の値を編集できるテキスト ボックスを含めることができます。
ユーザーが新しい項目を挿入できるようにするには、InsertItemTemplate テンプレートを ListView コントロールに追加します。編集テンプレートと同じように、挿入テンプレートには、データを入力できるデータ バインド コントロールを含める必要があります。InsertItemTemplate テンプレートは、表示されている項目の先頭または末尾に表示されます。ListView コントロールの InsertItemPosition プロパティを使用して、InsertItemTemplate テンプレートが表示される場所を指定します。
通常は、実行するアクションをユーザーが指定できるボタンをテンプレートに追加します。たとえば、ユーザーによる項目の削除を可能にするために、項目テンプレートに [削除] ボタンを追加できます。
項目テンプレートに [編集] ボタンを追加して、編集モードへの切り替えに対応することもできます。EditItemTemplate には、変更を保存するための [更新] ボタンを含めることができます。また、変更を保存せずに表示モードに戻ることができるように、[キャンセル] ボタンを含めることもできます。
ボタンで実行されるアクションを定義するには、ボタンの CommandName プロパティを設定します。次の表は、ListView コントロールに組み込みの動作が用意されている CommandName プロパティの値の一覧です。
- Select
選択した項目に対して SelectedItemTemplate テンプレートのコンテンツを表示します。
- Insert
InsertItemTemplate テンプレートで、データ バインド コントロールのコンテンツをデータ ソースに保存することを指定します。
- Edit
ListView コントロールを編集モードに切り替え、EditItemTemplate テンプレートを使用して項目を表示することを指定します。
- Update
EditItemTemplate テンプレートで、データ バインド コントロールのコンテンツをデータ ソースに保存することを指定します。
- Delete
データ ソースから項目を削除します。
- Cancel
現在のアクションをキャンセルします。EditItemTemplate テンプレートを表示しているときにアクションをキャンセルすると、現在選択中の項目には SelectedItemTemplate テンプレートが表示され、それ以外の項目には ItemTemplate テンプレートが表示されます。InsertItemTemplate テンプレートが表示されているときにアクションをキャンセルすると、空の InsertItemTemplate テンプレートが表示されます。
- (カスタム値)
既定では、アクションは実行されません。CommandName プロパティにカスタム値を指定できます。次に、ItemCommand イベントで値を調べてアクションを実行できます。
編集、削除、および挿入を実行できるように構成された ListView コントロールの例については、「チュートリアル : ListView Web サーバー コントロールを使用したデータの変更」を参照してください。
ページのトップへ
ListView コントロールは、BackColor や Font などのスタイル プロパティをサポートしません。スタイルを ListView コントロールに適用するには、ListView テンプレート内の個々のコントロールに対して、カスケード スタイル シート (CSS: Cascading Style Sheet) クラスまたはインライン スタイル要素を使用する必要があります。
一部のオブジェクトは、出力の要素のスタイルを設定できるプロパティをサポートしています。たとえば、NumericPagerField オブジェクトには次のプロパティが用意されています。
ページのトップへ
ListView コントロールに関連する主要なクラスの一覧を次の表に示します。
ページのトップへ
次のセクションでは、ListView コントロールを使用するためのコード例を示します。
"方法" トピックと "チュートリアル" トピック
概念
その他の技術情報