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

2019-11-10 21:24:59

字体：大中小

来源：转载

供稿：网友

前言：

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了：