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

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

　Ajax Control Toolkitは、日付入力に便利なCalendar Extenderという部品を
提供してくれている。早速使ってみた。　09/08/11

　ところが、このCalender Extenderは標準の方法での日本語表示化では、カレンダ
の表示の全てが日本語表示になってくれない。この欠点を補完するする方法が
↓このページに紹介されていたので、対応してみた。
http://devadjust.exblog.jp/7018028/

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

【機能】TextBoxをクリックするとカレンダがポップアップし、日付が簡単に入力できる。
　　　　（カレンダの表示が日本語化されているところが特徴）

【稼動サンプル】
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.Ajaxカレンダの表示を日本語化する 08/01/19
http://devadjust.exblog.jp/7018028/

2.JavaScriptコードの埋め込み方法 04/05/21
http://www.atmarkit.co.jp/fdotnet/dotnettips/160regscript/regscript.html

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