ASP.NET 3.5核心编程学习笔记（55）：自定义扩展程序控件的创建

　　ASP.NET并没有包含对扩展程序的具体实现。然而，它定义了供所有自定义扩展程序和ACT中所有扩展程序使用的基类ExtenderControl。我们可通过该类创建自己的扩展程序。但并不建议这样做，因为利用ACT库中的扩展程序更简便易行。

　　下面的代码给出了“焦点扩展程序”控件的源代码，这个简单的扩展程序能为目标控件添加高亮行为，以便在该控件获得焦点时更改其外观：

using AjaxControlToolkit;
...

namespace Core35
{
    [TargetControlType(typeof(Control)]
    [ClientScriptResource("Core35.FocusBehavior", "focusBehavior.js")]
    public string HighlightCssClass
    {
        get { return GetPropertyValue("HighlightCssClass", ""); }
        set { SetPropertyValue("HighlightCssClass", value); }
    }

    [ExtenderControlProperty]
    public string NoHighlightCssClass
    {
        get { return GetPropertyValue("NoHighlightCssClass", ""); }
        set { SetPropertyValue("NoHighlightCssClass", value); }
    }
}

　　TargetControlType特性用于指示该行为针对的控件类型。ClientScriptResource特性指示注入客户端页面的脚本类及相关源文件的名称。基类ExtenderControlBase定义在ACT库中。

　　我们在托管代码中所能做的是，定义自定义的属性集合。每个属性必须带有ExtenderControlProperty特性。属性本身并不直接负责值的存储，而仅限于通过基类GetPropertyValue和SetPropertyValue方法进行获得或设置。这些存储方法负责具体的存储工作。

　　AJAX扩展程序控件的核心部分是其JavaScript代码。焦点扩展程序所需的JavaScript代码如下：

Type.registerNamespace('Core35');

Core35.FocusBehavior = function(element)
{
    Core35.FocusBehavior.initializeBase(this, [element]);

    this._highlightCssClass = null;
    this._nohighlightCssClass = null;
}

Core35.FocusBehavior.prototype = 
{
    initialize : function()
    {
        Core35.FocusBehavior.callBaseMethod(this, 'initialize');
        this._onfocusHandler = Function.createDelegate(this, this._onFocus);
        this._onblurHandler = Function.createDelegate(this, this._onBlur);
        $addHandlers(this.get_element(),
                        { 'focus' : this._onFocus,
                           'blur' : this._onBlur },
                           this);
        this.get_element().className = this._nohighlightCssClass;
    },
    dispose : function()
    {
        $clearHandlers(this.get_element());
        Core35.FocusBehavior.callBaseMethod(this, 'dispose');
    },
    _onFocus : function(e)
    {
        if(this.get_element() && !this.get_element().disabled)
        {
            this.get_element().className = this._highlightCssClass;
        }
    },
    _onBlur : function(e)
    {
        if(this.get_element() && !this.get_element().disabled)
        {
            tis.get_element().className = this._nohighlightCssClass;
        }
    },
    get_highlightCssClass : function()
    {
        return this._highlightCssClass;
    },
    set_highlightCssClass : function(value)
    {
        if(this._highlightCssClass != value)
        {
            this._highlightCssClass = value;
            this.raisePropertyChanged('highlightCssClass');
        }
    },
    get_nohighlightCssClass : function()
    {
        return this._nohighlightCssClass;
    },
    set_nohighlightCssClass : function(value)
    {
        if(this._nohighlightCssClass != value)
        {
            this._nohighlightCssClass = value;
            this.raisePropertyChanged('nohighlightCssClass');
        }
    }
}
//Optinal descriptor for JSON serialization
Core35.FocusBehavior.descriptor = {
    properties : [ {name: 'highlightCssClass', type : String},
                       {name: 'nohighlightCssClass', type : String}]
}

//Register the class as a type tha inherits from Sys.UI.Control
Core35.FocusBehavior.registerClass('Core35.FocusBehavior', Sys.UI.Behavior);

　　在测试页面中，我们只需注册ACT程序集和包含这个焦点扩展程序的程序集，然后添加以下代码：

<asp:TextBox ID="TextBox1" runat="server" EnableTheming="false" />
<asp:FocusExtender ID="FocusExtender1" runat="server"
    TargetControlID="TextBox1"
    NoHighlightCssClass="LowLightTextBox"
    HighlightCssClass="HighLight" />

　　注意，为确保通过扩展程序应用以CSS样式优先于主题设置的样式，请将主题关闭。