.NET TIPS

[ASP.NET AJAX]DropDownコントロールでSharePoint風のドロップダウン・メニューを作成するには?[2.0、3.0、3.5、C#、VB]

山田 祥寛
2008/03/06

 DropDownコントロール(DropDownExtender)は、ASP.NET AJAX Control Toolkit(以降、Control Toolkit)で提供されるコントロールの1つで、標準のサーバ・コントロール(例えばLabelコントロール)を拡張し、SharePoint風のドロップダウン・メニューを生成するためのExtenderコントロールだ。

 DropDownコントロールの動作については、文章で説明するよりも、実際に以下の画面で具体的な動作をご覧いただいた方が話は早いだろう。

(「詳細はこちらを参照」にマウス・ポインタを当てる)
(ドロップダウン・メニューが表示される)
DropDownコントロールでSharePoint風のドロップダウン・メニューを生成する例
テキスト・ラベルにマウス・ポインタを当てると、ドロップダウン式のユーザー・インターフェイスが表示され、クリックするとあらかじめ定義しておいたメニューが表示される。

 このように、通常の状態ではテキスト・ラベルとして表示しておき、マウス・ポインタを当てたタイミングで動的にドロップダウン的な視覚効果が適用されるわけだ。これをクリックすることで、あらかじめ定義しておいたメニューを表示することができる。

 それではさっそく、上の画面のようなドロップダウン・メニューを実装する、具体的な手順を見てみることにしよう。なお、本サンプルを動作させるに当たっては、「TIPS:[ASP.NET AJAX]ASP.NET AJAX Control Toolkitを利用するには?」で紹介した手順に従って、Control Toolkitを利用可能な状態にしておく必要がある。

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

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

Webフォーム(DropDown.aspx)のフォーム・レイアウト
配置するコントロールは以下のとおり。
  ToolkitScriptManagerコントロール(manager)。
  Labelコントロール(lblTitle)。
  Panelコントロール(popup)。
  HyperLinkコントロール(lnk1)。
  HyperLinkコントロール(lnk2)。
  HyperLinkコントロール(lnk3)。
  DropDownExtenderコントロール(dde)。

* Visual Studio 2008ではExtenderコントロールの適用方法が変更になった。VS 2008におけるExtenderコントロールの適用方法については、「ASP.NETアプリ開発者のためのVisual Studio 2008新機能 Part II」で紹介している。

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

 また、DropDownコントロールでは、ドロップダウン時に表示するメニューをPanelコントロールとして定義しておく必要がある。ここでは、Panelコントロールpopupの配下に、メニュー項目を表す3つのHyperLinkコントロールを配置している。

2. プロパティ情報を設定する

 次に、1で配置したコントロールに対して、以下の表の要領でプロパティ情報を設定する。

コントロール(ID) プロパティ 設定値
ToolkitScriptManager(manager)
Label(lblTitle) Text 詳 細 は こ ち ら を 参 照
Font-Size Small
Width 250px
Panel(popup) BackColor Gainsboro
BorderColor Black
BorderStyle Solid
BorderWidth 1px
Wrap False
HyperLink(lnk1) Font-Size Small
Font-Underline False
ForeColor Navy
NavigateUrl http://www.atmarkit.co.jp/fdotnet/
Text Insider.NET
HyperLink(lnk2) Font-Size Small
Font-Underline False
ForeColor Navy
NavigateUrl http://www.wings.msn.to/
Text サーバサイド技術の学び舎 - WINGS
HyperLink(lnk3) Font-Size Small
Font-Underline False
ForeColor Navy
NavigateUrl http://www.web-deli.com/
Text WebDeli - ASP.NETツール集
DropDownExtender(dde) TargetControlID lblTitle
DropDownControlID popup
HighlightBackColor 192, 192, 255
HighlightBorderColor 0, 0, 64
各コントロールのプロパティ設定

 DropDownコントロールのTargetControlIDプロパティは、ドロップダウン機能を関連付けるLabelコントロールを指定するものだ。ここでは“lblTitle”を指定しているので、LabelコントロールlblTitleに対してドロップダウン機能が適用されたことになるわけだ。

 なお、DropDownコントロールのそのほかのプロパティを設定する場合、(DropDownコントロールではなく)関連付けたコントロール(ターゲット)のプロパティとして設定する必要がある点に注意してほしい。この場合であれば、Labelコントロールのプロパティ・ウィンドウに(例えば)「dde(DropDownExtender)」という項目が追加されているので、この項目の配下から個々の値を設定することができる。

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

分類 プロパティ 概要
基本 TargetControlID 関連付ける要素のID値
DropDownControlID ドロップダウン・メニューとして表示する要素のID値
デザイン DropArrowBackColor ドロップ矢印の背景色
DropArrowImageUrl ドロップ矢印を表すアイコン画像
DropArrowWidth ドロップ矢印の表示幅
HighlightBackColor ドロップダウンの背景色
HighlightBorderColor ドロップダウンの枠線色
通信 DynamicControlID サービス・メソッドからの戻り値を反映する要素のID値
DynamicContextKey サービス・メソッドに引き渡すコンテキスト・キー
DynamicServiceMethod サービス・メソッドの名前
DynamicServicePath XML Webサービス・クラスのパス
CacheDynamicResults サービス・メソッドからの結果をキャッシュするか(デフォルトはFalse)
その他 Animations メニューポップアップ時に適用するアニメーション*
DropDownコントロールの主なプロパティ
* Animationsプロパティに関する詳細は、「TIPS:[ASP.NET AJAX]UpdatePanelAnimationコントロールで部分更新前後にアニメーションを実行するには?」を参照。

 DropDownコントロールを利用するために最低限設定が必要なのは、TargetControlIDプロパティとDropDownControlIDプロパティだけだ。DropDownControlIDプロパティには、先ほど手順1で定義したメニュー表示用のパネルを指定すればよい。DropDownコントロールは、デフォルトでも最低限のドロップダウンやドロップ矢印のスタイルを生成してくれるが、デザイン・プロパティを設定することで適宜、カスタマイズすることも可能である。

 なお、DynamicXxxxxプロパティは、ダイナミック・コンテキスト機能を設定するためのプロパティである。ダイナミック・コンテキスト機能を利用することで、ポップアップを表示する際に、ポップアップの内容をサービス・メソッド(Webサービスのメソッド)から動的に取得することができる。ダイナミック・コンテキスト機能については、後日「ダイナミック・コンテキスト機能でポップアップ・ダイアログの内容を動的に生成するには?」で紹介する予定である。

 なお参考までに、ここまでにVisual Studio 2005で自動生成されたコードを引用しておく。プロパティ・ウィンドウ上ではLabelコントロール配下のプロパティとして設定した一連のプロパティも、コード上はDropDownコントロールの属性として記述されていることが確認できるはずだ。

<%--Control Toolkitを使用する場合には先頭にToolkitScriptManagerの配置は必須--%>
<ajaxToolkit:ToolkitScriptManager ID="manager" runat="server">
  </ajaxToolkit:ToolkitScriptManager>
<asp:Label ID="lblTitle" runat="server" Text=" 詳 細 は こ ち ら を 参 照 "
  Font-Size="Small" Width="250px"></asp:Label><br />
<%--ドロップダウン・メニューとして表示するポップアップ・メニューを定義--%>
<asp:Panel ID="popup" runat="server" BackColor="Gainsboro"
  BorderColor="Black" BorderStyle="Solid"
  BorderWidth="1px" Wrap="False">
  <asp:HyperLink ID="lnk3" runat="server" Font-Size="Small"
    Font-Underline="False" ForeColor="Navy"
    NavigateUrl="http://www.atmarkit.co.jp/fdotnet/">
    Insider.NET</asp:HyperLink><br />
  <asp:HyperLink ID="lnk1" runat="server" Font-Size="Small"
    Font-Underline="False" ForeColor="Navy"
    NavigateUrl="http://www.wings.msn.to/">
    サーバサイド技術の学び舎 - WINGS</asp:HyperLink><br />
  <asp:HyperLink ID="lnk2" runat="server" Font-Size="Small"
    Font-Underline="False" ForeColor="Navy"
    NavigateUrl="http://www.web-deli.com/">WebDeli - ASP.NETツール集
    </asp:HyperLink>
</asp:Panel>
<%--DropDownコントロールの諸設定を定義--%>
<ajaxToolkit:DropDownExtender ID="dde" runat="server"
  TargetControlID="lblTitle" DropDownControlID="popup"
  HighlightBackColor="192, 192, 255" HighlightBorderColor="0, 0, 64">
</ajaxToolkit:DropDownExtender>
DropDown.aspxのソース・コード(抜粋)
一連のレイアウト編集を行った後、Visual Studio 2005によって自動生成されたコードを引用したもの。なお、<%--〜--%>は筆者によるコメント。

 以上を理解したら、さっそく作成したサンプル・プログラムを実行してみよう。冒頭の画面のように、ラベルにマウス・ポインタを乗せたタイミングでラベルがドロップダウンの表示となること、また、そのドロップダウンの▼をクリックすると、パネルで定義されたメニューがポップアップされることが確認できれば成功だ。End of Article

利用可能バージョン:.NET Framework 2.0
利用可能バージョン:.NET Framework 3.0
利用可能バージョン:.NET Framework 3.5
カテゴリ:Webフォーム 処理対象:ASP.NET AJAX
使用ライブラリ:DropDownコントロール
関連TIPS:[ASP.NET AJAX]ASP.NET AJAX Control Toolkitを利用するには?
関連TIPS:[ASP.NET AJAX]AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには?
関連TIPS:[ASP.NET AJAX]UpdatePanelAnimationコントロールで部分更新前後にアニメーションを実行するには?

この記事と関連性の高い別の.NET TIPS
[ASP.NET AJAX]ダイナミック・コンテキスト機能でポップアップ・コントロールの内容を動的に生成するには?
[ASP.NET AJAX]AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには?
[ASP.NET AJAX]PopupControlコントロールで標準コントロールにポップアップ機能を追加するには?
[ASP.NET AJAX]CollapsiblePanelコントロールで伸縮自在のマルチペインを生成するには?
[ASP.NET AJAX]HoverMenuコントロールでマウス・ホバー時に表示されるポップアップ・メニューを定義するには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム 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 記事ランキング

本日 月間