ValidatorCallout扩展器控件可以扩展ASP.NET中的Validator类型的控件,让其显示的错误提示变得更加醒目,对用户更加友好。
示例运行效果:
图(1)
图(2)
图(3)
ValidatorCalloutDemo.aspx代码示例:
<%
@ Page Language="C#" AutoEventWireup="true" CodeFile="ValidatorCalloutDemo.aspx.cs" Inherits="Chapter08_ValidatorCalloutDemo"
%>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > ValidatorCallout Demo </ title >
< link href ="StyleSheet.css" rel ="stylesheet" type ="text/css" />
< style type ="text/css" >
.highlight
{
background-color: lemonchiffon;
}
</ style >
</ head >
< body >
< form id ="form1" runat ="server" >
< asp:ScriptManager ID ="sm" runat ="server" />
< div class ="demoheading" > 更加醒目的Validator </ div >
< table >
< tr >
< td > Name: </ td >
< td >< asp:TextBox runat ="server" ID ="tbName"
BorderStyle ="solid" BorderWidth ="1px" BorderColor ="#a9a9a9" /></ td >
</ tr >
< tr >
< td > E-mail: </ td >
< td >< asp:TextBox runat ="server" ID ="tbEmail"
BorderStyle ="solid" BorderWidth ="1px" BorderColor ="#a9a9a9" /></ td >
</ tr >
< tr >
< td > Phone Number: </ td >
< td >< asp:TextBox runat ="server" ID ="tbPhoneNumber"
BorderStyle ="solid" BorderWidth ="1px" BorderColor ="#a9a9a9" /></ td >
</ tr >
</ table >
< asp:RequiredFieldValidator ID ="NReq" runat ="server"
ControlToValidate ="tbName"
Display ="None"
ErrorMessage ="<b>Required Field Missing</b><br />A name is rquired." />
< ajaxToolkit:ValidatorCalloutExtender ID ="NReqE" runat ="server"
TargetControlID ="NReq"
HighlightCssClass ="highlight"
Width ="240px" />
< asp:RequiredFieldValidator runat ="server" ID ="PNReq"
ControlToValidate ="tbPhoneNumber"
Display ="None"
ErrorMessage ="<b>Required Field Missing</b><br />A phone number 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("No phone number available in profile.");'>Extract from Profile</a></div>" />
< ajaxToolkit:ValidatorCalloutExtender runat ="server" ID ="PNReqE"
TargetControlID ="PNReq"
HighlightCssClass ="highlight"
Width ="350px" />
< asp:RegularExpressionValidator runat ="server" ID ="PNRegEx"
ControlToValidate ="tbPhoneNumber"
Display ="None"
ValidationExpression ="(((d{3}) ?)|(d{3}-))?d{3}-d{4}"
ErrorMessage ="<b>Invalid Field</b><br />Please enter a phone number in the format:<br />(###) ###-####" />
< ajaxToolkit:ValidatorCalloutExtender runat ="server" ID ="PNReqEx"
TargetControlID ="PNRegEx"
HighlightCssClass ="highlight"
Width ="350px" />
< asp:RequiredFieldValidator runat ="server" ID ="EMReq"
ControlToValidate ="tbEmail"
Display ="None"
ErrorMessage ="<b>Required Field Missing</b><br />A E-mail is required." />
< ajaxToolkit:ValidatorCalloutExtender ID ="EMReqE" runat ="server"
TargetControlID ="EMReq"
HighlightCssClass ="highlight"
Width ="240px" />
< asp:RegularExpressionValidator runat ="server" ID ="EMRegEx"
ControlToValidate ="tbEmail"
Display ="None"
ValidationExpression ="w+([-+.']w+)*@w+([-.]w+)*.w+([-.]w+)*"
ErrorMessage ="<b>Invalid Field</b><br />Please enter a E-mail.<br />e.g.kalen@126.com" />
< ajaxToolkit:ValidatorCalloutExtender runat ="server" ID ="EMRegExe"
TargetControlID ="EMRegEx"
HighlightCssClass ="highlight"
Width ="240px" />
<!--
TargetControlID:该扩展器目标Validator控件的ID,即将要被扩展的Validator控件的ID
HighlightCssClass:显示错误提示时,被验证控件将应用的样式
Width:弹出的显示错误的面板的宽度
WarningIconImageUrl:自定义警告图标的URL
CloseImageUrl:自定义关闭图标的URL
-->
< br />
< asp:Button ID ="btnOK" runat ="server" Text ="Submit" OnClick ="btnOK_Click" />< br />< br />
< asp:UpdatePanel ID ="up" runat ="server" >
< ContentTemplate >
< asp:Label ID ="lbResult" runat ="server" />
</ ContentTemplate >
< Triggers >
< asp:AsyncPostBackTrigger ControlID ="btnOK" EventName ="Click" />
</ Triggers >
</ asp:UpdatePanel >
</ form >
</ body >
</ html >
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > ValidatorCallout Demo </ title >
< link href ="StyleSheet.css" rel ="stylesheet" type ="text/css" />
< style type ="text/css" >
.highlight
{
background-color: lemonchiffon;
}
</ style >
</ head >
< body >
< form id ="form1" runat ="server" >
< asp:ScriptManager ID ="sm" runat ="server" />
< div class ="demoheading" > 更加醒目的Validator </ div >
< table >
< tr >
< td > Name: </ td >
< td >< asp:TextBox runat ="server" ID ="tbName"
BorderStyle ="solid" BorderWidth ="1px" BorderColor ="#a9a9a9" /></ td >
</ tr >
< tr >
< td > E-mail: </ td >
< td >< asp:TextBox runat ="server" ID ="tbEmail"
BorderStyle ="solid" BorderWidth ="1px" BorderColor ="#a9a9a9" /></ td >
</ tr >
< tr >
< td > Phone Number: </ td >
< td >< asp:TextBox runat ="server" ID ="tbPhoneNumber"
BorderStyle ="solid" BorderWidth ="1px" BorderColor ="#a9a9a9" /></ td >
</ tr >
</ table >
< asp:RequiredFieldValidator ID ="NReq" runat ="server"
ControlToValidate ="tbName"
Display ="None"
ErrorMessage ="<b>Required Field Missing</b><br />A name is rquired." />
< ajaxToolkit:ValidatorCalloutExtender ID ="NReqE" runat ="server"
TargetControlID ="NReq"
HighlightCssClass ="highlight"
Width ="240px" />
< asp:RequiredFieldValidator runat ="server" ID ="PNReq"
ControlToValidate ="tbPhoneNumber"
Display ="None"
ErrorMessage ="<b>Required Field Missing</b><br />A phone number 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("No phone number available in profile.");'>Extract from Profile</a></div>" />
< ajaxToolkit:ValidatorCalloutExtender runat ="server" ID ="PNReqE"
TargetControlID ="PNReq"
HighlightCssClass ="highlight"
Width ="350px" />
< asp:RegularExpressionValidator runat ="server" ID ="PNRegEx"
ControlToValidate ="tbPhoneNumber"
Display ="None"
ValidationExpression ="(((d{3}) ?)|(d{3}-))?d{3}-d{4}"
ErrorMessage ="<b>Invalid Field</b><br />Please enter a phone number in the format:<br />(###) ###-####" />
< ajaxToolkit:ValidatorCalloutExtender runat ="server" ID ="PNReqEx"
TargetControlID ="PNRegEx"
HighlightCssClass ="highlight"
Width ="350px" />
< asp:RequiredFieldValidator runat ="server" ID ="EMReq"
ControlToValidate ="tbEmail"
Display ="None"
ErrorMessage ="<b>Required Field Missing</b><br />A E-mail is required." />
< ajaxToolkit:ValidatorCalloutExtender ID ="EMReqE" runat ="server"
TargetControlID ="EMReq"
HighlightCssClass ="highlight"
Width ="240px" />
< asp:RegularExpressionValidator runat ="server" ID ="EMRegEx"
ControlToValidate ="tbEmail"
Display ="None"
ValidationExpression ="w+([-+.']w+)*@w+([-.]w+)*.w+([-.]w+)*"
ErrorMessage ="<b>Invalid Field</b><br />Please enter a E-mail.<br />e.g.kalen@126.com" />
< ajaxToolkit:ValidatorCalloutExtender runat ="server" ID ="EMRegExe"
TargetControlID ="EMRegEx"
HighlightCssClass ="highlight"
Width ="240px" />
<!--
TargetControlID:该扩展器目标Validator控件的ID,即将要被扩展的Validator控件的ID
HighlightCssClass:显示错误提示时,被验证控件将应用的样式
Width:弹出的显示错误的面板的宽度
WarningIconImageUrl:自定义警告图标的URL
CloseImageUrl:自定义关闭图标的URL
-->
< br />
< asp:Button ID ="btnOK" runat ="server" Text ="Submit" OnClick ="btnOK_Click" />< br />< br />
< asp:UpdatePanel ID ="up" runat ="server" >
< ContentTemplate >
< asp:Label ID ="lbResult" runat ="server" />
</ ContentTemplate >
< Triggers >
< asp:AsyncPostBackTrigger ControlID ="btnOK" EventName ="Click" />
</ Triggers >
</ asp:UpdatePanel >
</ form >
</ body >
</ html >
ValidatorCalloutDemo.aspx.cs代码示例:
using
System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Chapter08_ValidatorCalloutDemo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnOK_Click(object sender, EventArgs e)
{
lbResult.Text = string.Format("Name: {0} <br /> Email: {1} <br /> Phone Number: {2}",
tbName.Text, tbEmail.Text, tbPhoneNumber.Text);
}
}
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Chapter08_ValidatorCalloutDemo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnOK_Click(object sender, EventArgs e)
{
lbResult.Text = string.Format("Name: {0} <br /> Email: {1} <br /> Phone Number: {2}",
tbName.Text, tbEmail.Text, tbPhoneNumber.Text);
}
}