VS 2008/ASP.NET 3.5のホームへ戻る

ListViewコントロール

 

ASP.NET 3.5では、DataコントロールにListViewコントロールが追加されます。ListViewGridViewコントロールのように<table>タグが生成されませんので、Repeaterコントロールのようにレコードを自由にレイアウトすることができます。ListViewのレイアウトはLayoutTemplateで宣言します。ItemTemplateには、データベースのレコードをバインドします。そしてItemTemplateにバインドしたレコードがLayoutTemplateに挿入されます。

 

ここでは、ListViewに得意先(Customers)テーブルの得意先ID、得意先名、担当者名、電話番号を表示しています。ListViewItemTemplateに宣言した得意先データがLayoutTemplatePlaceHolder(itemPlaceHolder)に挿入されて表示されます。

 

<asp:ListView ID="ListView1" runat="server"

  DataSourceID="SqlDataSource1">

  <LayoutTemplate>

    <h3>得意先リスト</h3>

    <blockquote>

      <asp:PlaceHolder ID="itemPlaceHolder" runat="server" />

    </blockquote>

  </LayoutTemplate>

  <ItemSeparatorTemplate>

    <hr />

  </ItemSeparatorTemplate>

  <ItemTemplate>

    <h4><%#Eval("CompanyName")%></h4>

    <%#Eval("CustomerID")%>,

    <%#Eval("ContactName")%>,

    <%#Eval("Phone")%>

  </ItemTemplate>

</asp:ListView>

 

 

ListViewCustomersテーブルをバインドして表示した例

 

ListViewGroupTemplateを追加すると得意先を複数列で表示することも可能です。ここでは、ListViewGroupItemCountプロパティに「3」を設定して得意先を3列で表示しています。

 

<asp:ListView ID="ListView1" runat="server"

  DataSourceID="SqlDataSource1" GroupItemCount="3">

  <LayoutTemplate>

    <table>

      <tr>

        <td>

          <table border="0" cellpadding="5">

            <asp:PlaceHolder runat="server" ID="groupPlaceHolder" />

          </table>

        </td>

      </tr>

    </table>

  </LayoutTemplate>

  <GroupTemplate>

      <tr>

        <asp:PlaceHolder runat="server" ID="itemPlaceHolder" />

      </tr>

  </GroupTemplate>

  <ItemTemplate>

        <td>

           <h2><%#Eval("CompanyName")%></h2>

           担当: <%#Eval("ContactName")%><br />

           電話: <%#Eval("Phone")%>

        </td>

  </ItemTemplate>

</asp:ListView>

 

ListViewCustomersテーブルを3列で表示した例

VS 2008/ASP.NET 3.5のホームへ戻る