前言:
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是“恢复启用”还是“变灰禁用”状态:
[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.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属性的访问器:
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访问器,我们就可以在客户端使用
来设置该属性
3. 添加客户端行为
有了属性,我们接下来定义属性所代表的行为,在这里,我们使用_regular()和_grayout()两个方法来进行TabPanel的“恢复启用”和“变灰禁用”的状态设置:
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,并覆盖项目中原有的引用,即可在网站中使用扩展后的控件:
<! 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 >
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
</ ContentTemplate >
</ ajaxToolkit:TabPanel >
< ajaxToolkit:TabPanel runat ="server" ID ="TabPanel3" HeaderText ="33333" >
< ContentTemplate >
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
</ ContentTemplate >
</ ajaxToolkit:TabPanel >
< ajaxToolkit:TabPanel runat ="server" ID ="TabPanel4" HeaderText ="44444" >
< ContentTemplate >
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
</ 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