次の方法で共有

ListView Web サーバー コントロールの概要

  • [アーティクル]

更新 : 2007 年 11 月

ASP.NET の ListView コントロールを使用すると、データ ソースから返されたデータ項目にバインドし、それらを表示することができます。データはページに表示できます。各項目は、個別に表示することも、グループ化することもできます。

ListView コントロールには、テンプレートとスタイルを使用して定義した形式でデータが表示されます。これは、DataList コントロールや Repeater コントロールと同様に、反復構造を持つデータを表示する場合に便利です。ただし、それらのコントロールとは異なり、ListView コントロールでは、コードを記述しなくても、データの編集、挿入、削除、並べ替え、ページングのすべてをユーザーが実行できます。

このトピックの内容は次のとおりです。

  • ListView コントロールへのデータのバインド

  • ListView コントロールのテンプレートの作成

  • データのページング

  • データの並べ替え

  • データの変更

  • 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 を定義できます。詳細については、後で説明する「データの変更」を参照してください。

使用できるテンプレート

次の表は、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
    項目を挿入するときに表示するコンテンツを指定します。InsertItemTemplate テンプレートは、ListView コントロールによって表示される項目の先頭または末尾で、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 テンプレート) のプレースホルダとしてのみ機能します。つまり、このコントロールは実行時に他のテンプレートのコンテンツに置き換えられます。

Bb398790.alert_note(ja-jp,VS.90).gifメモ :

ItemPlaceholderID プロパティに新しい値を設定すると、項目コンテナの識別に使用する ID プロパティを変更できます。

レイアウト テンプレートを定義したら、ItemTemplate テンプレートを追加します。これには、通常、データ バインド コンテンツを表示するコントロールが含まれます。Eval メソッドを使用してデータ ソースの値にコントロールをバインドすることで、各項目の表示に使用するマークアップを指定できます。Eval メソッドの詳細については、「データ バインド式の概要」を参照してください。

項目間に表示するコンテンツを示す ItemSeparatorTemplate テンプレートを使用すると、表示する追加のコンテンツを指定できます。

次の図は、項目ごとに複数のテーブル行を使用してデータ ソースのデータを表示するレイアウトを示しています。

項目ごとに複数の行を使用する ListView

このレイアウトを作成する方法を次の例に示します。

<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") %>'  
             href='<%#"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 テンプレートを追加して、各項目が含まれているコントロールの内部を表示します。

Bb398790.alert_note(ja-jp,VS.90).gifメモ :

GroupPlaceholderID プロパティに新しい値を設定すると、グループ プレースホルダの指定に使用する ID プロパティを変更できます。

ItemSeparatorTemplate テンプレートを使用すると、項目間の区分線を指定できます。GroupSeparatorTemplate プロパティを使用すると、グループ間の区分線を指定できます。

次の図は、行ごとにデータ ソースの複数の項目を表示するレイアウトを示しています。

ListView コントロール内の行ごとの複数の項目

このレイアウトを作成する方法を次の例に示します。

<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")%>'
           href='<%#"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 オブジェクトを使用して、ページ番号に基づいてデータのページへのリンクを表示するレイアウトを示しています。

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 オブジェクトを使用して、データの次のページ、前のページ、最初のページ、および最後のページへのリンクを表示するページング UI を示しています。このページング UI には、現在の項目番号の範囲と項目の総数を表示する、TemplatePagerField テンプレートのカスタム コンテンツも含まれています。TemplatePagerField テンプレートには、移動する項目の数をユーザーが入力できるテキスト ボックスが含まれています。指定した項目がページの最初の項目として表示されます。

TemplatePagerField オブジェクトの使用

ページング UI を作成する方法を次の例に示します。

<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>

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 項目へのスタイルの適用

ListView コントロールは、BackColor や Font などのスタイル プロパティをサポートしません。スタイルを ListView コントロールに適用するには、ListView テンプレート内の個々のコントロールに対して、カスケード スタイル シート (CSS: Cascading Style Sheet) クラスまたはインライン スタイル要素を使用する必要があります。

一部のオブジェクトは、出力の要素のスタイルを設定できるプロパティをサポートしています。たとえば、NumericPagerField オブジェクトには次のプロパティが用意されています。

  • NumericButtonCssClass プロパティでは、番号を指定してデータのページに移動するボタンの CSS クラス名を指定できます。

  • CurrentPageLabelCssClass プロパティでは、現在のページ番号の CSS クラス名を指定できます。

  • NextPreviousButtonCssClass プロパティでは、番号付きボタンの次のグループまたは前のグループに移動するボタンの CSS クラス名を指定できます。

ページのトップへ

クラス リファレンス

ListView コントロールに関連する主要なクラスの一覧を次の表に示します。

クラス

説明

ListView

ユーザー定義のテンプレートを使用してデータ ソースの値を表示するサーバー コントロール。このコントロールは、ユーザーがレコードを選択、並べ替え、削除、編集、および挿入できるように構成できます。

ListViewItem

ListView コントロール内の項目を表すオブジェクト。

ListViewDataItem

ListView コントロール内のデータ項目を表すオブジェクト。

ListViewItemType

ListView コントロール内の項目の機能を識別する列挙体。

DataPager

ListView コントロールなど、IPageableItemContainer インターフェイスを実装するコントロールにページング機能を提供するサーバー コントロール。

NumericPagerField

ユーザーがページ番号でデータのページを選択できる DataPager フィールド。

NextPreviousPagerField

ユーザーが 1 ページずつ移動したり、データの最初のページや最後のページに直接移動したりできる、DataPager フィールド。

TemplatePagerField

ユーザーがカスタムのページング UI を作成できる DataPager フィールド。

ページのトップへ

コード例

次のセクションでは、ListView コントロールを使用するためのコード例を示します。

"方法" トピックと "チュートリアル" トピック

チュートリアル : ListView Web サーバー コントロールを使用したデータの表示、ページング、および並べ替え

チュートリアル : ListView Web サーバー コントロールを使用したデータの変更

ページのトップへ

参照

概念

ASP.NET のデータ バインド Web サーバー コントロールの概要

データベースへのバインド

データ ソース コントロールの概要

その他の技術情報

ASP.NET のグローバリゼーションおよびローカリゼーション

ASP.NET のユーザー補助