文/zhongjiechao 出处/博客园
前言:
熟悉ASP.NET Ajax的人都对AjaxControlToolkit里的Extender控件留有非常深的印象。
有了Extender控件就可以在原有页面上指定某个服务器控件实施Ajax行为(Behavior)。
如：常用的CalendarExtender控件。下面内容介绍怎样自定义一个Ajax Extender控件
实现Panel服务器控件的高亮边框效果。如图所示。
附件:
您所在的用户组无法下载或查看附件正文： 创建一个Extender控件需要完成两个部分的工作。第一，创建客户端的行为(Behavior)控件；
第二，创建服务器端的控件。首先我们介绍一下客户端的行为控件。
第一，创建客户端的行为控件。顾名思义就是用于响应处理客户端(Client-Side)的行为，如：鼠标指针移动
到某个元素上(mouseover事件)或者指针移出某个元素(mouseover事件)。这些动作都交由
客户端的Javascript代码进行响应处理。我们需要的就是编写该Behaivor响应代码，添加事件处理
函数。这就是行为(Behavior)一词的来意。
创建一个Ajax客户端的控件的步骤如下：
1. 注册控件所属类型的名字空间。Type.registerNamespace("JackyZhong.Ajax.HyperLinkBorderBehavior");
2. 创建控件类型的构造函数，并且将作为控件的容器元素作为参数传入构造函数。 调用initializeBase函数初始化基础类，定义私有成员或数据。
JackyZhong.Ajax.HyperLinkBorderBehavior = function(element) {
// initialize base
JackyZhong.Ajax.HyperLinkBorderBehavior.initializeBase(this, [element]);
// private fields
this._borderColor = "#999999";
this._borderWeight = 1;
// event
this._overHandler = null;
this._outHandler = null;
}
3. 定义原型方法和属性。 // mouseover event handler
_onMouseOver: function() {
this.get_element().style.border = this.get_BorderWeight() + "px solid " + this.get_BorderColor();
},
// mouseout event handler
_onMouseOut: function() {
this.get_element().style.border = "";
},
// Get or Set the BorderColor property
get_BorderColor: function() {
return this._borderColor;
},
set_BorderColor: function(value) {
this._borderColor = value;
},
// Get or Set the BorderWeight property
get_BorderWeight: function() {
return this._borderWeight;
},
set_BorderWeight: function(value) {
this._borderWeight = value;
}
4. 重写(Override) initialize() 函数，该函数用于初始化构造函数中定义的私有成员或数据。 initialize: function () {
// get the parent element
var element = this.get_element();
// initialize event handler
this._overHandler = Function.createDelegate(this, this._onMouseOver);
$addHandler(element, "mouseover", this._overHandler);
this._outHandler = Function.createDelegate(this, this._onMouseOut);
$addHandler(element, "mouseout", this._outHandler);
}
5. 重写(Override) dispose() 函数，该函数用于释放资源。 dispose: function() {
// nothing to do
}
6. 使用Type.registerClass() 函数注册控件类型和继承关系。 JackyZhong.Ajax.HyperLinkBorderBehavior.registerClass("JackyZhong.Ajax.HyperLinkBorderBehavior", AjaxControlToolkit.BehaviorBase);
至此，客户端的Behavior控件已经完成，注意：在注册控件类型时，
我们使用AjaxControlToolkit.BahaviorBase类作为基类，因为我们定义的是Behaivor控件。
第二，创建服务器端的控件。创建Ajax服务器控件与创建ASP.NET服务器控件类似，也是需要继承于某个基础类。
如：ASP.NET服务器控件通常继承于WebControl, CompositeControl等，而我们实现的Extender服务器控件
则需要继承于ExtenderControlBase类，Extender服务器控件的实现与.NET配置节(ConfgurationSection)或者
配置元素(ConfigurationElement)很类似。
using System;
using System.ComponentModel;
using System.Collections;
using System.Collections.Generic;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using AjaxControlToolkit;
[assembly: WebResource("JackyZhong.Extenders.HyperLinkBorderBehavior.js",
"text/javascript")]
namespace JackyZhong.Net.Web.UI
{
[TargetControlType(typeof(Panel))]
[ClientScriptResource("JackyZhong.Ajax.HyperLinkBorderBehavior",
"JackyZhong.Extenders.HyperLinkBorderBehavior.js")]
public class HyperLinkBorderExtender : ExtenderControlBase
{
#region [ Constructor ]
public HyperLinkBorderExtender()
{
}
#endregion
[ExtenderControlProperty(true)]
[DefaultValue("#999999")]
public string BorderColor
{
get { return GetPropertyValue<string>("BorderColor", string.Empty); }
set { SetPropertyValue<string>("BorderColor", value); }
}
[ExtenderControlProperty(true)]
[DefaultValue(1)]
public int BorderWeight
{
get { return GetPropertyValue<int>("BorderWeight", 1); }
set { SetPropertyValue<int>("BorderWeight", value); }
}
}
}
发现类似点了吗？ 就是类的属性。.NET的配置属性使用 base[元素名称] 来获值，而继承于ExtenderControlBase
类的属性则使用 GetPropertyValue泛型来获值。
最后介绍怎样应用该Extender控件。 1. 在aspx页面上添加一个Panel控件，如:
<asp:Panel ID="test" runat="server">ZhongJieChao.cnblogs.com</asp:Panel>
2. 添加一个Extender控件，并使用TargetControlID属性指定一个Panel服务器控件，
为什么一定是Panel服务器控件？ 因为Extender控件上使用了以下特性(Attribute):
[TargetControlType(typeof(Panel))] 这样只有Panel控件才有效。
<Jacky:HyperLinkBorderExtender ID="HyperLinkBorderExtender1" runat="server"
BorderColor="#6699CC" BorderWeight="2" TargetC />
编译项目并执行该页面，将鼠标移动到Panel控件上就会发现Panel控件的边框随即高亮显示。
这例子只是为了演示Extender控件的现实原理，有了这些基础后，你可以做出比CalendarExtender更炫的控件。
下载演示代码
附件:
您所在的用户组无法下载或查看附件：
| 感谢原创者的辛勤劳动，希望对您有所帮助，转载请注明原出处。 |
