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

最新推荐文章于 2021-08-05 17:09:39 发布

weixin_30724853

最新推荐文章于 2021-08-05 17:09:39 发布

阅读量80

点赞数

原文链接：http://www.cnblogs.com/zhongjiechao/archive/2008/03/27/1124557.html

版权

前言:
    熟悉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控件才有效。