使ってみようASP.NET AJAX Control Toolkit（入力補助コントロール編2）

ASP.NET AJAX Control Toolkitの利用方法を学習する 後編

特殊なメニュー表示を可能にするエクステンダ

　ここからは、Webページの利用者にとってクールに見え、さらに使いやすくなる「特殊なメニュー表示を可能にするエクステンダ」について説明します。

PopupControlExtenderコントロール

　PopupControlExtenderコントロールは、コントロールにフォーカスがある状態で指定したコントロールをポップアップ表示させる機能を付加するエクステンダコントロールで、ほとんどのコントロールに適応させることが可能です。このエクステンダコントロールは、フォーカスが当たるまで存在していることをユーザーに知らせることがなく、自然に利用してもらうことが可能です。また、特定のコントロールでは、サーバーサイドの記述を少し行うことで選択した情報をコミットして値を反映させることも可能となっています。

表9

プロパティ名	概要
PopupControlID	ポップアップさせるコントロールのIDを設定
Position	ポップアップの表示位置を設定
TargetControlID	ポップアップコントロールのトリガーとなるコントロールのIDを設定
CommitProperty	ポップアップの結果で設定されるべきコントロールの特性を設定（innerTextなど）
CommitScript	ポップアップの結果を設定した後に実行する追加スクリプトを設定

　テキストボックスにフォーカスがある状態でリストボックスをポップアップさせて、アイテムを選択させるには、次のように設定します。

default.aspx（一部）

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Panel ID="Panel1" runat="server">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:ListBox ID="ListBox1" runat="server"
                AutoPostBack="True"
                OnSelectedIndexChanged="ListBox1_SelectedIndexChanged">
                <asp:ListItem>Windows Vista</asp:ListItem>
                <asp:ListItem>Windows XP</asp:ListItem>
                <asp:ListItem>Windows 2000</asp:ListItem>
                <asp:ListItem>Windows Me</asp:ListItem>
                <asp:ListItem>Windows 98</asp:ListItem>
            </asp:ListBox>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Panel>
<ajaxToolkit:PopupControlExtender runat="server"
    ID="PopUpControlExtender1" TargetControlID="TextBox1"
    PopupControlID="Panel1" Position="Bottom" />

　選択したアイテムをテキストボックスに反映させたい場合は、コードビハインドで次のように設定する必要があります（イベントはListBox1_SelectedIndexChanged）。

PopupControlExtender.aspx.vb（一部）

PopUpControlExtender1.Commit(ListBox1.SelectedValue)

　サンプルを実行すると図22～24のようになります（ダウンロードサンプルのファイルは「/PopupControlExtender/PopupControlExtender.aspx」です）。

図22 サンプル実行直後の画面

図23 上のテキストボックスにフォーカスを当ててリストボックスをポップアップさせた画面

図24 下のラベルをクリックして画像をポップアップさせた画面

　なお、CommitPropertyにはCommitメソッドを利用した時の結果を設定するコントロール（TargetControlIDで設定したコントロール）のDOM Elementプロパティ（innerTextなど）を設定する必要があります。もし、CommitPropertyに何も設定されていない場合には、既定で「value」のプロパティが設定されます。つまり、CommitPropertyに設定しなくてよいコントロールは<INPUT TYPE="text" />に展開されるコントロールのみとなります。

ModalPopupExtenderコントロール

　ModalPopupExtenderコントロールはHTMLダイアログを使用せずに、デザインされたモーダルのUIの表示を可能にするエクステンダコントロールで、カスタムスタイルを元のページに適用させることが可能となっています。OKかキャンセルボタンを配置し、クリックすることで、カスタムスタイルを適用するスクリプトを実行するのが特徴となっています。なお、このコントロールは利用の際にJavaScriptを記述する必要があります。

表10

プロパティ名	概要
TargetControlID	モーダルポップアップを起こすコントロールIDを設定
PopupControlID	モーダルポップアップとして表示するコントロールIDを設定
BackgroundCssClass	モーダルポップアップを表示するとき背景に適用するCSSのクラスを設定（filterを使うことを推奨）
DropShadow	モーダルポップアップされたコントロールに影を表示させるかどうかを設定
OkControlID	モーダルポップアップ内の選択を決定するコントロールIDを設定
OnOkScript	OkControlIDがクリックされた際に実行するスクリプトを設定
OkCancelID	モーダルポップアップを取り消すコントロールIDを設定
OkCancelScript	CancelControlIDがクリックされた際に実行するスクリプトを設定
PopupDragHandleControlID	モーダルポップアップされたコントロールをドラッグするためのヘッダーコントロールIDを設定

　Buttonコントロールをクリックした際にモーダルなパネルをポップアップさせて、Buttonコントロールの文字色を選択した色に変更させるには、次のように設定します。

ModalPopupExtender.aspx（一部）

<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1"
    runat="server" TargetControlID="Button1" PopupControlID="Panel1"
    DropShadow="true" OnOkScript="ClickOk()" OkControlID="EndButton"
    CancelControlID="CancelButton" BackgroundCssClass="modalBack">
</ajaxToolkit:ModalPopupExtender>
<asp:Button ID="Button1" runat="server"
    Text="ModalPanelで選択した色に変更します" />
<script type="text/javascript">
//変数Colorに格納された色を
//モーダルパネルを表示させたButton1のスタイルに設定します
var Color;
function ClickOk() {
    $get('ctl00_ContentPlaceHolder1_Button1').style.color=Color;
}
</script>
<%-- ラジオボタンに表示された色を変数Colorに格納する --%>
<asp:Panel ID="Panel1" runat="server" CssClass="ModalPanel">
    <br />
    <input id="Radio1" name="Radio" type="radio"
           onclick="Color = 'Blue';" />
    <label style="color:Blue" for="RadioD">青色</label><br />
    <input id="Radio2" name="Radio" type="radio"
           onclick="Color = 'Red';" />
    <label style="color:Red" for="RadioD">赤色</label><br />
    <input id="Radio3" name="Radio" type="radio"
           onclick="Color ='Green';" />
    <label style="color:Green" for="RadioD">緑色</label><br />
    <asp:Button ID="EndButton" runat="server" Text="End" />
    <asp:Button ID="CancelButton" runat="server" Text="Cancel" />
</asp:Panel>

$get関数について

　上のサンプルのJavaScriptの記述部分で、$getと呼ばれる関数を利用していますが、これはSys.UI.DomElement.getElementByIdを省略した関数となっています。この関数はMicrosoft AJAX Libraryの中に組み込まれている関数の1つで、他にもSys.Application.findComponentを省略した$findなど便利な関数が組み込まれています。基本的にControl Toolkitはエクステンダコントロールを利用して極力JavaScriptを記述しない形式の開発が行えるようになっていますが、必要な時はMicrosoft AJAX Libraryを利用することで、開発生産性の向上が望めます。

マスターページを使用した際のClientIDについて

　上のサンプルでは、asp:Buttonに設定したID="Button1"がctl00_ContentPlaceHolder1_Button1というClientIDで出力されていますが、これはMasterPage.masterとそれを適用したコンテンツページのデザイン時に別々のデザイナで作業する都合上、同じID（Button1など）が入る可能性があることを考慮して、ページ内でIDが一意の物になるように「ctl00_ContentPlaceHolderID_コントロール名」というClientIDで出力されるようになっています。

　サンプルを実行すると図25～27のようになります（ダウンロードサンプルのファイルは「/ModalPopupExtender/ModalPopupExtender.aspx」です）。

図25 サンプル実行直後の画面

図26 モーダルなポップアップウィンドウを表示した画面

図27 ポップアップウィンドウから選択した青色がボタンの文字に反映された画面