［ASP.NET AJAX］ModalPopupコントロールでモーダル・ウィンドウを生成するには？［2.0のみ、C#、VB］ − ＠IT

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

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

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

　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メソッドを利用するよりもスマートにコードが記述できることがお分かりになるはずだ。

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

［ASP.NET AJAX］ModalPopupコントロールでモーダル・ウィンドウを生成するには？［2.0のみ、C#、VB］ − ＠IT