.NET TIPS ［ASP.NET AJAX］ReorderListコントロールでドラッグ＆ドロップによるリストの並べ替えを行うには？［2.0のみ、C#、VB］ 山田 祥寛 2007/05/10

　ReorderListコントロールはASP.NET AJAX Control Toolkit（以降、「Control Toolkit」）で提供されるコントロールの1つで、マウスによるドラッグ＆ドロップ操作で項目の表示順を自由に変更可能なリストを生成する。リストの表示順は、コントロールにより自動的にデータソースにフィードバックされるため、いったんブラウザを閉じた後に再度アクセスしたときにも、変更した並び順のままリストを表示できる。

　本稿では、このReorderListコントロールを利用して、以下の画面のような並べ替え可能なリストを使ったサンプル・アプリケーションを作成してみよう。

先頭の「Pocket詳解ASP.NET辞典」をドラッグで移動中

「Pocket詳解ASP.NET辞典」をドロップで移動完了

「サーバサイドAjax入門」という新しいデータを登録

サンプル・アプリケーションの実行結果

リスト上の項目をマウスでドラッグ＆ドロップすることで、動的に並び順を変更することができる。リスト下部のテキストボックスからは新規のデータを登録することも可能。

　それではさっそく、具体的なリストの作成手順を見ていくことにしよう。なお、本サンプルを動作させるに当たっては、「TIPS：［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？」で紹介した手順に従って、Control Toolkitを利用可能な状態にしておく必要がある。

1. リスト表示のためのデータソースを用意する

　まずは、リスト（ReorderListコントロール）に表示すべきデータソースとして、以下のようなBookテーブルをデータベース上に作成しておこう。

フィールド名	データ型	概要
isbn	VARCHAR(30)	ISBNコード（主キー）
title	VARCHAR(100)	書籍タイトル
order_num	INT	表示順（0からスタート）
Bookテーブルのフィールド・レイアウト

　また、Bookテーブルにはサンプル・データとして、以下の表のような書籍情報をあらかじめセットしておくものとする。

isbn	title	order_num
4-7981-1062-0	10日でおぼえるASP.NET2.0入門教室	1
4-7981-1257-2	独習ASP.NET2.0	2
4-7980-1363-3	Pocket詳解ASP.NET辞典	3
4-7980-1616-0	今日からつかえるASP.NET 2.0サンプル集	4
4-7981-0959-2	PEAR入門	5
4-88337-491-2	書き込み式 SQLのドリル	6
4-7981-1070-1	XMLデータベース入門	7
Bookテーブルにセットするデータ（例）

2. 新規のWebフォームを作成する

　新規のWebフォーム（ReorderList.aspx）を作成したら、フォーム・デザイナから以下の画面の要領でサーバ・コントロールを配置する。

Webフォーム（ReorderList.aspx）のレイアウト

以下のそれぞれのコントロールを配置する。

ScriptManagerコントロール（IDは「manager」）。 　 ReorderListコントロール（IDは「list」）。

　ここで、ReorderListコントロールに表示すべきデータソースの内容を定義しておく必要がある。データソースを定義するには、ReorderListコントロールの右上から［ReorderListタスク］メニューを表示して［データソースの選択］から「<新しいデータソース>」を選択すればよい。

［データソース構成ウィザード］ダイアログ

ReorderListコントロールの右上から［ReorderListタスク］メニューを表示して［データソースの選択］から「<新しいデータソース>」を選択することで、このダイアログが表示される。

　上の画面のような［データソース構成ウィザード］ダイアログが起動するので、以下の表の要領でデータソースの取得に必要な情報を設定する。データソース構成ウィザードの詳細については、「無償データベース SQL Server 2005 Express Editionを使ってみよう」が詳しいので、こちらも併せて参照していただきたい。

項目	概要
データの種類	データベース
データソースID	sds
データ接続の選択	MyDB
Selectステートメントの構成（テーブル）	Book
Selectステートメントの構成（列）	isbn、title、order_numをチェック
Selectステートメントの構成（ORDER BY）	order_num（昇順）
Selectステートメントの構成（詳細設定）	「INSERT、UPDATE、およびDELETEステートメントの生成」にチェック
データソース構成ウィザードの設定

　［Selectステートメントの構成］画面では、最終的に、

SELECT [isbn], [title], [order_num] FROM [Book] ORDER BY [order_num]

のようなSQL命令文が生成されるはずだ。

3. ReorderListコントロールのテンプレートを設定する

　ReorderListコントロールでは、リスト表示のために以下のようなテンプレートが用意されている。

テンプレート	概要
ItemTemplate	データ表示部分に標準で適用されるテンプレート
EditItemTemplate	データ編集時のテンプレート
DragHandleTemplate	項目ドラッグの際にマウスポインタを当てるハンドル部分のテンプレート
ReorderTemplate	ドラッグ＆ドロップ操作に際してドロップ先を表示するために使われるテンプレート
InsertItemTemplate	データ挿入行に適用されるテンプレート
EmptyListTemplate	リストに表示すべきデータ項目がない場合のテンプレート
ReorderListコントロールで利用可能なテンプレート

　ここでは、以下の画面の要領でそれぞれのテンプレートに対して、サーバ・コントロールやテキストを配置しておく。

ItemTemplateテンプレートのレイアウト

以下のそれぞれのコントロールを配置する。

Labelコントロール（IDは「lblTitle」）。 　 LinkButtonコントロール（IDは「btnDelete」）。

　

DragHandleTemplateテンプレートのレイアウト

項目をドラッグする際にマウスポインタを当てるためのハンドルを設定する。ここでは、仮に青色の■をハンドルとして設定しておく。

　

ReorderTemplateテンプレートのレイアウト

項目ドラッグ時に表示される内容を設定する。ここではドラッグ先を決める際に、最低限、現在の位置が分かるように線のみを設定しておく。

　

InsertItemTemplateテンプレートのレイアウト

以下のそれぞれのコントロールを配置する。

TextBoxコントロール（IDは「txtIsbn」）。 　 TextBoxコントロール（IDは「txtTitle」）。 　 Buttonコントロール（IDは「btnInsert」）。

　

EmptyListTemplateテンプレートのレイアウト

　また、それぞれのコントロールに対しては、表の内容でプロパティ値を設定しておこう。

テンプレート	コントロール	プロパティ	設定値
ItemTemplate	Label（lblTitle）	Text*	Eval("title")
	LinkButton（btnDelete）	CommandName	削除
		Text	削除
InsertItemTemplate	TextBox（txtIsbn）	Text*	Bind("isbn")
	TextBox（txtTitle）	Text*	Bind("title")
	Button（btnInsert）	CommandName	Insert
		Text	挿入
各テンプレート上に配置したコントロールのプロパティ情報

　ただし、「*」がついているプロパティの値はバインド式となっており、プロパティ・ウィンドウから直接に入力することはできないので、注意すること。

　バインド式の入力には、コントロール右肩のタスク・メニューから［DataBindingsの編集］を選択し、表示される以下のような［＜コントロール名＞ DataBindings］ダイアログから［カスタムバインド］−［コード式］欄に入力する必要がある（バインド式の詳細については、「テンプレート機能でGridViewコントロールも自由自在」を参照）。

［＜コントロール名＞ DataBindings］ダイアログ

　また、ReorderListコントロール配下のボタン系コントロール（Button、LinkButton、ImageButton）では、ボタンに特殊な機能を持たせるために、CommandName（コマンド名）プロパティに設定可能な予約済みの値が用意されている。ReorderListコントロールでは、これらのプロパティに対して予約値を設定しておくことで、コーディングレスで更新／削除などの機能を付与することが可能になる。以下に予約済みの値の一覧を示す。

CommandNameの値	機能
Insert	［挿入］ボタン
Delete	［削除］ボタン
Edit	［編集］ボタン
Update	［更新］ボタン
Cancel	［キャンセル］ボタン
ReorderListコントロール配下で利用可能な予約済みのコマンド

4. ReorderListコントロールのプロパティ情報を設定する

　最後に、プロパティ・ウィンドウからReorderListコントロールの表示／動作に必要なプロパティ情報を設定しておこう。ここで設定するプロパティは、以下のとおり。

プロパティ	設定値
DataKeyField	isbn
ItemInsertLocation	End
SortOrderField	order_num
ReorderListコントロールのプロパティ設定

　DataKeyField／SortOrderFieldプロパティは、それぞれデータソースの主キー／表示順序を表すフィールド名を表す。これらのプロパティが正しく設定されていない場合、ドラッグ＆ドロップによる並べ替えが正しく動作しないので注意すること。

　ItemInsertLocationプロパティは、リストに新規データを挿入した場合に、データ項目をリストの先頭／末尾いずれに追加するかを表す。

　これで一連の手順は完了だ。ここで参考までに、ここまでにVisual Studio 2005で自動生成されたコードを引用しておく。

<%--Control Toolkitを使用する場合には先頭にScriptManagerの配置は必須--%> <asp:ScriptManager ID="manager" runat="server">   </asp:ScriptManager> <%--並べ替えリストの諸設定--%> <ajaxToolkit:ReorderList ID="list" runat="server"   AllowReorder="True" DataKeyField="isbn"   DataSourceID="sds" PostBackOnReorder="False"   SortOrderField="order_num" ItemInsertLocation="End">   <%--並べ替えリストの表示に使用する各種テンプレートの定義--%>   <ItemTemplate>     <asp:Label ID="lblTitle" runat="server"       Text='<%# Eval("title") %>'></asp:Label>     <asp:LinkButton ID="btnDelete" runat="server"       CommandName="Delete">削除</asp:LinkButton>   </ItemTemplate>   <DragHandleTemplate>     <span style="color: #3333ff">■</span>   </DragHandleTemplate>   <EmptyListTemplate>     データが存在しません。   </EmptyListTemplate>   <ReorderTemplate>     ____________   </ReorderTemplate>   <InsertItemTemplate>     <asp:TextBox ID="txtIsbn" runat="server"       Text='<%# Bind("isbn") %>'></asp:TextBox>&nbsp;     <asp:TextBox ID="txtTitle" runat="server"       Text='<%# Bind("title") %>'></asp:TextBox>     <asp:Button ID="btnInsert" runat="server" CommandName="Insert"       Text="挿入" />   </InsertItemTemplate> </ajaxToolkit:ReorderList> <asp:SqlDataSource ID="sds" runat="server"   ConnectionString="<%$ ConnectionStrings:MyDB %>"   DeleteCommand="DELETE FROM [Book] WHERE [isbn] = @isbn"   InsertCommand="INSERT INTO [Book] ([isbn], [title], [order_num]) VALUES (@isbn, @title, @order_num)"   SelectCommand="SELECT [isbn], [title], [order_num] FROM [Book] ORDER BY [order_num]"   UpdateCommand="UPDATE [Book] SET [title] = @title, [order_num] = @order_num WHERE [isbn] = @isbn">   <DeleteParameters>     <asp:Parameter Name="isbn" Type="String" />   </DeleteParameters>   <UpdateParameters>     <asp:Parameter Name="title" Type="String" />     <asp:Parameter Name="order_num" Type="Int32" />     <asp:Parameter Name="isbn" Type="String" />   </UpdateParameters>   <InsertParameters>     <asp:Parameter Name="isbn" Type="String" />     <asp:Parameter Name="title" Type="String" />     <asp:Parameter Name="order_num" Type="Int32" />   </InsertParameters> </asp:SqlDataSource>

ReorderList.aspxのソース・コード（抜粋）

一連のレイアウト編集を行った後、Visual Studio 2005によって自動生成されたコードを引用したもの。なお、<%--〜--%>は筆者によるコメント。

　以上を理解したら、さっそく作成したサンプル・プログラムを実行してみよう。冒頭の画面のように、リスト項目の並び順をマウスのドラッグ＆ドロップ操作で変更できることを、また、変更した並び順が、一度ブラウザを閉じてページを再表示した際にも保持されていることを、それぞれ確認してほしい。

［参考］

実際に並び順がデータソースにフィードバックされている様子を自分の目で確認したければ、サーバ・エクスプローラから先ほど作成したBookテーブルを開いてみよう。order_numフィールドの数値がReorderListの並び順に従って更新されていることが確認できるはずだ。また、新規データを登録した場合にも、ItemInsertLocationプロパティの設定に従って、適切な値がorder_numフィールドにセットされることを確認してみてほしい。

■

　なお、本稿で紹介したほかにも、ReorderListコントロールでは多くのプロパティ／イベントが公開されている。主要なものを以下の表にまとめておく。

分類	名前	概要
プロパティ	DataSourceID	ReorderListコントロールに関連付けるデータソース・コントロール
	DataKeyField	主キーを表すフィールドの名前
	SortOrderField	リスト項目の並び順を表すフィールドの名前
	ItemInsertLocation	新規項目の追加先（Beginning｜End）
	DragHandleAlignment	ドラッグ操作に使用するハンドルの配置位置（Top｜Bottom｜Left｜Right）
	AllowReorder	ドラッグ＆ドロップによる並べ替え操作を有効にするか（ReorderTemplateテンプレートが定義されている場合、自動的にTrueに設定）
	PostbackOnReorder	並べ替えによってポストバック処理を発生するかどうか
イベント	CancelCommand	［キャンセル］ボタンクリック時に発生
	DeleteCommand	［削除］ボタンクリック時に発生
	EditCommand	［編集］ボタンクリック時に発生
	InsertCommand	［挿入］ボタンクリック時に発生
	ItemCommand	任意のコマンド・ボタンがクリックされたときに発生
	ItemCreated	リスト項目の生成時に発生
	ItemDataBound	リスト項目にデータがバインドされたタイミングで発生
	ItemReorder	リスト項目が並べ替えられたタイミングで発生
	UpdateCommand	［更新］ボタンクリック時に発生
ReorderListコントロールで利用可能なプロパティ／イベント

　自分でReorderListコントロールを利用する場合の参考にしていただきたい。

利用可能バージョン：.NET Framework 2.0のみ カテゴリ：Webフォーム　処理対象：ASP.NET AJAX 使用ライブラリ：ReorderListコントロール 関連TIPS：［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？

この記事と関連性の高い別の.NET TIPS ［ASP.NET AJAX］HoverMenuコントロールでマウス・ホバー時に表示されるポップアップ・メニューを定義するには？ ［ASP.NET］GridViewコントロールでデータソースの内容を表示するには？ ［ASP.NET AJAX］PagingBulletedListコントロールでページング可能な個条書きリストを定義するには？ ［ASP.NET］ListViewコントロールで非定型のリストを表示するには？ ［ASP.NET］GridViewコントロールの表示データを特定条件で絞り込むには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

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