特集：Visual Studio 2008＆ASP.NET 3.5 ASP.NETアプリ開発者のための Visual Studio 2008新機能 Part III 山田祥寛（http://www.wings.msn.to/） 2008/03/14
Page1 Page2 Page3 Page4

　テンプレートにはバインド式*3を含める必要があるなど、テンプレート固有の記述もないではないが、おおむね、通常のページを編集するのと同じ要領で記述できるはずだ。以下では、ListViewコントロールのテンプレートを定義するうえで注意したい点を、いくつか補足しておくことにする。

*3 バインド式については、拙稿「テンプレート機能でGridViewコントロールも自由自在」でも詳説しているので、併せて参考にしていただきたい。

（1）フォーム・デザイナでは編集できないテンプレートがある

　ListViewコントロールで公開されているテンプレートのうち、次の4つについては、フォーム・デザイナからは編集できない。

• LayoutTemplate
• GroupTemplate
• ItemSeparatorTemplate
• GroupSeparatorTemplate

これらテンプレートについては、コード・エディタから直接に編集する必要がある。そのほかのテンプレートについても、フォーム・デザイナで直接に編集しにくい微細な部分については、分割ビューを活用しつつ、フォーム・デザイナ／コード・エディタを併用していくとよいだろう。

　コード・エディタでテンプレートを編集するには、以下のリストのように<asp:ListView>タグの配下に「<テンプレート名>〜</テンプレート名>」の形式で、テンプレート定義を記述すればよい。

　以下は、自動生成されたListViewコントロールのコードである（内容を把握しやすいように適宜、改行や省略を行っている）。

<asp:ListView ID="list" runat="server" DataKeyNames="isbn" DataSourceID="sds"   GroupItemCount="3" InsertItemPosition="LastItem">   <AlternatingItemTemplate>     <td runat="server" style="">     ……中略……     </td>   </AlternatingItemTemplate>   <LayoutTemplate>     <table runat="server">     ……中略……     </table>   </LayoutTemplate>   <EmptyItemTemplate>     <td runat="server" />   </EmptyItemTemplate>   <InsertItemTemplate>     <td runat="server" style="">     ……中略……     </td>   </InsertItemTemplate>   <SelectedItemTemplate>     <td runat="server" style="">     ……中略……     </td>   </SelectedItemTemplate>   <GroupTemplate>     <tr ID="itemPlaceholderContainer" runat="server">     ……中略……     </tr>   </GroupTemplate>   <EmptyDataTemplate>     <table runat="server" style="">     ……中略……     </table>   </EmptyDataTemplate>   <EditItemTemplate>     <td runat="server" style="">     ……中略……     </td>   </EditItemTemplate>   <ItemTemplate>     <td runat="server" style="">     ……中略……     </td>   </ItemTemplate> </asp:ListView>

リスト1 ListViewコントロールのテンプレート定義（ListView.aspx）

（2）LayoutTemplate／GroupTemplateテンプレートの定義

　LayoutTemplate／GroupTemplateテンプレートには、それぞれID値が「groupPlaceHolder」「itemPlaceHolder」である要素*4が含まれている必要がある。これらの要素は、それぞれ個々のグループ、データ項目が実際に埋め込まれるプレイスホルダを表すもので、省略することはできない（省略した場合にはデータが正しく表示されない）。

　実際に、自動生成されたテンプレート定義を、コード・エディタから確認してみると、以下のようなコードが確認できるはずだ。

<asp:ListView ID="list" runat="server" DataKeyNames="isbn"   DataSourceID="sds" GroupItemCount="3">   <LayoutTemplate>     <table runat="server">       <tr runat="server">         <td runat="server">           <table ID="groupPlaceholderContainer"             runat="server" border="0" style="">             <tr ID="groupPlaceholder" runat="server">             </tr>           </table>         </td>       </tr>     </table>   </LayoutTemplate>   ……中略……   <GroupTemplate>     <tr ID="itemPlaceholderContainer" runat="server">       <td ID="itemPlaceholder" runat="server">       </td>     </tr>   </GroupTemplate> </asp:ListView>

リスト2 ListViewコントロールのテンプレート定義（ListView.aspx）

*4 プレイスホルダを表すID値は、それぞれGroupPlaceholderID／ItemPlaceholderIDプロパティで変更することも可能だ。ここで示しているのはデフォルト値である。

　ここでは、グループを利用しているので、LayoutTemplateテンプレートに「groupPlaceholder」要素を、GroupTemplateテンプレートに「itemPlaceholder」要素を指定しているが、グループを使用しない場合、「groupPlaceholder」要素は省略が可能だ。その場合には、LayoutTemplateテンプレートに「itemPlaceholder」要素を含める必要がある。

（3）テンプレート上のボタンには意味を与えられる

　ListViewコントロールのテンプレート上に配置したボタン系コントロール（Button／LinkButton／ImageButton）には、CommandName／CommandArgumentプロパティを指定することで、規定の動作を割り当てることが可能だ。

　以下に、ListViewコントロールで利用可能な予約コマンドをまとめておく。

Command Name Command Argument 概要 （主な）利用場所 Select − ［選択］ボタン（SelectedItemTemplateの内容を表示） ItemTemplate Insert − ［挿入］ボタン（InsertItemTemplateで入力された内容をデータソースに反映） InsertItemTemplate Edit − ［編集］ボタン（EditItemTemplateの内容を表示） ItemTemplate Update − ［更新］ボタン（EditItemTemplateで入力された内容をデータソースに反映） EditItemTemplate Delete − ［削除］ボタン（現在の項目を削除） ItemTemplate Cancel − ［キャンセル］ボタン（EditItemTemplateでは編集モードを解除、InsertItemTemplateではフォームの内容をクリア） InsertItemTemplate／EditItemTemplate Sort ＜列名＞ ［ソート］ボタン（指定された列名をキーにリストをソート） LayoutTemplate

テンプレートで利用可能な予約コマンド

表内で主な利用場所が「ItemTemplate」となっているコマンドは、基本的に「AlternateItemTemplate」「SelectedItemTemplate」でも利用できる。

　デフォルトで生成されたテンプレート定義を確認しても、確かに、以下のリストのように随所に予約コマンドが埋め込まれていることが確認できるはずだ。これら予約コマンドを利用することで、テンプレートの切り替えやデータ編集などの処理をコーディングレスで実装できるというわけだ。

<InsertItemTemplate>   <td runat="server">     ……中略……     <asp:Button ID="InsertButton" runat="server"       CommandName="Insert" Text="挿入" /><br />     <asp:Button ID="CancelButton" runat="server"       CommandName="Cancel" Text="クリア" /><br />   </td> </InsertItemTemplate>

リスト3 InsertItemTemplateテンプレートで割り当てられた予約コマンド

　以上で、ListViewコントロールを利用するための最低限の手続きは完了だ。ここでは、取りあえずListViewコントロールの動作を確認するのが目的であるので、自動生成されたテンプレートはそのままに、ListView.aspxを実行してみよう。

　以下の画面のように、テンプレートで定義されたレイアウトが、そのままリスト表示されていれば成功だ。

図7 ListView.aspxの実行結果

　また、ブラウザの［ソースの表示］機能を使って、出力された実際のコードを確認してみてほしい。確かにテンプレートで記述されたタグやコンテンツだけが出力の対象となっており、ListViewコントロール自身が余計なタグを勝手に生成していないことが確認できるはずだ。

より柔軟なページャの配置を可能にする − DataPagerコントロール −

　DataPagerコントロールは、名前のとおり、ページャ（ページングのためのナビゲーション・リンク）を生成するためのコントロールだ。

　従来、GridView／DetailsView／FormViewなどのコントロールは、それ自身がページング機能を持っており、プロパティ設定だけで機能の有効／無効を設定できる。が、半面、ページャの配置はコントロールで決められた場所に限られ、自由に設定できないという制約があった。

　しかし、DataPagerコントロールを利用することで、ページャを自由な位置に――極端な話、同じページ内でさえあれば、対象となるリストから離れた場所であっても配置できるようになる。

　基本的には、データアクセス・コントロール全般との連携を意図して設計されているようであるが*5、（残念ながら）ASP.NET 3.5の時点でDataPagerコントロールとの連携に対応しているのは、前述のListViewコントロールだけだ。今後、そのほかのコントロールでも対応することを期待したい。

*5 DataPagerコントロールと連携するには、データアクセス・コントロールがIPageableItemContainerインターフェイスを実装している必要がある。

■ListViewコントロールへのDataPagerコントロールの適用

　さて、それではさっそく、先ほどのListView.aspxにDataPagerコントロールを適用してみよう。

　前述したように、DataPagerコントロールはページ内のどこにでも配置できるのが特徴であるが、ごくシンプルにListViewコントロールの中に組み込むのであれば、話は簡単だ。ListViewコントロール右肩のタスク・メニューから［ListViewの構成］ダイアログ（図3）を開き、［ページングを有効にする］にチェックを入れればよい。

　また、デフォルトの設定では［次／前のページャ］（前後、先頭／最終ページへのリンクを持つページ）を生成するが（図8上）、［数値ページャ］を選択することで各ページ、および、先頭／最終ページへのリンクを生成することも可能だ（図8下）。

図8 ページャ（DataPagerコントロール）を追加したListViewコントロール（上：［次／前のページャ］、下：［数値ページャ］）

　フォーム・デザイナで確認すると、この図8のようにページャ（DataPagerコントロール）がリスト内に追加されていることが確認できるはずだ。

　また、コード・エディタから確認すると、以下のようにLayoutTemplateテンプレートの配下に、<asp:DataPager>タグが追加されていることが確認できる（前述したように、LayoutTemplateテンプレートをフォーム・デザイナから編集することはできないので、この状態のDataPagerコントロールを編集するには、コード・エディタから直接行う必要がある）。

<LayoutTemplate>   <table runat="server">     ……中略……     <%--ページャを定義（PageSizeはページ当たりの項目数）--%>     <asp:DataPager ID="DataPager1" runat="server" PageSize="12">       <Fields>         <%--ページャの表示方法を定義（ここでは前後ページャ）--%>         <asp:NextPreviousPagerField ButtonType="Button"           ShowFirstPageButton="True" ShowLastPageButton="True" />       </Fields>     </asp:DataPager>     ……中略……   </table> </LayoutTemplate>

リスト4 VS 2008によって自動生成されたコード

<%--〜--%>は筆者自身によるコメント。

　なお、今回の例のように、DataPagerをデータアクセス・コントロールの配下に配置する場合には、（自動的に両者の関連付けが行われるので）特に関連付けを意識する必要はない。

　しかし、DataPagerをデータアクセス・コントロールの外部に配置する場合には、自動的には関連付けが行われないので、要注意。その場合には、DataPager.PagedControlIDプロパティで、関連付けるデータアクセス・コントロールのID値を明示的に宣言する必要がある。

INDEX
	Visual Studio 2008＆ASP.NET 3.5
	ASP.NETアプリ開発者のためのVisual Studio 2008新機能 Part I
	1．JavaScriptサポートを大幅に強化
	2．外部のJavaScriptライブラリやサービス・メソッドも認識可能
	3．サービス・メソッドを利用する場合／自作ライブラリにもツール・ヒントを表示
	4．機能強化されたJavaScriptのデバッグ機能
	ASP.NETアプリ開発者のためのVisual Studio 2008新機能 Part II
	1．CSSサポートもますます使いやすく（1）
	2．CSSサポートもますます使いやすく（2）
	3．マルチターゲッティング機能／分割ビュー
	4．マスタ・ページのネスト機能／エクステンダ・ウィザード
	ASP.NETアプリ開発者のためのVisual Studio 2008新機能 Part III
	1．新しいデータアクセス・コントロール − ListViewコントロール −（1）
	2．新しいデータアクセス・コントロール − ListViewコントロール −（2）
	3．より柔軟なページャの配置を可能にする − DataPagerコントロール −
	4．ASP.NETページでLINQ機能を利用する − LinqDataSourceコントロール −
	ASP.NETアプリ開発者のためのVisual Studio 2008新機能 Part IV
	1．UpdatePanelコントロールの適用範囲が拡大
	2．ロール・アクセスに対応したアプリケーションサービス・ブリッジ
	3．Webサービス・ブリッジがWCFをサポート

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）