.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によって自動生成されたコードを引用しておく。

<%--Control Toolkitを使用する場合には先頭にScriptManagerの配置は必須--%>
<asp:ScriptManager ID="manager" runat="server">
  </asp:ScriptManager>
<asp:Button ID="btnPopup" runat="server" Text="ポップアップ" />
<%--結果表示用の領域をあらかじめ確保--%>
<div id="result"></div>
<br />
<%--モーダル・ウィンドウとして表示するパネルを定義--%>
<asp:Panel ID="pnlDialog" runat="server">
  <asp:Panel ID="pnl" runat="server" Wrap="False" BackColor="#C0C0FF">
    <p>あなたの名前を入力してください。</p>
    <p>
      <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
      <asp:Button ID="btnOk" runat="server" Text="決定" />
      <asp:Button ID="btnCancel" runat="server" Text="キャンセル" />
    </p>
  </asp:Panel>
</asp:Panel>
<%--ModalPopupコントロールの諸設定--%>
<ajaxToolkit:ModalPopup ID="modal" runat="server"
  TargetControlID="btnPopup" PopupControlID="pnlDialog"
  BackgroundCssClass="modalBackground" OkControlID="btnOk"
  OnOkScript="onOk()" CancelControlID="btnCancel"
  DropShadow="true" Drag="true" PopupDragHandleControlID="pnl"/>
ModalPopup.aspxのソース・コード(抜粋)
一連のレイアウト編集を行った後、Visual Studio 2005によって自動生成されたコードを引用したもの。なお、<%--〜--%>は筆者によるコメント。

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

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

<script language="javascript" type="text/javascript">
<!--
  // 入力値を基に、あいさつメッセージを生成
function onOk() {
  $get("result").innerHTML =
    "こんにちは、" + $get("txtName").value + "さん!";
}
// -->
</script>
モーダル・ウィンドウ上の[OK]ボタンをクリックしたタイミングに実行されるJavaScript関数

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

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

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

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

この記事と関連性の高い別の.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 Special

- PR -

TechTargetジャパン

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メールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

もっと見る

ホワイトペーパーTechTargetジャパン

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH