自定义验证一种用法:CustomValidator+ICallbackEventHandler

简介:

ASP.NET中的CustomValidator可以提供我们发挥无穷的想象力,不过有时候还是有点麻烦,在客户端写复杂的脚本嘛,实在是太麻烦。在服务端写验证嘛,又感觉要做一次提交,总是好像不纯粹。

当然,我们可以用updatepanel来模拟类似ajax的效果,我今天实在是吃饱了没事干了,提供另一种方案来实现无刷新提交+客户端验证+服务端逻辑验证。方法就是:回调

所要实现的业务逻辑依然非常简单,检查用户名是否存在。

 

aspx的html body的部分很简单,全部是web服务器控件

<body>
<form id="form1" runat="server">
<div>
<span style="">用户名字</span>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="*" ClientValidationFunction="CheckEven"
ControlToValidate="TextBox1" Display="Dynamic"></asp:CustomValidator><br />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</form>
</body>

一个TextBox ,一个对其验证的CustomValidator ,一个测试提交过程的Button 。CustomValidator 有一个客户端验证函数CheckEven。

所以我们看下,改aspx页面的script的定义

<script type="text/javascript" language="javascript">

var isValid = false;

//服务端处理后的回调
function Validata(args, context) {
isValid = args == "true";
}

//CustomValidator需要验证时触发
function CheckEven(source, args) {
//agrs.Value就是对应输入控件包含的值
CallServer(args.Value, null);
//CallServer将需要验证的数据提交到服务器端,然后回调Validata函数
args.IsValid = isValid;
}
</script>

CheckEven函数式当需要客户端验证的时候由CustomValidator 组件激发,需要验证的值将以args.Value的形式传递,验证的结果可以赋值给args.IsValid 。

当我们获取到需要验证的值时,我们用CallServer(args.Value, null)函数提交给aspx.cs中的代码,服务器逻辑验证执行后,将结果传递给客户端的Validata(args, context)函数,其中args就是我们的验证结果。

回调的执行次序有点古怪,你想通了客户端的执行过程后,再往下看。

以下是aspx.cs文件的代码

public partial class WebForm2 : System.Web.UI.Page, ICallbackEventHandler
{
protected void Page_Load(object sender, EventArgs e)
{
string cer = this.ClientScript.GetCallbackEventReference(this, "args", "Validata", "", false);
//我一般是写在配置文件中
string callServerFormat = "function CallServer(args, context) {{ {0} }}";
string callbackScript = string.Format(callServerFormat, cer);
this.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true);
}

#region ICallbackEventHandler 成员

public string GetCallbackResult()
{
return HasName ? "false" : "true";

}

public void RaiseCallbackEvent(string eventArgument)
{
HasName = eventArgument.IndexOf("admin") > -1;
}

private bool HasName
{
set;
get;
}

#endregion

protected void Button1_Click(object sender, EventArgs e)
{
}
}

首先你要关注的是,改page类需要实现ICallbackEventHandler接口。
该接口的两个实现方法,如果我们不必太在意一些规范的术语的话,那么大致就是

RaiseCallbackEvent(string eventArgument)从客户端的CallServer函数中得到需要验证的值eventArgument

string GetCallbackResult()将验证的结果以string的方式返回给客户端的Validata函数中的args

 

现在我们来关注下最后的关键点,客户端和服务端的桥梁CallServer,CallServer其实就是一个传递参数的函数,在函数我们再load的时候进行注册

string cer = this.ClientScript.GetCallbackEventReference(this, "args", "Validata", "", false);
//我一般是写在配置文件中
string callServerFormat = "function CallServer(args, context) {{ {0} }}";
string callbackScript = string.Format(callServerFormat, cer);
this.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true);

这段代码的直接结果就是当页面生成的时候,在页面中生成以下脚本

function CallServer(args, context) { WebForm_DoCallback('__Page',args,Validata,"",null,false) }

好了,如果你现在吧代码都抄完了,那可以执行下页面看看,是否客户端已经可以完全在没有提交感觉的时候进行了验证!

 

我的开发环境:VS2008 SP1+XP+IE8



本文转自shyleoking 51CTO博客,原文链接:http://blog.51cto.com/shyleoking/803151

相关文章
|
17天前
|
JavaScript 前端开发 算法
< 封装公共导出模块:配合element实现提示 >
在 Vue + elementUi 开发中,我们偶尔会遇到需要导出的列表,或者指定位置的导出内容。在一个项目里面是十分常见的,但是由于导出代码有稍微有点长,不方便维护!基于项目开发需求,封装了一个公用的导出模块,模块入口提供了 四个参数,分别是:导出接口地址导出参数对象导出文件名称导出时选择的服务地址(需要配合config文件实现选择功能)。且基于信息安全问题,实现信息提示,当提示点击遵守规则才允许下载文件!
< 封装公共导出模块:配合element实现提示 >
|
7月前
|
数据安全/隐私保护
fastadmin中写接口是时Validate规则验证自定义如何用
fastadmin中写接口是时Validate规则验证自定义如何用
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery最方便的前端验证方式2种(非空验证与比较验证)
jQuery最方便的前端验证方式2种(非空验证与比较验证)
46 0
|
4月前
|
数据格式 Python
添加 自定义校验方法,让用户自定义校验规则
添加 自定义校验方法,让用户自定义校验规则
40 0
|
Java Apache Maven
获取自定义配置的值|学习笔记
快速学习获取自定义配置的值
52 0
|
前端开发 测试技术
【测试平台开发】23. 接口断言功能-保存接口断言和编辑回显
【测试平台开发】23. 接口断言功能-保存接口断言和编辑回显
【测试平台开发】23. 接口断言功能-保存接口断言和编辑回显
|
数据安全/隐私保护
注册与登录中相关字段格式的正则表达式验证
注册与登录中相关字段格式的正则表达式验证
89 0
【esayui】扩展验证方法,控件验证
基础验证 //页面调用方法$.extend($.fn.validatebox.defaults.rules, { 验证电话 IsPhoneRex: {validator: function (value) {var rex = /^1[3-8]+\d{9}$/;var rex2 = /^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/;if (rex.
998 0