.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コード」の部分にマウスポインタを当てることでコマンド・メニューがポップアップし、かつ、それぞれのコマンドを選択することで選択や削除などの動作が正常に働くことを確認してほしい。End of Article

利用可能バージョン:.NET Framework 2.0のみ
カテゴリ:Webフォーム 処理対象:ASP.NET AJAX
関連TIPS:[ASP.NET AJAX]ASP.NET AJAX Control Toolkitを利用するには?
関連TIPS:[ASP.NET AJAX]AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには?

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

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間