閲覧総計:10474  (本日:1  昨日:0)

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

 ASP.NETは標準機能として各種Validate機能を用意してくれている。しかし、入力
検証エラーメッセージが画面レイアウトを大きく乱してしまうという欠点を持って
いた。このValidatorCalloutは、この欠点を改善してくれる便利な部品である。
 特に<table>タグを用いて画面レイアウトを設計している場合などに効果大である。
説明:検証エラーメッセージによるレイアウト崩れが解消

 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.useiis7.net/AjaxTr/Toolkit/ValidatorCallout.aspx

ValidatorCallout02.JPG


ValidatorCallout04.JPG


ValidatorCallout05.JPG

作成時の画面(VWD2005) ▼

ValidatorCallout01.JPG

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

ValidatorCallout03.JPG

コントロールの設定値

コントロールプロパティコメント
RequiredFieldValidator(ID)RequiredFieldValidator1入力必須チェック
ControlToValidateTextBox1
SetFocusOnErrorTrueエラー時 問題ヶ所へカーソル移動
DisplayNone2重表示にならぬ様消し
ErrorMessage名前は必須です
ValidatorCalloutExtender(ID)ValidatorCalloutExtender1バルーン AJAX Toolkit
TargetControlIDRequiredFieldValidator1
RequiredFieldValidator(ID)RequiredFieldValidator2入力必須チェック
ControlToValidateTextBox2
SetFocusOnErrorTrueエラー時 問題ヶ所へカーソル移動
DisplayNone2重表示にならぬ様消し
ErrorMessage年齢は必須です
ValidatorCalloutExtender(ID)ValidatorCalloutExtender2バルーン AJAX Toolkit
TargetControlIDRequiredFieldValidator2
RangeValidator(ID)RangeValidator1データ範囲チェック
ControlToValidateTextBox2
MaximumValue100
MinimumValue0
SetFocusOnErrorTrueエラー時 問題ヶ所へカーソル移動
TypeInteger整数に設定
DisplayNone2重表示にならぬ様消し
ErrorMessage年齢は0〜100の間で
ValidatorCalloutExtender(ID)ValidatorCalloutExtender3バルーン AJAX Toolkit
TargetControlIDRangeValidator1

【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



説明:検証エラーメッセージによるレイアウト崩れが解消

ValidatorCallout11.JPG
  • ふぁdふぁ -- 2014-04-30 (水) 13:34:00
    選択肢 投票
    参考になった 10  
    ふつう 0  
    参考にならなかった 0  

添付ファイル: fileValidatorCallout11.JPG 693件 [詳細] fileValidatorCallout05.JPG 585件 [詳細] fileValidatorCallout04.JPG 627件 [詳細] fileValidatorCallout03.JPG 596件 [詳細] fileValidatorCallout02.JPG 656件 [詳細] fileValidatorCallout01.JPG 585件 [詳細]

トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2023-03-03 (金) 01:48:47 (358d)