Visual Studio 2008で進化するASP.NET 3.5の開発手法（後篇）

VS 2008を利用したASP.NET 3.5の開発方法を学習する 3

ListViewコントロール

　ListViewコントロールは、言うなればGridViewコントロールとRepeaterコントロールの中間に属するコントロールです。大きく4つの特徴を備えています。

ListViewコントロールの特徴比較

Dataコントロール	データの編集/更新	ソート	テンプレートの種類	HTMLの出力
ListViewコントロール	○	○	種類が豊富でさまざまな場面のテンプレート有	HTMLは自動生成しない
GridViewコントロール	○	○	有るが種類は少ない	コントロールがHTMLを自動生成する
Repeaterコントロール	×	×	有るが種類は少ない	HTMLは自動生成しない

　このようにListViewコントロールは、GridViewコントロールが備えている編集/更新、ソートの機能を利用しつつ、Repeaterコントロールのようにテンプレートを利用したHTMLの出力が行えます。以上の点から、ListView/DataPagerコントロールは設定の手間がかかる反面、利用する機会が多くなるコントロールだと思います。

　次にListViewコントロールのテンプレートと概要を次にまとめます。

ListViewコントロールのテンプレート

テンプレート名	テンプレート概要
LayoutTemplate（Runtime View）	実行時のListViewコントロール全体の外枠
ItemTemplate	項目テンプレート
AlternatingItemTemplate	1行ごとの項目
SelectedItemTemplate	選択項目
EditItemTemplate	編集項目
InsertItemTemplate	挿入項目
EmptyItemTemplate	最後の行のいくつかの列が空の時に表示される項目
EmptyDataTemplate	レコードを持たないデータソースにバインドされた時に表示される項目
ItemSeparatorTemplate	項目区切り
GroupSeparatorTemplate	グループ区切り

DataPagerコントロール

　DataPagerコントロールは、ページングの機能を提供するコントロールです。DataPagerコントロール自体は独立した一個のコントロールですが、ASP.NET3.5の時点ではListViewコントロールと併せた場合のみ、利用することができます。例えば、GridViewやDetailsViewなど既存のコントロールと組み合わせた利用はできませんので、注意してください。

　DataPagerコントロールを利用するための設定は非常にシンプルで、フォームデザイナに貼り付けた後でPagerControlIDプロパティ（ページ機能を適用するListViewコントロール）の指定を行うだけです。

ListViewコントロールとDataPagerコントロールの利用方法

　ListViewコントロールとDataPagerコントロールをダイアログの設定のみで利用する方法と、最低限のHTMLの記述で利用する方法の2種類を紹介します。

ListViewコントロールとDataPagerコントロールをコーディングレスで利用する

　サンプルのデータソースは前項と同じ設定のLinqDataSourceコントロールとListViewコントロール、DataPagerコントロールを利用します（サンプルソースは「ListViewTemplate.aspx」）。

　フォームデザイナ上に配置した直後のListViewコントロールのタスクメニューには、データソースの選択しか表示されません。ここでは前項と同じ設定を行ったLinqDataSourceコントロールを利用します。

　データソースとの関連付けにより、タスクメニューにListViewの構成を設定する［Configure ListView］と、各テンプレートの表示切り替えを行う［Current View］の2つの項目が表示されます。

　［Configure ListView］はダイアログによるListViewコントロールの設定を行います。このダイアログでは3つの設定とプレビューが用意されます（図25）。

図25 ListViewの構成ダイアログ

　このダイアログの設定により、ListViewコントロールのHTMLが自動生成されます。各テンプレートの特性を理解するためにも、最初はこのダイアログでレイアウトを選択することをお勧めします。サンプルでは下記の要領で設定を行い、［OK］をクリックします。

• レイアウト： グリッド
• 書式設定： なし
• オプション： 編集、ページングを有効

　個々のテンプレートに対する定義内容は、HTMLデザイナで確認できます。

　［ページングを有効にする］にチェックを付けた場合、DataPagerコントロールがLayoutTemplate内に生成されます。既定の設定のままだと、次のようなタグが生成されます。

DataPagerコントロール

<asp:datapager ID="DataPager1" runat="server">
    <Fields>
        <asp:nextpreviouspagerfield ButtonType="Button"
            FirstPageText="最初" LastPageText="最後"
            NextPageText="次へ" PreviousPageText="前へ"
            ShowFirstPageButton="True" ShowLastPageButton="True" />
    </Fields>
</asp:datapager>

　実行すると次のように表示されます（図26）。

図26 ListViewコントロール実行画面

　ここまでの設定で、コーディングレスでページングや編集機能を実装できることが確認できます。しかし、自動生成されたHTMLは利用されない部分も含まれます。例えば、挿入を有効にしていないのにInsertItemTemplateが含まれるなどです。

　実際にデータを表示し、編集だけを行う場合に最低限必要なテンプレートはLayoutTemplate、ItemTemplate、EditItemTemplateの3つです。また、LayoutTemplate内のHTML要素IDにitemContainerの設定を行う必要もあります。この設定がされているHTML要素内にItemTemplateが表示されることになります。itemContainerの設定がされていない場合はエラーが発生します。

　以下のサンプルソースは表示と編集だけできるように書いたものです（サンプルソースの「ListViewSample.aspx」）。実行し、[編集]ボタンをクリックすると、確かに編集画面が表示されることを確認できるはずです。

ListViewサンプル

<asp:ListView ID="ListView1" runat="server" DataKeyNames="title_id"
            DataSourceID="LinqDataSource1" >
    <Layouttemplate>
        <%--ItemTemplateを挿入するためにid="itemContainer"を設定--%>
        <div id="itemContainer" runat="server" />
        <div id="Div1" runat="server">
            <%--ListView1に対して、1ページに5項目までを
                表示するページング機能を提供--%>
            <asp:DataPager ID="DataPager3" runat="server"
                PagedControlID="ListView1" PageSize="5">
                <fields>
                    <%--数字によるページの切り替えを行う--%>
                    <asp:numericpagerfield NextPageText="..."
                        PreviousPageText="..." />
                </fields>
            </asp:DataPager>
        </div>
    </Layouttemplate>
    <ItemTemplate>
        <div>
            <asp:Button ID="EditButton" runat="server"
                CommandName="Edit" Text="編集" />
        </div>
        <%--title,price,pubdateの列を表示する埋め込みコードブロック--%>
        <div><%#Eval("title")%><br />
        <%#Eval("price")%> : <%#Eval("pubdate")%></div>
    </ItemTemplate>
    <EditItemTemplate>
        <div>
            <asp:Button ID="UpdateButton" runat="server"
                CommandName="Update" Text="更新" />
            <asp:Button ID="CancelButton" runat="server"
                CommandName="Cancel" Text="キャンセル" />
        </div>
        <div>
            <asp:TextBox ID="titleTextBox" runat="server"
                Text='<%# Bind("title") %>' /><br />
            <asp:TextBox ID="priceTextBox" runat="server"
                Text='<%# Bind("price") %>' />
            <asp:TextBox ID="pubdateTextBox" runat="server"
                Text='<%# Bind("pubdate") %>' />
        </div>
    </EditItemTemplate>
</asp:ListView>

　また、実行時にブラウザから実際に生成されたソースを確認してみましょう。テンプレート内に記述したHTMLがそのまま出力されることが確認できます（図27）。

図27 実行時のクライアントソース