创建ASP.NET AJAX客户端组件实现验证控件的toolTip式错误提示

ASP.NET AJAX的客户端脚本库为我们提供的用于自定义组件的类Sys.Component，通过继承这个类的方式可以在客户端定义类似于服务器组件的客户端组件。在这里，创建一个自定义的组件，更改验证控件的错误提示方式，该提示方式有点类似于tooltip，错误提示之后能够在指定时间自动消失。既然是客户端的组件，那能跟验证控件联系的上的当然是Page_Validators()数组，这里面也调用了验证控件的一些客户端脚本方法，关于验证控件里的客户端方法可参考msdn。而创建客户端类和组件在asp.net ajax的帮助文档里都有详细介绍。还是看看具体实现吧。

以下是类的定义，当然这个文件是单独保存在一个js文件中

组件类
 1Type.registerNamespace("Shenba");
 2
 3Shenba.ToolTipValidator = function ()
 4{
 5    // 调用几类Sys.Component的构造方法
 6    Shenba.ToolTipValidator.initializeBase(this);
 7}
 8
 9Shenba.ToolTipValidator.prototype = {
10    // validator 对应的验证控件
11    get_validator : function ()
12    {
13        return this._validator;
14    },
15    set_validator : function (value)
16    {
17        this._validator = value;
18    },
19    // 重写几类的方法，在创建时该方法被调用
20    initialize : function ()
21    {
22        var divToolTip = this._createToolTip(); 
23        this._divToolTip = divToolTip; 
24        document.body.appendChild(divToolTip); 
25        
26        if (typeof(this._validator.evaluationfunction) == "String")
27        {
28            this._validator.evaluationfunction = eval(this._validator.evaluationfunction);
29        }  
30        
31        // 改写原验证控件的验证方法  
32        var evaluationfunction = this._validator.evaluationfunction;
33        this._validator.evaluationfunction = function(val)
34        {
35             if (!evaluationfunction(val))
36             {
37                divToolTip.style.display = "";
38                window.setTimeout(function(){divToolTip.style.display = "none"}, 3000);
39                return false; 
40             }  
41             else
42             { 
43                divToolTip.style.display = "none"; 
44                return true; 
45             }   
46        }   
47    },
48    // 创建一个div，用于显示错误信息
49    _createToolTip : function ()
50    {
51        var divToolTip = document.createElement("div");
52        divToolTip.id = this.id + "_divToolTip"; 
53        divToolTip.style.display = "none"; 
54        divToolTip.style.border = "solid 1px black"; 
55        divToolTip.innerHTML = this._validator.errormessage; 
56        divToolTip.style.backgroundColor = "lightYellow";
57        
58        // 设这div的位置 为被验证控件的右边  
59        var location = Sys.UI.DomElement.getLocation($get(this._validator.controltovalidate));
60        location.x += $get(this._validator.controltovalidate).offsetWidth + 2;
61        Sys.UI.DomElement.setLocation(divToolTip, location.x, location.y);
62        return divToolTip; 
63    },
64    dispose : function ()
65    {
66        this._validator = null;
67    }
68}
69
70// 注册这个类
71Shenba.ToolTipValidator.registerClass("Shenba.ToolTipValidator", Sys.Component);
72
73if (typeof("Sys") !== "undefined") Sys.Application.notifyScriptLoaded();

页面的代码，主要是根据页面里的验证控件创建组件

创建组件
 1<script language="javascript" type="text/javascript">
 2        function pageLoad()
 3        {
 4              for (var i = 0; i < Page_Validators.length; i++)
 5              {
 6                $create
 7                (
 8                Shenba.ToolTipValidator,
 9                {id : "validator" + i, validator : Page_Validators[i]},
10                 null,
11                 null,
12                 null
13                 );
14              }
15        } 
16    </script>

少不了的scriptmanager,需引用保存类的js文件

scriptManager
1 <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
2        <Scripts>
3            <asp:ScriptReference Path="ToolTipValidator.js"/>
4        </Scripts>
5    </asp:ScriptManager>

这里仅仅是客户端的组件，完全可以升级成服务器的组件，这样重用度会高一些，另外在显示tooltip方面还可以继续扩展，欢迎各位执教。