Tweet

.NET TIPS ［ASP.NET AJAX］HoverMenuコントロールでマウス・ホバー時に表示されるポップアップ・メニューを定義するには？［2.0のみ、C#、VB］ 山田 祥寛 2007/10/18

　HoverMenuコントロール（HoverMenuExtender）は、ASP.NET AJAX Control Toolkit（以降、「Control Toolkit」）で提供されるコントロールの1つで、ページ上の要素にマウス・カーソルを当てたタイミングで（＝マウス・ホバー時に）、任意のメニューをポップアップするためのコントロールだ。

　HoverMenuコントロールを利用することで、（例えば）以下の画面のようにグリッド表上の各行に対するコマンド・メニューをポップアップ表示することが可能になる。このようなメニューは「ホバー・メニュー」（Hover Menu）と呼ばれる。

HoverMenuコントロールによるホバー・メニューの表示

グリッド表上の各行の「ISBNコード」にマウス・カーソルを当てることで、コマンド・メニューをポップアップする。

　このようにコマンド・メニュー部分をポップアップ表示することで、グリッド表のように横幅が限られた領域の中でも、レイアウト幅を節約できるというわけだ（ちなみに、HoverMenuコントロールというと、その性質上、GridViewコントロールとセットで語られる例が多いが、HoverMenuコントロール自体はあくまで任意の要素に対して適用することができる）。

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

1. グリッド表に表示するためのデータソースを用意する

　まずは、グリッド表に表示するために、以下のような書籍情報（Bookテーブル）をデータベース上に作成しておこう。また、Bookテーブルには適宜、サンプル・データとして適当な情報をあらかじめセットしておくものとする。

フィールド名	データ型	概要
isbn	VARCHAR(30)	ISBNコード（主キー）
title	VARCHAR(100)	書名
price	INT	価格
publishDate	DATETIME	配本日
Bookテーブルのフィールド・レイアウト

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

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

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

ToolkitScriptManagerコントロール（IDは「manager」*）。   GridViewコントロール（IDは「grid」。オートフォーマットは「シンプル」）。

* ToolkitScriptManagerコントロールは、Control Toolkitを利用する場合に必ず必要となるコントロール。詳細については、「TIPS：［ASP.NET AJAX］AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには？」も参照してほしい。

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

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

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

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

項目	概要
データの種類	データベース
データソースID	sds
データ接続の選択	MyDB
Selectステートメントの構成	テーブル Book 列 isbn、title、price、publishDateをチェック 詳細設定 ［INSERT、UPDATE、およびDELETEステートメントの生成］をチェック
データベース構成ウィザードの設定

3. GridViewコントロールの列を編集する

　GridViewコントロールの表示列を編集するには、コントロール右肩のタスク・メニューから［列の編集］を選択する。

［フィールド］ダイアログ

GridViewコントロール右肩のタスク・メニューから［列の編集］を選択すると表示される。

　上の画面のような［フィールド］ダイアログが開くので、以下の表に従って列情報を入力する。フィールド編集に関しては、「データアクセス／データソース・コントロールを使い倒せ！」が詳しいので、併せてご参照いただきたい。

フィールド	プロパティ名	概要
TemplateField（isbn）	HeaderText	ISBNコード
BoundField（title）	HeaderText	書名
	DataField	title
	SortExpression	title
BoundField（title）	HeaderText	書名
	DataField	title
	SortExpression	title
BoundField（publishDate）	HeaderText	価格
	DataField	price
	DataFormatString	{0:#,###円}
	HtmlEncode	False
	SortExpression	price
BoundField（publishDate）	HeaderText	配本日
	DataField	publishDate
	DataFormatString	{0:yyyy年MM月dd日}
	HtmlEncode	False
	SortExpression	publishDate
フィールド情報の設定

4. TemplateFieldフィールドをレイアウトする

　ISBNコードの表示列であるTemplateFieldフィールドのレイアウト／プロパティは、以下の画面／表のように編集するものとする。

　TemplateFieldフィールドのテンプレート編集を行うには、GridViewコントロールのタスク・メニューから［テンプレートの編集］を選択する。フォーム・デザイナ上の表示がテンプレート編集モードに切り替わるので、タスク・メニューから編集したいテンプレート（ここでは［Column[0] - ISBNコード］−［ItemTemplate］）を選択すればよい。

［Column[0] - ISBNコード］−［ItemTemplate］テンプレートのレイアウト

各コントロールのプロパティ値は以下のとおり。

コントロール（ID） プロパティ 設定値 Label（lblIsbn） Text Bind("isbn") HoverMenu（hme） TargetControlID lblIsbn PopupControlID pEdit PopupPosition Right Panel（pEdit） BackColor White BorderColor Black BorderStyle Solid BorderWidth 1px CssClass popupMenu LinkButton（lnkSelect） CommandName Select Text 選択 LinkButton（lnkDelete） CommandName Delete Text 削除

［参考］

GridViewコントロールでは、ボタンに特殊な機能を持たせるためにCommandName／CommandArgumentプロパティの値が予約されている。具体的には、以下のようなコマンドを指定することが可能だ。 CommandName CommandArgument 概要 Delete − ［削除］ボタン Edit − ［編集］ボタン Update − ［更新］ボタン Cancel − ［キャンセル］ボタン Page Next 次ページへ Prev 前ページへ First 先頭ページへ Last 最終ページへ GridViewコントロールで利用可能な予約コマンド

　HoverMenuコントロールのTargetControlIDプロパティは、ホバー・メニューを表示するトリガとなるコントロールを指定するものだ。ここでは“lblIsbn”を指定しているので、ラベル“lblIsbn”――つまり、ISBNコードにマウスをポイントしたタイミングで、ホバー・メニューが表示されることになるわけだ。

　なお、HoverMenuコントロールのそのほかのプロパティを設定する場合、（HoverMenuコントロールではなく）関連付けたコントロールのプロパティとして設定する必要がある点に注意してほしい。この場合であれば、Labelコントロールのプロパティ・ウィンドウに「grid.Columns0.ItemTemplate（HoverMenuExtender）」という項目が追加されているので、この項目の配下から個々の値を設定することができる。

　HoverMenuコントロールで利用可能な主なプロパティは、以下のとおりだ。

プロパティ	概要
TargetControlID	ホバー・メニュー機能を適用するコントロール（ID値）
PopupControlID	マウス・ホバー時にポップアップするコントロール（ID値）
PopupPosition	ホバー・メニューの表示位置（Left｜Right｜Top｜Bottom｜Center）
OffsetX	ホバー・メニューの水平方向オフセット値（ピクセル単位）
OffsetY	ホバー・メニューの垂直方向オフセット値（ピクセル単位）
PopDelay	メニューからマウスが離れた後、消えるまでのタイムラグ（デフォルトは100ミリ秒）
HoverCssClass	メニュー・ポップアップ時にターゲットに適用するCSSクラス
HoverMenuコントロールで利用可能な主なプロパティ

　ここでは取りあえず最低限の情報として、ホバー時にポップアップする要素（PopupControlIDプロパティ）とメニューの表示位置（PopupPositionプロパティ）を指定しておこう。HoverMenuコントロールによってポップアップさせるための領域は、標準のPanelコントロールの配下に定義している。

　以上で、ホバー・メニューを表示するための一連の手順は完了だ。さっそく、サンプル・プログラムを実行し、実際の動作を確認してみよう。冒頭の画面のように、グリッド表上の「ISBNコード」の部分にマウスポインタを当てることでコマンド・メニューがポップアップし、かつ、それぞれのコマンドを選択することで選択や削除などの動作が正常に働くことを確認してほしい。

この記事と関連性の高い別の.NET TIPS ［ASP.NET］GridViewコントロールを階層表示させるには？ ［ASP.NET］GridViewコントロールでデータソースの内容を表示するには？ ［ASP.NET］GridViewコントロールで選択ボックスを表示するには？ ［ASP.NET］GridView＋DetailsViewコントロールで一覧／明細画面を作成するには？ ［ASP.NET］DetailsViewコントロールの列表示をカスタマイズするには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

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