(原创) 初试牛刀 - 自定义ASP.NET Ajax Extender控件

    
  前言:
   熟悉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" TargetControlID="test" />
  
  
   编译项目并执行该页面，将鼠标移动到Panel控件上就会发现Panel控件的边框随即高亮显示。
   这例子只是为了演示Extender控件的现实原理，有了这些基础后，你可以做出比CalendarExtender更炫的控件。
  
   下载演示代码：Download (Fixed)http://www.cnblogs.com/Files/zhongjiechao/jackzhong_fixed.rar