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

2019-11-10 21:48:09

字體：大中小

供稿：網(wǎng)友

前言：

Ajax Control Toolkit 是Open Source的（將包含到最新的VS2010中，屆時(shí)可能不再開源），我們可以容易地修改其源代碼來擴(kuò)展原有的控件，使之擁有新的功能，達(dá)到我們的預(yù)定需求。在本文中，我們以為TabPanel控件添加Disabled功能為例，向大家演示如何簡(jiǎn)單地?cái)U(kuò)展AJAX Control Toolkit中的控件。

需求：

TabContainer容器中的TabPanel類本身就包含了Enabled屬性，也可以使用javaScript方法set_enabled(X)來設(shè)置Enabled屬性，如果某個(gè)TabPanel的這個(gè)屬性為false的話，這個(gè)TabPanel就不會(huì)顯示在TabContainer中，這與一般控件的“Enabled”屬性不太一樣，我認(rèn)為叫它“Visiable”會(huì)更加恰當(dāng)。如下圖所示：

有時(shí)候這并不符合我們的需求，所以，在本例中，我們將為其添加Disabled功能，使TabPanel控件可以變成灰色，而不響應(yīng)客戶端事件。

1. 添加服務(wù)端屬性：

首先我們找到TabPanel.cs也就是TabPanel類，在其中添加如下屬性來代表TabPanel是“恢復(fù)啟用”還是“變灰禁用”狀態(tài)：

[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; } } 復(fù)制代碼

在屬性中，我們?cè)O(shè)置ClientPropertyName為“disabled”,也就是將這個(gè)屬性映射到Javascript Behavior代碼中的_disabled屬性，并以ViewState為狀態(tài)保存容器。

2. 添加客戶端屬性

由于AJAX Control Toolkit中的控件行為大都是由JavaScript Behavior實(shí)現(xiàn)的，接下來，我們向Tab控件相應(yīng)的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);} 復(fù)制代碼

接下來，我們還需要在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"); } }, 復(fù)制代碼

有了get和set訪問器，我們就可以在客戶端使用

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

來設(shè)置該屬性

3. 添加客戶端行為

有了屬性，我們接下來定義屬性所代表的行為，在這里，我們使用_regular()和_grayout()兩個(gè)方法來進(jìn)行TabPanel的“恢復(fù)啟用”和“變灰禁用”的狀態(tài)設(shè)置：

_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(); } 復(fù)制代碼

這兩個(gè)方法由上面代碼中高亮的部分調(diào)用。

4. 編譯測(cè)試

修改工作完成后，我們重新編譯AjaxControlToolkit.dll，并覆蓋項(xiàng)目中原有的引用，即可在網(wǎng)站中使用擴(kuò)展后的控件：

<%@ 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> 復(fù)制代碼

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