AJAX Control Toolkit - ValidatorCallout

本文介绍ValidatorCalloutExtender控件的使用方法,包括如何配置样式、动画及关联验证控件等。通过示例代码展示了如何设置弹出错误提示的外观、位置和行为。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 该控件的作用就是配合验证控件使用,以气球的形式弹出错误提示。

TargetControlID - The ID of the Validator to extend.(要添加扩展的验证控件的ID)

Width - The Width of the callout.()

CssClass - Name of the CSS used to style the ValidatorCallout.See the ValidatorCallOut Theming section for more information.(低版本中不存在该属性,该属性是该控件的核心)添加CssClass后如下图:

>>ValidatorCallout Css classes

 ajax__validatorcallout_popup_table: The popup table.
ajax__validatorcallout_popup_table_row: The popup table row.
ajax__validatorcallout_callout_cell: The callout cell.
ajax__validatorcallout_callout_table: The table in the callout cell.
ajax__validatorcallout_callout_table_row: The callout table row.
ajax__validatorcallout_error_message_cell: The error message cell.
ajax__validatorcallout_icon_cell: The warning icon cell.
ajax__validatorcallout_close_button_cell: The close button cell.
ajax__validatorcallout_arrow_cell: The arror cell.
ajax__validatorcallout_innerdiv: Inner div of a cell. Used in the close button cell and the arrow cell.

  1     <style type="text/css">
2 body
3 {
4 background-color:#6495ed;
5
6 font-family:Comic Sans MS,微软雅黑;
7 font-size:large;
8
9 }
10 .Button
11 {
12 font-family:Comic Sans MS,微软雅黑;
13 }
14 .customCalloutStyle div, .customCalloutStyle td{
15 border: solid 1px Black;
16 background-color:Gray;
17 color:White;
18 }
19 .customCalloutStyle .ajax__validatorcallout_popup_table{
20 display: none;
21 border: none;
22 background-color: transparent;
23 padding: 0px;
24 }
25 .customCalloutStyle .ajax__validatorcallout_popup_table_row{
26 vertical-align: top;
27 height: 100%;
28 background-color: transparent;
29 padding: 0px;
30 }
31 .customCalloutStyle .ajax__validatorcallout_callout_cell{
32 width: 20px;
33 height: 100%;
34 text-align: right;
35 vertical-align: top;
36 border: none;
37 background-color: transparent;
38 padding: 0px;
39 }
40 .customCalloutStyle .ajax__validatorcallout_callout_table{
41 height: 100%;
42 border: none;
43 background-color: transparent;
44 padding: 0px;
45 }
46 .customCalloutStyle .ajax__validatorcallout_callout_table_row{
47 background-color: transparent;
48 padding: 0px;
49 }
50 .customCalloutStyle .ajax__validatorcallout_callout_arrow_cell
51 {
52 padding: 8px 0px 0px 0px;
53 text-align: right;
54 vertical-align: top;
55 font-size: 1px;
56 border: none;
57 background-color: transparent;
58 }
59 .customCalloutStyle .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv{
60 font-size: 1px;
61 position: relative;
62 left: 1px;
63 border-bottom: none;
64 border-right: none;
65 border-left: none;
66 width: 15px;
67 background-color: transparent;
68 padding: 0px;
69 }
70 .customCalloutStyle .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv div{
71 height: 1px;
72 overflow: hidden;
73 border-top: none;
74 border-bottom: none;
75 border-right: none;
76 padding: 0px;
77 margin-left: auto;
78 }
79 .customCalloutStyle .ajax__validatorcallout_error_message_cell
80 {
81 font-family: Tahoma;
82 font-size: 11px;
83 padding: 5px;
84 border-right: none;
85 border-left: none;
86 width: 100%;
87 }
88 .customCalloutStyle .ajax__validatorcallout_icon_cell{
89 width: 20px;
90 padding: 5px;
91 border-right: none;
92 }
93 .customCalloutStyle .ajax__validatorcallout_close_button_cell{
94 vertical-align: top;
95 padding:5px 15px 0px 0px;
96 text-align: right;
97 border-left: none;
98 }
99 .customCalloutStyle .ajax__validatorcallout_close_button_cell .ajax__validatorcallout_innerdiv{
100 border: none;
101 text-align: center;
102 width: 10px;
103 padding: 1px;
104 cursor: pointer;
105 }
106 </style>

HighlightCssClass - A CssClass to apply to the invalid field.

WaringIconImageUrl - The path to a custom warning icon image.

CloseImageUrl - The path to a custom close image.

Aninations - Generic animations for the ValidatorCallout extender. See the Using Animations walkthrough and Animation Reference for more details.

  • OnShow - The OnShow animation will be played each time the validation popup is displayed. The popup will be positioned correctly but hidden. The animation can use to display the popup along with any other visual effects.
  • OnHide - The OnHide animation will be played each time the validation popup is hidden.
 1  <form id="form1" runat="server">
2 <asp:ScriptManager ID="ScriptManager1" runat="server" />
3 <table>
4 <tr>
5 <td>Name:</td>
6 <td>
7 <asp:TextBox runat="server" ID="NameTextBox" BorderStyle="solid" BorderWidth="1px" BorderColor="#a9a9a9" />
8 </td>
9 </tr>
10 <tr>
11 <td>EMail:</td>
12 <td>
13 <asp:TextBox runat="server" ID="EmailTextBox" BorderStyle="solid" BorderWidth="1px" BorderColor="#a9a9a9" />
14 </td>
15 </tr>
16 </table>
17 <br />
18 <asp:RequiredFieldValidator runat="server" ID="NReq"
19 ControlToValidate="NameTextBox"
20 SetFocusOnError="true"
21 CssClass="callout"
22 Display="None"
23 ErrorMessage="<p style=' font-family:Comic Sans MS; font-size:10px;'>Required Field Missing<br />A name is required.</p>" />
24 <ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="NReqE"
25 TargetControlID="NReq"
26 Width="200px"
27 CssClass="customCalloutStyle"
28 WarningIconImageUrl="~/images/001_111.png"
29 CloseImageUrl="~/images/001_051.png"
30 HighlightCssClass="validatorCalloutHighlight" />
31
32 <asp:RequiredFieldValidator runat="server" ID="PNReq"
33 ControlToValidate="PhoneNumberTextBox"
34 Display="None"
35
36 ErrorMessage="<b>Required Field Missing</b><br />A Email is required.<div style='margin-top:5px;padding:5px;border:1px solid #e9e9e9;background-color:white;'><b>Other Options:</b><br /><a href='javascript:alert(&quot;No phone number available in profile.&quot;);'>Extract from Profile</a></div>"
37 SetFocusOnError="True" />
38 <ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="PNReqE"
39 TargetControlID="PNReq"
40 HighlightCssClass="validatorCalloutHighlight"
41 Width="350px" />
42
43 <asp:RegularExpressionValidator runat="server" ID="PNRegEx"
44 ControlToValidate="PhoneNumberTextBox"
45 Display="None"
46 ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
47 ErrorMessage="<b>Invalid Field</b><br />Please enter a Email Url<br />ex:example@example.com"
48 SetFocusOnError="True" />
49 <ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="PNReqEx"
50 TargetControlID="PNRegEx"
51 HighlightCssClass="validatorCalloutHighlight" />
52
53 <asp:Button ID="Button1" runat="server" Font-Names="Comic Sans MS" Text="Submit" OnClick="Button1_OnClick" /><br /><br />
54 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
55 <ContentTemplate>
56 <asp:Label id="lblMessage" runat="server" />
57 </ContentTemplate>
58 <Triggers>
59 <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
60 </Triggers>
61 </asp:UpdatePanel>
62 </form>

More Information about ValidtorCallOutExtender

转载于:https://www.cnblogs.com/January/archive/2011/08/12/2136134.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值