探讨微软ASP.NET AJAX控件开发技术(客户端)-技术开发专区

探讨微软ASP.NET AJAX控件开发技术(客户端)

作者：IT168 朱先忠编辑：晓熊 2007-09-11 00:00 来源：IT168�

三、实例分析
在本示例中，我们将创建一个增强的客户端ImageButton控件。这个控件在鼠标移过时将显示一幅不同的图像。
（一）创建示例AJAX网站
启动Visual Studio 2005，选择“文件→新建网站…”，然后选择“ASP.NET AJAX-Enabled Web Site”模板，命名工程为“AjaxClientCtrlTest”，并选择C#作为内置支持语言，最后点击OK。
注意，此后系统将自动加入对于程序集System.Web.Extensions.dll的引用（因其被自动加入到GAC中，所以默认情况下无法直接看到）。当然，你还会注意到，作为ASP.NET AJAX控制中心的服务器控件ScriptManager被自动地添加到默认网页Default.aspx中。然后，把一个HTML <image>元素拖动到此页面中，并稍加修改，得到如下图４所示布局。

图４.示例网站屏幕快照。

（二）使用面向对象JavaScript设计控件类
以鼠标右击工程添加一个JavaScript脚本文件ImageButton.js，内容如下列表２所示。
列表２—脚本控件MyCliImageButton完整源码。

Type.registerNamespace('AjaxImageButtonNamespace');
AjaxImageButtonNamespace.MyCliImageButton = function(element)
{
this._hoverImageUrl = '';
this._originalImageUrl = '';
this._mouseOverHandler = null;
this._mouseOutHandler = null;
this._clickHandler = null;
AjaxImageButtonNamespace.MyCliImageButton.initializeBase(this, [element]);
}
AjaxImageButtonNamespace.MyCliImageButton.prototype =
{
get_hoverImageUrl : function(){
return this._hoverImageUrl;
},
set_hoverImageUrl : function(value) {
var e = Function._validateParams(arguments, [{name: 'value', type: String}]);
if (e) throw e;
if (this._hoverImageUrl != value)
{
this._hoverImageUrl = value;
this.raisePropertyChanged('hoverImageUrl');
}
},
initialize : function(){
AjaxImageButtonNamespace.MyCliImageButton.callBaseMethod(this, 'initialize');
var target = this.get_element();
this._originalImageUrl = target.src;
this._mouseOverHandler = Function.createDelegate(this, this._onMouseOver);
this._mouseOutHandler = Function.createDelegate(this, this._onMouseOut);
this._clickHandler = Function.createDelegate(this, this._onClick)
$addHandlers(target, {'mouseover':this._mouseOverHandler, 'mouseout':this._mouseOutHandler, 'click': this._clickHandler}, this);
},
dispose : function(){
$clearHandlers(this.get_element());
delete this._mouseOverHandler;
delete this._mouseOutHandler;
delete this._clickHandler;
AjaxImageButtonNamespace.MyCliImageButton.callBaseMethod(this, 'dispose');
},
add_click : function(handler) {
this.get_events().addHandler('click', handler);
},
remove_click : function(handler) {
this.get_events().removeHandler('click', handler);
},
_onMouseOver : function(e) {
e.target.src = this._hoverImageUrl;
},
_onMouseOut : function(e) {
e.target.src = this._originalImageUrl;
},
_onClick : function(e) {
e.preventDefault();
var handler = this.get_events().getHandler('click');
if (handler != null) {
handler(this, Sys.EventArgs.Empty);
}
}
}
AjaxImageButtonNamespace.MyCliImageButton.registerClass('AjaxImageButtonNamespace.MyCliImageButton', Sys.UI.Control);
if (typeof(Sys) != 'undefined')
Sys.Application.notifyScriptLoaded();
}

如你所见，我们重载了initialize方法来“钩住”对应DOM元素的mouseover，mouseout和click事件，以便我们可以在这些事件中设置合适的图像并激发click事件。我们还重载了dispose方法以分离我们在initialize方法中设置的事件处理器。后面，我们还要细致讨论。

（三）使用控件
有了上面的控件类，至于使用就很简单了。请切换到页面default.aspx的源码视图，然后在<head>区创建如下列表３所示内容。
列表３

<script type="text/javascript">
function pageLoad(){
$create(AjaxImageButtonNamespace.MyCliImageButton, {'hoverImageUrl':'Images/updateh.gif'}, {'click':buttonClicked}, null, $get('cliBtn'));
}
function buttonClicked(sender, e) {
alert('I am clicked');
return false;
}
</script>

    在此，我们使用ASP.NET AJAX客户端全局方法$create创建控件AjaxImageButtonNamespace.MyCliImageButton的一个实例，指定其属性hoverImageUrl取值、click事件的处理器函数，并把它与当前页面中的HTML <IMAGE>元素关联起来。当然，为了使得框架在运行时能够找到我们刚才建立的脚本文件，还要对ScriptManager的属性稍微设置一下，如下列表４所示。
列表４—在ScriptManager控件内配置脚本文件。
<asp:ScriptManager ID="ScriptManager1" runat="server" >
<Scripts>
<asp:ScriptReference Path="ImageButton.js" />
</Scripts>
</asp:ScriptManager>
现在，请按F5键运行此页面观察结果即可。下图５相应于当鼠标移动到图像按钮上时发生的变化（你还可以点击之自行观察效果）。

        图５.当鼠标移动到图像按钮上时图像切换成另一幅。
下面，我们针对使用ASP.NET AJAX框架提供的面向对象JavaScript进行客户端控件编程时有关概念作全面分析。

关注我们