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样式优先于主题设置的样式，请将主题关闭。