Tweet

.NET TIPS ［ASP.NET AJAX］ModalPopupコントロールでモーダル・ウィンドウを生成するには？［2.0のみ、C#、VB］ 山田 祥寛 2007/04/12

　ModalPopupコントロール（ModalPopupExtender）はASP.NET AJAX Control Toolkit（以降、「Control Toolkit」）で提供されるコントロールの1つで、ASP.NETページ上からポップアップ可能なモーダル・ウィンドウを生成する。

　モーダル・ウィンドウとは、そのウィンドウを表示している間は呼び出し元のウィンドウが非アクティブとなり、一切の操作を受け付けなくなるウィンドウのこと。ウィンドウを表示している間、エンド・ユーザーに対してほかの操作をさせたくない場合には、このモーダル・ウィンドウを利用すると便利だ（ちなみに、こうした制限を持たないウィンドウのことを「モードレス・ウィンドウ」と呼ぶ）。

　本稿では、このModalPopupコントロールを利用して、以下の画面のようなユーザー入力を受け付けるモーダル・ウィンドウと、その入力結果を呼び出し元の画面に反映させるためのサンプル・アプリケーションを作成してみよう。

［ポップアップ］ボタンをクリックすると、モーダル・ウィンドウを表示

この間、呼び出し元のページはグレーアウトし、一切の操作ができなくなる。

［決定］ボタンをクリックすると、入力内容に基づいてあいさつメッセージを表示

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

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

　新規のWebフォーム（ModalPopup.aspx）を作成したら、フォーム・デザイナから以下の画面の要領でサーバ・コントロールを配置する。また、それぞれのコントロールに対しては、表の内容でプロパティ値を設定しておこう。

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

新規Webフォームを作成しているところ。

コントロール（ID） プロパティ 値 ScriptManager（manager） − − Button（btnPopup） Text ポップアップ Div（result） − − Panel（pnlDialog） − − Panel（pnl） BackColor #C0C0FF Wrap False TextBox（txtName） − − Button（btnOk） Text 決定 Button（btnCancel） Text キャンセル ModalPopupExtender（modal） TargetControlID btnPopup PopupControlID pnlDialog PopupDragHandleControlID pnl BackgroundCssClass modalBackground DropShadow True Drag True OkControlID btnOk OnOkScript onOk() CancelControlID btnCancel

　ModalPopupコントロールのTargetControlIDプロパティは、モーダル・ウィンドウの機能を追加する対象のコントロールを指定するものだ。ここでは“btnPopup”を設定しているので、ButtonコントロールbtnPopupをクリックすることで、ModalPopupコントロールによるモーダル・ウィンドウが起動するようになるわけだ。

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

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

プロパティ名	概要
TargetControlID	モーダル・ウィンドウをポップアップするコントロールのID値
PopupControlID	モーダル・ウィンドウとして表示するコントロールのID値
BackgroundCssClass	モーダル・ウィンドウを表示する際の背景として適用するCSSクラス
DropShadow	モーダル・ウィンドウに影効果を適用するか
OkControlID	モーダル・ウィンドウ内で［OK］ボタンの役割を持つコントロールのID値
OnOkScript	［OK］ボタンがクリックされたタイミングで実行されるクライアント側スクリプト
CancelControlID	モーダル・ウィンドウ内で［キャンセル］ボタンの役割を持つコントロールのID値
OnCancelScript	［キャンセル］ボタンがクリックされたタイミングで実行されるクライアント側スクリプト
PopupDragHandleControlID	モーダル・ウィンドウをドラッグするために使用するハンドル部を表すコントロールのID値（一般的にはヘッダ／タイトル部を表すパネル）
X	モーダル・ウィンドウの表示位置（ウィンドウ左上のX座標。デフォルトは中心）
Y	モーダル・ウィンドウの表示位置（ウィンドウ左上のY座標。デフォルトは中心）
ModalPopupコントロールで利用可能な主なプロパティ

　多くのプロパティが用意されているが、モーダル・ウィンドウを表示するうえで最低限設定が必要なのは、モーダル・ウィンドウとして利用するコントロールを表すPopupControlIDプロパティ、ウィンドウ上で［OK］ボタンの役割を割り当てるOkControlIDプロパティだ。ここでは［OK］ボタン（サンプルでは［決定］ボタン）に、クリック時に実行されるクライアント側関数として“onOk”を指定しておこう（具体的なコードは後述）。［キャンセル］ボタンクリック時に実行されるスクリプトをOnCancelScriptプロパティで指定することも可能であるが、本サンプルでは省略する（省略時、［キャンセル］ボタンはモーダル・ウィンドウのクローズのみを行う）。

　なお、BackgroundCssClassプロパティでは“modalBackground”という名前のCSSクラスを指定しているが、これらはControl Toolkitで提供されているサンプル・アプリケーションに含まれている.cssファイルで定義されているクラスだ。スタイルシートの引用については、「TIPS：［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？」でも紹介しているので、併せてご参照いただきたい。

　以上、画面の外観にかかわる設定は完了だ。ここで参考までにVisual Studio 2005によって自動生成されたコードを引用しておく。

2. ［決定］ボタンクリック時に実行されるJavaScript関数を記述する

　最後に、手順1でOnOkScriptプロパティに指定したJavaScript関数OnOkを記述しておこう。具体的なコードは、以下のとおり。

　$get関数は、ASP.NET AJAXで提供されるユーティリティ関数の1つで、document.getElementByIdメソッドのエイリアスを表す。つまりここでは、TextBoxコントロールtxtNameの値を基に「こんにちは、●○さん！」という文字列を生成し、<div>タグ（ID="result"）に対してセットしているというわけだ。

　もともとがごくシンプルなコードではあるが、$get関数を利用することで、標準のDOMメソッドであるdocument.getElementByIdメソッドを利用するよりもスマートにコードが記述できることがお分かりになるはずだ。

　以上を理解したら、さっそく作成したサンプル・プログラムを実行してみよう。冒頭の画面のように、［ポップアップ］ボタンをクリックしたらモーダル・ウィンドウが立ち上がること、また［決定］ボタンをクリックすることでテキストボックスへの入力値が元のページに反映されることを、それぞれ確認してほしい。

この記事と関連性の高い別の.NET TIPS ［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？ ［ASP.NET AJAX］PopupControlコントロールで標準コントロールにポップアップ機能を追加するには？ ［ASP.NET AJAX］DropDownコントロールでSharePoint風のドロップダウン・メニューを作成するには？ ［ASP.NET AJAX］AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには？ ［ASP.NET AJAX］DragPanelコントロールでドラッグ可能なパネルを定義するには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

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