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是“恢复启用”还是“变灰禁用”状态:

        [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(thisthis._header_onclick);
    
this._header_onmouseover$delegate = Function.createDelegate(thisthis._header_onmouseover);
    
this._header_onmouseout$delegate = Function.createDelegate(thisthis._header_onmouseout);
    
this._header_onmousedown$delegate = Function.createDelegate(thisthis._header_onmousedown);
    
this._dynamicPopulate_onpopulated$delegate = Function.createDelegate(thisthis._dynamicPopulate_onpopulated);
    
this._oncancel$delegate = Function.createDelegate(thisthis._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._regular();
                } else {
                    
this._grayout();
                }
            }
            
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了:

 

 

全部代码请访问如下链接获取:http://forums.asp.net/p/1388315/2964536.aspx#2964536

 Thanks

posted @ 2009-03-10 12:32 LanceZhang 阅读(...) 评论(...) 编辑 收藏