写在前面的话:
本人在前一段的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写的,有人知道更好用的客户端软件吗,能麻烦您告诉我吗?谢谢诶!!!