ASP.NET AJAX Advance Tips & Tricks (8) 扩展AJAX Control Toolkit中的控件

前言：

AJAX Control Toolkit 是Open Source的（将包含到最新的VS2010中，届时可能不再开源），我们可以容易地修改其源代码来扩展原有的控件，使之拥有新的功能，达到我们的预定需求。在本文中，我们以为TabPanel控件添加Disabled功能为例，向大家演示如何简单地扩展AJAX Control Toolkit中的控件。

需求：

TabContainer容器中的TabPanel类本身就包含了Enabled属性，也可以使用JavaScript方法set_enabled(X)来设置Enabled属性，如果某个TabPanel的这个属性为false的话，这个TabPanel就不会显示在TabContainer中，这与一般控件的“Enabled”属性不太一样，我认为叫它“Visiable”会更加恰当。如下图所示：

有时候这并不符合我们的需求，所以，在本例中，我们将为其添加Disabled功能，使TabPanel控件可以变成灰色，而不响应客户端事件。

 

1. 添加服务端属性：

首先我们找到TabPanel.cs也就是TabPanel类，在其中添加如下属性来代表TabPanel是“恢复启用”还是“变灰禁用”状态：

        [DefaultValue( "" )]
        [Category( " Behavior " )]
        [ExtenderControlProperty]
        [ClientPropertyName( " disabled " )]
         public   bool  Disabled 
        {
             get  {  return  ( bool )(ViewState[ " Disabled " ]  ??   false ); }
             set  { ViewState[ " Disabled " ]  =  value; }
        }

         internal   bool  Active
        {
             get  {  return  _active; }
             set  { _active  =  value; }
        }

 

在属性中，我们设置ClientPropertyName为“disabled”,也就是将这个属性映射到JavaScript Behavior代码中的_disabled属性，并以ViewState为状态保存容器。

 

2. 添加客户端属性

由于AJAX Control Toolkit中的控件行为大都是由JavaScript Behavior实现的，接下来，我们向Tab控件相应的JavaScript Behavior中添加客户端属性。

找到AjaxControlToolkit.TabPanel 的定义，添加上面提到的_disabled成员变量，如下：

AjaxControlToolkit.TabPanel  =   function (element) {
    AjaxControlToolkit.TabPanel.initializeBase( this , [element]);
     this ._active  =   false ;
     this ._tab  =   null ;
     this ._headerOuter  =   null ;
     this ._headerInner  =   null ;
     this ._header  =   null ;
     this ._owner  =   null ;
     this ._enabled  =   true ;
     this ._disabled  =   false ;  // test add
     this ._tabIndex  =   - 1 ;
     this ._dynamicContextKey  =   null ;
     this ._dynamicServicePath  =   null ;
     this ._dynamicServiceMethod  =   null ;
     this ._dynamicPopulateBehavior  =   null ;
     this ._scrollBars  =  AjaxControlToolkit.ScrollBars.None;
     this ._header_onclick$delegate  =  Function.createDelegate( this ,  this ._header_onclick);
     this ._header_onmouseover$delegate  =  Function.createDelegate( this ,  this ._header_onmouseover);
     this ._header_onmouseout$delegate  =  Function.createDelegate( this ,  this ._header_onmouseout);
     this ._header_onmousedown$delegate  =  Function.createDelegate( this ,  this ._header_onmousedown);
     this ._dynamicPopulate_onpopulated$delegate  =  Function.createDelegate( this ,  this ._dynamicPopulate_onpopulated);
     this ._oncancel$delegate  =  Function.createDelegate( this ,  this ._oncancel);
}

 

接下来，我们还需要在AjaxControlToolkit.TabPanel.prototype 中添加_disabled属性的访问器：

 

    get_disabled:  function () {
         return   this ._disabled;
    },

    set_disabled:  function (value) {
         if  (value  !=   this ._disabled) {
             this ._disabled  =  value;

             if  ( this .get_isInitialized()) {
                 if  ( ! this ._disabled) {
                     this                 }  else  {
                     this                 }
            }
             this .raisePropertyChanged( " disabled " );
        }
    },

 

有了get和set访问器，我们就可以在客户端使用

$find( ' <%=Tabs.ClientID%> ' ).get_tabs()[ 2 ].set_disabled( true );

 

来设置该属性

 

3. 添加客户端行为

有了属性，我们接下来定义属性所代表的行为，在这里，我们使用_regular()和_grayout()两个方法来进行TabPanel的“恢复启用”和“变灰禁用”的状态设置：

    _regular:  function () {
         this ._tab.disabled  =   false ;
    },

    _grayout:  function () {
         this ._tab.disabled  =   true ;
         this .get_headerTab().disabled  =   true ;
         if  ( this ._get_active()) {

             var  next  =   this ._owner.getNearestTab( false );
             if  ( !! next) {
                 this ._owner.set_activeTab(next);
            }
        }
         this ._deactivate();
    }

 

这两个方法由上面代码中高亮的部分调用。

4. 编译测试

修改工作完成后，我们重新编译AjaxControlToolkit.dll，并覆盖项目中原有的引用，即可在网站中使用扩展后的控件：

 

<% @ Page Language = " C# "   %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< script  runat ="server" >


    protected  void  Button1_Click(object sender, EventArgs e)
    {
         this .TabPanel2.Disabled  =   true ;
    }
    
</ script >

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  id ="Head1"  runat ="server" >
     < title ></ title >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < div >
         < ajaxToolkit:ToolkitScriptManager  ID ="ToolkitScriptManager1"  runat ="server" >
         </ ajaxToolkit:ToolkitScriptManager >
         < ajaxToolkit:TabContainer  ID ="Tabs"  runat ="server"  Width ="100%"  ActiveTabIndex ="0" >
             < ajaxToolkit:TabPanel  runat ="server"  ID ="TabPanel1"  HeaderText ="11111" >
                 < ContentTemplate >
                    grid view
                 </ ContentTemplate >
             </ ajaxToolkit:TabPanel >
             < ajaxToolkit:TabPanel  runat ="server"  ID ="TabPanel2"  HeaderText ="22222" >
                 < ContentTemplate >
                    
                 </ ContentTemplate >
             </ ajaxToolkit:TabPanel >
             < ajaxToolkit:TabPanel  runat ="server"  ID ="TabPanel3"  HeaderText ="33333" >
                 < ContentTemplate >
                    
                 </ ContentTemplate >
             </ ajaxToolkit:TabPanel >
             < ajaxToolkit:TabPanel  runat ="server"  ID ="TabPanel4"  HeaderText ="44444" >
                 < ContentTemplate >
                    
                 </ ContentTemplate >
             </ ajaxToolkit:TabPanel >
         </ ajaxToolkit:TabContainer >
     </ div >

     < script  type ="text/javascript" >

         function  pageLoad() {
            $find( ' <%=Tabs.ClientID%> ' ).get_tabs()[ 2 ].set_disabled( true );
        }
    
     </ script >

     < asp:Button  ID ="Button1"  runat ="server"  onclick ="Button1_Click"  Text ="Button"   />

     </ form >
</ body >
</ html >

 

效果如下图所示，TabPanel被真正的Disable了：

 

 

全部代码请访问如下链接获取：http://forums.asp.net/p/1388315/2964536.aspx#2964536

 Thanks