チュートリアル
文責：山田奈美最終更新日：2007年12月03日
ValidatorCalloutコントロール（AJAX Control Toolkit）
|
 |
|
サイトからデータを入力してもらう時、間違ったデータを受け取らないように、エラーメッセージを表示させることあるよね。
ValidatorCalloutコントロールは、そのエラーメッセージを風船のようにポップアップで表示するので、ユーザが間違いに気付きやすく、とっても効果的だよ。
|
|
|
ValidatorCalloutコントロールとは？
ValidatorCalloutコントロールでは、既存のASP.NET AJAXに含まれる検証機能よりも効果的にエラーメッセージを表示させることができます。
以下は、ValidatorCalloutコントロールを使ったサンプルの実行結果です。
TextboxWatermarkサンプル実行結果
TextboxWatermarkサンプル実行結果
ValidatorCalloutコントロールの使い方は、とっても簡単。VisualStudio（VisualWebDeveloper）のデザイン画面にValidatorCalloutコントロールを配置して、以下表を参考にプロパティを入力するだけでOKです。プロパティ値がプロパティウィンドウから入力できない場合は、ソース画面から直接入力してください。
ValidatorCalloutコントロールのプロパティ
ValidatorCalloutコントロールのプロパティは、以下の表のとおりです。
ValidatorCalloutコントロールのプロパティ
| プロパティ名 | 概要 |
| TargetControlID | 機能を適用する検証コントロールのID |
| HighlightCssClass | エラーメッセージに適用するCssClass |
| WarningIconImageUrl | 警告アイコン画像のパス |
| CloseImageUrl | 閉じるアイコン画像のパス |
ValidatorCalloutコントロールのサンプル
ここではValidatorCalloutコントロールを3つ配置して、TargetControlIDプロパティにそれぞれの検証コントロールのIDを設定しました。また、CssClassは特に設定していないので、デフォルトのものが適用されています。
［TextboxWatermark.aspx］
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
名前：<asp:TextBox ID="nameTextBox" runat="server"></asp:TextBox><br />
年齢：<asp:TextBox ID="oldTextBox" runat="server"></asp:TextBox><br />
<asp:RequiredFieldValidator ID="nReq" runat="server" ControlToValidate="nameTextBox"
Display="None" ErrorMessage="名前は必須です"></asp:RequiredFieldValidator>
<cc1:validatorcalloutextender id="nReqE" runat="server" targetcontrolid="nReq"></cc1:validatorcalloutextender>
<asp:RequiredFieldValidator ID="oReq" runat="server" ControlToValidate="oldTextBox"
Display="None" ErrorMessage="年齢は必須です"></asp:RequiredFieldValidator>
<cc1:validatorcalloutextender id="oReqE" runat="server" targetcontrolid="oReq"></cc1:validatorcalloutextender>
<asp:RangeValidator ID="oRng" runat="server" ControlToValidate="oldTextBox" Display="None"
ErrorMessage="年齢は0～100の間で" MaximumValue="100" MinimumValue="0"></asp:RangeValidator>
<br />
<cc1:validatorcalloutextender id="oRngE" runat="server" targetcontrolid="oRng"></cc1:validatorcalloutextender>
<asp:Button ID="Button1" runat="server" Text="送信" />
</form>
実行結果は冒頭の図のとおり。必須チェック、データ範囲チェックでのエラーメッセージが効果的に表示されます。
