写在前面的话:

本人在前一段的ASP.NET AJAX的学习中,本想使用一个<ajaxToolkit:ValidatorCalloutExtender >,但是折腾了几天,发现不能够使用,当然原因很多.

我最需要的一个功能是使用异步WEBSERVICE来检验一个输入的内容在数据库中,是否已经存在.就是这么一个功能使我使用<ajaxToolkit:ValidatorCalloutExtender >的努力宣告失败.

因为ASP.NET的服务器端验证控件,无法在WEBSERVICE回调函数中完成置标工作,也就是设置控件校验属性为false,所以也就完成不了相应的其他的提示工作了.

唉,没办法,放弃使用吧,可是心有不甘.怎么办呢,自己写一个,当然是参考<ajaxToolkit:ValidatorCalloutExtender>(其时是照抄).到处找资料,网上还没有这方面的现成的资料.

只能从头开始看Ajax Control ToolKit的Sample,其中有一段正和我用.考虑到网上这方面的资料比较少,共享出来,也让大家有个拍砖头的地方.

本人的英文水平可以用一个字和几个字来形容,一个字是"烂",几个字是"非常非常烂烂哪".整篇文章都是用金山快译的全文翻译和金山词霸一点一点看明白的.唉,英文不好就是吃亏呀.

所以下面的东西只能博行家一笑,请各位前辈和达人指教,及斧正.更加欢迎各位ASP.NET AJAX的同学们来拍砖,拍的砖头越多越好,不要怕我疼!!!(嘻嘻,咬着后槽牙说得.^_^)

废话不说了,下面是正文:

创建一个新的extender

下述的步骤将帮助你们从头创建一个新的ASP.NET AJAX Extender.当你完成这些工作时,你将会写一个新的并且能够自己定制的Extender.而且它能够在你其他的ASP.NET网页中工作.

首先必须要有的环境

vs.net2005,ASP.NET AJAX, ASP.net Ajax Ctp, AjaxControl ToolKit,有关相关软件的下载,安装和其他事项,请您参阅其他的文章.在此就不一一的提供了.

创建基础的框架

使用Visual Studio 2005, 打开"文件"菜单从ASP.NET AJAX web站点模版中创建一个新的web站点.

点击"新建", "网站...",并在"模版"中选择"ASP.NET AJAX Enabled Web Site"。如果您准备使用除了Timer，ScriptManager，ScriptManagerProxy，UpdataPanel以外的更多的ASP.NET AJAX功能，请选择“ASP.NET AJAX CTP－Enabled Web Site”.如果您想使用AjaxControlToolkit当中的功能, 请选择AJAX Control Toolkit Web Site。

打开"文件"菜单,从菜单当中点击"添加",和"新建项目...",您可以选择使用C#语言或VB语言以及从"模版"项中选择"ASP.NET AJAX Control Project"项目. 新项目的名称是DisableButton.

Visual Studio 2005将创建你的项目模版.并且自动创建4个文件：

DisableButtonBehavior.js - 你将会在这个文件里加入你全部的客户端javascript脚本.

DisableButtonExtender.cs - 这是服务器端控制类它将管理你创建的Extender和允许你在设计时设置属性. 它也使你能在你的Extender中设置和定义属性. 这些属性可以被别的代码以及在设计时以及DisableButtonBehavior.js文件中定义的相匹配的属性所访问到的.

DisableButtonDesigner.cs - 这个类实现设计功能.你不应该修改它.

首先我们先需要测试一下这个框架能否正常工作,并且确定客户端行为是适当的被设置成我们需要的模式:

通过双击DisableButtonBehavior.js来打开它,在//TODO下面加入测试代码:

alert("Hello World!");

输入的测试代码应该在下面一行代码的上面：

this._myPropertyValue = null;

现在我们通过在解决方案资源管理器中双击Default.aspx来打开它.首先点击设计页来切换到设计视图,从工具箱中拖拽加入一个TextBox(TextBox1),再从工具箱中拖拽加入一个Button(Button1),然后点击菜单中的"生成"和选择"生成解决方案".

等到生成完毕之后在工具箱的顶部,你将会找到一个标签"DisableButton Components".内部是一个叫"DisableButtonExtender"的项目,拖拽这个到你的Aspx页面上. 如果你在工具箱中没有找到这个工具箱项目,你可以通过以下的步骤手工添加这个项目:

切换到源代码视图,用鼠标右键击击web站点,来加入对程序集合的引用,选择"添加引用...", "项目", 和"DisableButton"

在页面顶部加入下列代码来在你的页面当中注册引用:

<%@ Register Assembly="DisableButton" Namespace="DisableButton" TagPrefix="cc1"%>

Note(注释): 如果你使用Visual Basic,命名空间将是"DisableButton.DisableButton"

在你的Aspx页面中手工加入这个控件:

<cc1:DisableButtonExtender ID="DisableButtonExtender1" runat="server"/>

你现在可以切换回设计视图,点击选中DisableButtonExtender,在属性面板中扩展TargetControlID属性,选择"TextBox1",按下F5键运行这个Aspx页面(如果VS.net2005弹出对话框提示"未启用调试"则允许调试),我们应该检验页面加载时是否停下来显示"Hello World!"对话框.

检验成功后,关闭浏览器窗口.我们进行下一步的工作.

添加新的功能(我们自己的功能)

删除我们先前添加到DisableButtonBehavior.js文件中的测试代码:

alert("Hello World!");

在DisableButtonExtender.cs文件中限制TargetControlType的类型只能是TextBox文本框：

[TargetControlType(typeof(TextBox))]

在下面的步骤中我们来创建一个更好的属性名称（重要的步骤）：

在DisableButtonExtender.cs文件中将"MyProperty"修改为"TargetButtonID"，共有3处。

在DisableButtonBehavior.js文件中将"MyProperty"/"myProperty"修改为"TargetButtonID"，共有5处。

按照我们修正的TargetButtonID属性的例子,我们现在来增加新的DisabledText属性（重要的步骤）

在DisableButtonExtender.cs文件中加入一个新的public string属性：

[ExtenderControlProperty]

public string DisabledText

{

get

{

return GetPropertyStringValue("DisabledText");

}

set

{

SetPropertyStringValue("DisabledText", value);

}

}

在DisableButtonBehavior.js文件中已有的成员变量下面,为客户端的行为加入一个新的成员变量：

this._DisabledTextValue = null;

在DisableButtonBehavior.js文件中"//TODO"的下面,现有的get/set方法上面,添加TargetButtonID属性的get/set方法:

get_DisabledText : function()

{

return this._DisabledTextValue;

},

set_DisabledText : function(value)

{

this._DisabledTextValue = value;

},

因为TargetButtonID最终总是要提交给一个控件来进行控制,所以我们在DisableButtonExtender.cs文件中把下面的属性添加到TargetButtonID的特性中.这样.NET framework将会在运行时自动提供控件的ID.

[IDReferenceProperty(typeof(Button))]

在DisableButtonBehavior.js文件中已经存在的范型定义中,使用下列的代码为客户端的行为加入keyup处理函数:

_onkeyup : function()

{
        var e = $get(this._TargetButtonIDValue);

if (e)

{

var disabled = ("" == this.get_element().value);

e.disabled = disabled;

if (this._DisabledTextValue)

{

if (disabled)

{

this._oldValue = e.value;

e.value = this._DisabledTextValue;

}

else

{

if (this._oldValue)

{

e.value = this._oldValue;

}

}

}
     }
},

使用下列的代码将keyup处理函数添加到initialize函数中:

$addHandler(this.get_element(), 'keyup',Function.createDelegate(this, this._onkeyup));
this._onkeyup();

在解决方案资源管理器中使用双击来切换回Default.aspx,通过点击源代码页来切换到源代码视图,通过从DisableButtonExtender.cs文件中删除下述的代码来删除旧的属性：

MyProperty="property"

重新编译我们的解决方案,通过点击设计页来切换到设计视图,通过点击TextBox来修改extender的特性，去到属性面板，扩张DisableButtonExtender项目，将TargetButtonID属性指定为"Button1"以及将DisabledText的值输入:"Enter text".

现在我们可以通过按下F5键来运行这个Aspx页面，在文本框中输入文本，并且注意观察按钮控件的行为－您应该注意它一开始时是被禁用的,并且当文本框的输入内容为空时显示“Enter text”.一旦您在文本框之中输入了文本内容,按钮控件将可以使用,并且按钮将显示为"Button".

祝贺您，您已经完成了您的第一个ASP.NET AJAX extender了!!!

写在最后的废话:

我准备在这个框架的基础上,完成客户端控件校验的功能,具体的还没想好,各位谁有更好的想法,请您千万要不吝赐教.

ps:

我这篇随笔使用Windows Live Write写的,有人知道更好用的客户端软件吗,能麻烦您告诉我吗?谢谢诶!!!