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

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

前回のASP.NET AJAX Control Toolkitの入力ページ補助コントロール編に続いて、本稿では「入力検証機能を強化するエクステンダ」と「特殊なメニュー表示を可能にするエクステンダ」の計11個のコントロールをサンプルを交えて学習していきます。

はじめに

　前回の記事で、ASP.NET AJAX Control Toolkit（以下、Control Toolkit）の入力ページ補助コントロールの一部について解説しました。

　本稿では「入力検証機能を強化するエクステンダ」と「特殊なメニュー表示を可能にするエクステンダ」の各コントロールの魅力を伝えつつ、コントロールの使い方について解説していきたいと思います。ただし、各コントロールすべてのプロパティを網羅しているわけではないので、各コントロールについて詳しく知りたい方は公式ページを参照して学習してください。

　また、今回のサンプルプログラムはごく基礎的な用途の紹介ですので、さらに詳細な使い方を学習したい方も公式ページを参考にしてください。

対象読者

• ASP.NET 2.0を使ったことがある人
• ASP.NET AJAXに興味がある人
• AJAXに興味がある人
• AJAXに興味があるが、JavaScriptが分からない人

必要な環境と準備

• Visual Web Developer 2005 Express EditionもしくはVisual Studio 2005（以下、VS）
• ASP.NET AJAX V1.0
• ASP.NET AJAX Control Toolkit

　ASP.NET AJAXの入手方法とインストール方法はこちらの記事、Control Toolkitの入手方法と利用方法は前々回の記事を参照してください。

今回ご紹介するASP.NET AJAX Control Toolkit

データ入力ページの作成に役立つ部品

　本稿ではデータ入力ページの作成に役立つ部品の中の「入力検証機能を強化するエクステンダ」「特殊なメニュー表示を可能にするエクステンダ」について触れて行きます。

1. 入力検証機能を強化するエクステンダ
ValidatorCallout、TextBoxWatermark、ConfirmButton、PasswordStrength、MutuallyExclusiveCheckbox、AutoComplete、MaskedEdit
 
2. 特殊なメニュー表示を可能にするエクステンダ
PopupControl、ModalPopup、HoverMenur、Calendar

入力検証機能を強化するエクステンダ

　まずは、Webページの作成で使用頻度の高い「入力検証機能を強化するエクステンダ」について説明します。

ValidatorCalloutExtenderコントロール

　ValidatorCalloutExtenderコントロールは既存の検証コントロールの機能性を高めるエクステンダコントロールで、ポストバックが発生する際に既存の検証コントロールをコールアウトさせることが可能になります。デフォルトで警告アイコンなどが設定されていますが、プロパティ設定によりカスタマイズすることも可能となっています。

表1

プロパティ名	概要
WarningIconImageUrl	警告アイコンのImageを設定
CloseImageUrl	閉じる部分のImageを設定
Width	コールアウトの幅を設定
TargetControlID	コールアウトする「検証コントロール」のIDを設定

　テキストボックスにインターネットURLの値以外が入力された際に警告を表示するには、次のように設定します。

ValidatorCalloutExtender.aspx（一部）

<asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1"
    runat="server"
    ControlToValidate="TextBox1"
    display="None"
    ValidationExpression="http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?"
    ErrorMessage="<b>入力エラーです。</b><br /> インターネットアドレスを入力してください。http(s)://****.***" />
<ajaxToolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender1"
    runat="server" TargetControlID="RegularExpressionValidator1" />
<asp:Button ID="Button1" runat="server"
    OnClientClick="return false" Text="Button" />

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

図1 上のテキストボックスの検証コントロールをコールアウトした画面

図2 下のテキストボックスの検証コントロールをコールアウトした画面

TextBoxWatermarkExtenderコントロール

　TextBoxWatermarkExtenderコントロールはテキストボックスに入力がされていない場合、透かしを表示させる機能を付加するエクステンダコントロールで、テキストボックスに何を入力するべきか、あらかじめ通知できるようになっています。テキストボックスにフォーカスが当たると透かしは消えます。

表2

プロパティ名	概要
WatermarkText	透かしに表示されるテキストを設定
WatermarkCssClass	透かしテキストの背景のCSSを設定する設定しない場合は透明な表示
TargetControlID	透かしを表示させる「TextBoxコントロール」のIDを設定

　テキストボックスに名前を入力させたい場合は、次のような設定で実現できます（CSS設定は省いています）。

TextBoxWatermarkExtender.aspx（一部）

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<ajaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1"
    runat="server" TargetControlID="TextBox1"
    WatermarkText="名前を入力してください" />

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

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

図4 上のテキストボックスにフォーカスがあたった画面

図5 上のテキストボックスに値を入力し、下のテキストボックスにフォーカスがあたった画面

ConfirmButtonExtenderコントロール

　ConfirmButtonExtenderコントロールは、ASP.NETのボタン系コントロールクリック時に確認ダイアログを表示するエクステンダコントロールで、Buttonコントロール、LinkButtonコントロール、ImageButtonコントロールで利用することが可能です。

表3

プロパティ名	概要
ConfirmText	確認ダイアログに表示するテキストを設定
TargetControlID	確認ダイアログを表示させる「Button系コントロール」のIDを設定

　ボタンクリック時に確認ダイアログを表示するには、次のように設定します。

ConfirmButtonExtender.aspx（一部）

<asp:Button ID="Button1" runat="server" Text="Button" />
<ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender1"
    runat="server" ConfirmText="ボタンをクリックしましたか？"
    TargetControlID="Button1" />

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

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

図7 ボタンをクリックすると表示される確認ダイアログ