ASP. NET 3.5 core programming learning notes (55): create custom extension controls

ASP. NET does not include the specific implementation of the extension. However, it defines the base class extendercontrol for all custom extensions and all extensions in Act. You can use this class to create your own extensions. But it is not recommended to do this because it is easier to use the extensions in the ACT library.

The following code provides the source code of the Focus extension control. This simple extension can add highlight behavior to the target control to change its appearance when the control gets focus:

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); }
    }
}

The targetcontroltype attribute is used to indicate the type of the control for this behavior. The clientscriptresource feature indicates the script class of the injection client page and the name of the relevant source file. The base class extendercontrolbase is defined in the Act library.

What we can do in managed code is to define a set of custom attributes. Each property must have the extendercontrolproperty feature. The property itself is not directly responsible for storing values, but is only obtained or set through the getpropertyvalue and setpropertyvalue methods of the base class. These storage methods are responsible for specific storage work.

The javascript code is the core of the Ajax extension control. The javascript code required by the focus extension is as follows:

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);

On the test page, we only need to register the act assembly and the Assembly containing this focus extension, and then add the following code:

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

Note: To ensure that the CSS style prevails over the style set by the topic, close the topic.