入力検証エラーをバルーン表示(ValidatorCallout) のバックアップソース(No.4)

閲覧総計：&counter();　　（本日：&counter(today);　　昨日：&counter(yesterday);)

　Ajax Control Toolkitは、入力検証エラーメッセージをバルーン表示してくれる
便利なValidatorCallout Extenderという部品を提供してくれている。
早速使ってみた。　09/08/14

　ASP.NETは標準機能として各種Validate機能を用意してくれている。しかし、入力
検証エラーメッセージが画面レイアウトを大きく乱してしまうという欠点を持って
いた。このValidatorCalloutは、この欠点を改善してくれる便利な部品である。
　特に<table>タグを用いて画面レイアウトを設計している場合などに効果大である。
※[[説明：検証エラーメッセージによるレイアウト崩れが解消:http://kuri6005.sakura.ne.jp/aspnet/wiki/index.php?%C6%FE%CE%CF%B8%A1%BE%DA%A5%A8%A5%E9%A1%BC%A4%F2%A5%D0%A5%EB%A1%BC%A5%F3%C9%BD%BC%A8%28ValidatorCallout%29#j107bf35]]

　ValidatorCalloutの使い方を「Web-Deli」さんの下記ページを参考にし、確認した。
http://www.web-deli.com/tutorial.aspx?id=ASP-TTR-00057

開発環境：VWD2005+AJAX1.0+Toolkit + SQL Server2005
サーバ：ASP.NET2.0+AJAX1.0 + SQL Server2005

【機能】名前と年齢の入力に対し検証を行い、エラーメッセージはバルーン表示する。

【稼動サンプル】
http://www.kuri6005.fscs.jp/4AjaxTr/Toolkit/ValidatorCallout.aspx
#ref(ValidatorCallout02.JPG);
~
#ref(ValidatorCallout04.JPG);
~
#ref(ValidatorCallout05.JPG);

作成時の画面(VWD2005) ▼
#ref(ValidatorCallout01.JPG);
(参考)VWD2008での作成時の画面 ▼　Extender部品は表示されずWYGIWYGレイアウトが出来る様になっている。
#ref(ValidatorCallout03.JPG);

コントロールの設定値
|~コントロール|~プロパティ|~値|~コメント|
|RequiredFieldValidator|(ID)|RequiredFieldValidator1|入力必須チェック|
|~|ControlToValidate|TextBox1||
|~|SetFocusOnError|True|エラー時 問題ヶ所へカーソル移動|
|~|Display|None|2重表示にならぬ様消し|
|~|ErrorMessage|名前は必須です||
|ValidatorCalloutExtender|(ID)|ValidatorCalloutExtender1|バルーン AJAX Toolkit|
|~|TargetControlID|RequiredFieldValidator1||
|RequiredFieldValidator|(ID)|RequiredFieldValidator2|入力必須チェック|
|~|ControlToValidate|TextBox2||
|~|SetFocusOnError|True|エラー時 問題ヶ所へカーソル移動|
|~|Display|None|2重表示にならぬ様消し|
|~|ErrorMessage|年齢は必須です||
|ValidatorCalloutExtender|(ID)|ValidatorCalloutExtender2|バルーン AJAX Toolkit|
|~|TargetControlID|RequiredFieldValidator2||
|RangeValidator|(ID)|RangeValidator1|データ範囲チェック|
|~|ControlToValidate|TextBox2||
|~|MaximumValue|100||
|~|MinimumValue|0||
|~|SetFocusOnError|True|エラー時 問題ヶ所へカーソル移動|
|~|Type|Integer|整数に設定|
|~|Display|None|2重表示にならぬ様消し|
|~|ErrorMessage|年齢は0～100の間で||
|ValidatorCalloutExtender|(ID)|ValidatorCalloutExtender3|バルーン AJAX Toolkit|
|~|TargetControlID|RangeValidator1||

【ValidatorCallout.aspx】
 <%@ Page Language="VB" %>
 
 <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <script runat="server">
 
 </script>
 
 <html xmlns="http://www.w3.org/1999/xhtml" >
 <head runat="server">
     <title>無題のページ</title>
 </head>
 <body>
     <form id="form1" runat="server">
     <div>
         <asp:ScriptManager ID="ScriptManager1" runat="server">
         </asp:ScriptManager>
         名前：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
         <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="名前は必須です" ControlToValidate="TextBox1" Display="None" SetFocusOnError="True"></asp:RequiredFieldValidator>
         <cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="RequiredFieldValidator1">
         </cc1:ValidatorCalloutExtender>
         <br />
         年齢：<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
         <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox2"
             Display="None" ErrorMessage="年齢は必須です" SetFocusOnError="True"></asp:RequiredFieldValidator>
         <cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" runat="server" TargetControlID="RequiredFieldValidator2">
         </cc1:ValidatorCalloutExtender>
         <asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="TextBox2"
             Display="None" ErrorMessage="年齢は0～100の間で" MaximumValue="100" MinimumValue="0" SetFocusOnError="True" Type="Integer"></asp:RangeValidator>
         <cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender3" runat="server" TargetControlID="RangeValidator1">
         </cc1:ValidatorCalloutExtender>
         <br />
         <br />
         <asp:Button ID="Button1" runat="server" Text="Button" /></div>
     </form>
 </body>
 </html>

【参考にしたページ】
1.Web-Deli：ValidatorCalloutコントロール（AJAX Control Toolkit）　07/12/03
http://www.web-deli.com/tutorial.aspx?id=ASP-TTR-00057
~
~
***説明：検証エラーメッセージによるレイアウト崩れが解消 [#j107bf35]
#ref(ValidatorCallout11.JPG);

#comment_nospam
#vote(参考になった[0],ふつう[0],参考にならなかった[0])