はじめに
前回の記事で、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
データ入力ページの作成に役立つ部品
本稿ではデータ入力ページの作成に役立つ部品の中の「入力検証機能を強化するエクステンダ」「特殊なメニュー表示を可能にするエクステンダ」について触れて行きます。
- 入力検証機能を強化するエクステンダ
- 特殊なメニュー表示を可能にするエクステンダ
入力検証機能を強化するエクステンダ
まずは、Webページの作成で使用頻度の高い「入力検証機能を強化するエクステンダ」について説明します。
ValidatorCalloutExtenderコントロール
ValidatorCalloutExtenderコントロールは既存の検証コントロールの機能性を高めるエクステンダコントロールで、ポストバックが発生する際に既存の検証コントロールをコールアウトさせることが可能になります。デフォルトで警告アイコンなどが設定されていますが、プロパティ設定によりカスタマイズすることも可能となっています。
| プロパティ名 | 概要 |
| WarningIconImageUrl | 警告アイコンのImageを設定 |
| CloseImageUrl | 閉じる部分のImageを設定 |
| Width | コールアウトの幅を設定 |
| TargetControlID | コールアウトする「検証コントロール」のIDを設定 |
テキストボックスにインターネットURLの値以外が入力された際に警告を表示するには、次のように設定します。
<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」です）。
TextBoxWatermarkExtenderコントロール
TextBoxWatermarkExtenderコントロールはテキストボックスに入力がされていない場合、透かしを表示させる機能を付加するエクステンダコントロールで、テキストボックスに何を入力するべきか、あらかじめ通知できるようになっています。テキストボックスにフォーカスが当たると透かしは消えます。
| プロパティ名 | 概要 |
| WatermarkText | 透かしに表示されるテキストを設定 |
| WatermarkCssClass | 透かしテキストの背景のCSSを設定する設定しない場合は透明な表示 |
| TargetControlID | 透かしを表示させる「TextBoxコントロール」のIDを設定 |
テキストボックスに名前を入力させたい場合は、次のような設定で実現できます（CSS設定は省いています）。
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <ajaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1"
runat="server" TargetControlID="TextBox1"
WatermarkText="名前を入力してください" />
サンプルを実行すると図3～5のようになります（ダウンロードサンプルのファイルは「/TextBoxWatermarkExtender/TextBoxWatermarkExtender.aspx」です）。
ConfirmButtonExtenderコントロール
ConfirmButtonExtenderコントロールは、ASP.NETのボタン系コントロールクリック時に確認ダイアログを表示するエクステンダコントロールで、Buttonコントロール、LinkButtonコントロール、ImageButtonコントロールで利用することが可能です。
| プロパティ名 | 概要 |
| ConfirmText | 確認ダイアログに表示するテキストを設定 |
| TargetControlID | 確認ダイアログを表示させる「Button系コントロール」のIDを設定 |
ボタンクリック時に確認ダイアログを表示するには、次のように設定します。
<asp:Button ID="Button1" runat="server" Text="Button" /> <ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender1"
runat="server" ConfirmText="ボタンをクリックしましたか？"
TargetControlID="Button1" />
サンプルを実行すると図6～7のようになります（ダウンロードサンプルのファイルは「/ConfirmButtonExtender/ConfirmButtonExtender.aspx」です）。
