［ASP.NET AJAX］PopupControlコントロールで標準コントロールにポップアップ機能を追加するには？［2.0のみ、C#、VB］ − ＠IT

.NET TIPS

［ASP.NET AJAX］PopupControlコントロールで標準コントロールにポップアップ機能を追加するには？［2.0のみ、C#、VB］

山田祥寛
2007/03/22

　PopupControlコントロール（PopupControlExtender）はASP.NET AJAX Control Toolkit（以降、Control Toolkit）で提供されるコントロールの1つで、テキストボックスなどの入力コントロールに対して補助ウィンドウを関連付けるためのコントロールだ。

　PopupControlコントロールを利用することで、例えば次の画面のように、テキストボックスから小さな補助ウィンドウをポップアップさせ、そのウィンドウ上に配置されたラジオボタンの中から値を選択して、それをテキストボックスへ入力するようなインターフェイスも容易に作成できるというわけだ。

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

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

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

　PopupControlコントロールでポップアップを表示させるための領域は、標準のPanelコントロールの配下に定義している。Panelコントロールの配下にUpdatePanelコントロールを配置しているのは、ポップアップ・ウィンドウ上で発生したポストバックによって画面全体をリフレッシュしないようにするためだ（UpdatePanelコントロールについては、「DBプログラミング 7つのヒント」を参照）。

　ここでは、UpdatePanelコントロールの配下にRadioButtonListコントロールを配置しているが、もちろん必要に応じてそのほかのサーバ・コントロールを配置することも可能だ。

［注意］
ASP.NETアプリケーションの基本的なポイントであるが、RadioButtonListコントロールなど変更系イベントを発生するコントロールを使用する場合、自動ポストバック機能（AutoPostBackプロパティ）をあらかじめ有効にしておくこと。さもないと、値変更時にイベントがリアルタイムに発生しないので注意してほしい。

　PopupControlコントロールのTargetControlIDプロパティは、ポップアップ・ウィンドウを関連付ける入力コントロールを指定するものだ。ここでは“txtMsg”を指定しているので、これによって、TextBoxコントロールtxtMsgにPopupControlコントロールの機能が付与されたことになるわけだ。

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

　ここでは、取りあえず最低限の情報として、ポップアップ表示するパネル（PopupControlIDプロパティ）、ポップアップ・ウィンドウの表示位置（Positionプロパティ）を指定しておくことにしよう。

　以上で、画面の外観にかかわる設定は完了だ。ここで参考までにVisual Studio 2005によって自動生成されたコードを引用しておく。プロパティ・ウィンドウ上ではTextBoxコントロール配下のプロパティとして設定したPopupControlIDプロパティなども、コード上はPopupControlコントロールの属性として記述されていることが確認できるはずだ。

<%--Control Toolkitを使用する場合には先頭にScriptManagerコントロールの配置が必須--%>

<asp:ScriptManager ID="manager" runat="server">

  </asp:ScriptManager>

<asp:TextBox ID="txtMsg" runat="server"></asp:TextBox>

<%--ポップアップ・ウィンドウとして表示するパネル領域を定義--%>

<asp:Panel ID="pnl" runat="server" BackColor="#FFFFC0">

  <asp:UpdatePanel ID="upanel" runat="server">

    <ContentTemplate>

      <asp:RadioButtonList ID="rdo" runat="server" AutoPostBack="True">

        <asp:ListItem Value="-">キャンセル</asp:ListItem>

        <asp:ListItem>こんにちは</asp:ListItem>

        <asp:ListItem>おはようございます</asp:ListItem>

        <asp:ListItem>こんばんは</asp:ListItem>

      </asp:RadioButtonList>

    </ContentTemplate>

  </asp:UpdatePanel>

</asp:Panel>

<%--PopupControlコントロールの諸設定--%>

<ajaxToolkit:PopupControlExtender ID="popup" runat="server"

  PopupControlID="pnl" TargetControlID="txtMsg" Position="Bottom">

  </ajaxToolkit:PopupControlExtender>

PopupControl.aspxのソース・コード（抜粋）

一連のレイアウト編集を行った後、Visual Studio 2005によって自動生成されたコードを引用したもの。なお、<%--〜--%>は筆者によるコメント。

2. ラジオボタン選択時の処理を記述する

　あとは、ポップアップ・ウィンドウ上でラジオボタンの値が選択されたタイミングで実行される処理を記述するだけだ。具体的なコードは以下のとおり。

protected void rdo_SelectedIndexChanged(Object sender, EventArgs e){

  if (rdo.SelectedValue == "-") {

    // ［キャンセル］選択時にはポップアップ・ウィンドウを閉じるのみ

    popup.Cancel();

  }else{

    // ［キャンセル］以外を選択時にはその値をテキストボックスに反映

    popup.Commit(rdo.SelectedValue);

  }

}

Protected Sub rdo_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)

  If rdo.SelectedValue = "-" Then

    ' ［キャンセル］選択時にはポップアップ・ウィンドウを閉じるのみ

    popup.Cancel()

  Else

    ' ［キャンセル］以外を選択時にはその値をテキストボックスに反映

    popup.Commit(rdo.SelectedValue)

  End If

End Sub

ラジオボタンの選択値をテキストボックスにフィードバックするコード（PopupControl.aspx）（上：C#、下：VB）

　PopupControlコントロールで、ポップアップ・ウィンドウを操作するのはCommit／Cancelメソッドの役割だ。何もせずにポップアップ・ウィンドウを閉じるならば、Cancelメソッドを呼び出すだけでよい。ここでは［キャンセル］が選択されたタイミングで（ラジオボタンの選択値が「-」である場合に）、Cancelメソッドを呼び出し、ポップアップ・ウィンドウを閉じている。

　一方、Commitメソッドは、パラメータに指定された値をTargetControlIDプロパティで選択されたコントロールに反映したうえで、ポップアップ・ウィンドウをクローズする。ここでは、［キャンセル］以外のオプションが選択された場合にCommitメソッドを呼び出し、ラジオボタンの選択値をテキストボックスにフィードバックしているわけだ。

　以上を理解したら、さっそく作成したサンプル・プログラムを実行してみよう。冒頭の画面のように、テキストボックスにフォーカスを当てることでラジオボタンリストが表示され、かつ、ラジオボタンで選択した内容がテキストボックスに反映されることを、それぞれ確認してほしい。

　ちなみに、PopupControlコントロールを利用することで、以下のような日付入力ボックスをテキストボックスに付加することも可能だ。ただしこの場合には、標準のCalendarコントロールをポップアップ表示させるより、専用のCalendarコントロール（CalendarExtender）を利用した方がよりシンプルな手順で実装できる。Calendarコントロールに関する詳細は、後日「TIPS：［ASP.NET AJAX］Calendarコントロールで日付入力ボックスを定義するには？」で紹介する予定だ。

■

　なお、本稿で紹介したほかにも、PopupControlコントロールでは多くのプロパティが公開されている。主要なものを以下の表にまとめておく。

　ちなみに、CommitPropertyプロパティが省略された場合、PopupControlコントロールはTargetControlIDプロパティで指定されたコントロールのデフォルト・プロパティ（TextBoxコントロールであればTextプロパティ）に対して結果の反映を行う。CommitPropertyプロパティを明示的に指定するのは、デフォルト・プロパティ以外のプロパティにPopupControlコントロールの値を反映させたい場合だけでよい。

［ASP.NET AJAX］PopupControlコントロールで標準コントロールにポップアップ機能を追加するには？［2.0のみ、C#、VB］ − ＠IT