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是“恢复启用”还是“变灰禁用”状态：
[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._regular();
} else {
this._grayout();
}
}
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>
</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
