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

最新推荐文章于 2021-12-02 09:37:07 发布

my98800

最新推荐文章于 2021-12-02 09:37:07 发布

阅读量340

点赞数

分类专栏： ASP.Net

ASP.Net 专栏收录该内容

258 篇文章

订阅专栏

本文介绍如何为AJAXControlToolkit中的TabPanel控件添加Disabled功能，使其能够变为灰色且不响应客户端事件。通过修改源代码并添加客户端行为，实现TabPanel的禁用状态。

前言：

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>
 
  
 