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控件可以變成灰色，而不響應客戶端事件。
首先我們找到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為狀態保存容器。
由于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);
來設置該屬性
有了屬性，我們接下來定義屬性所代表的行為，在這里，我們使用_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(); }
這兩個方法由上面代碼中高亮的部分調用。
修改工作完成后，我們重新編譯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
新聞熱點
疑難解答
