How to build CustomControl with AjaxControlToolkit Control?

There is a requirement: A customer would like to built a Custom CollapsiblePanel control. There are two contents of this control, the Header and the Content, both of them are Panels. His requirement is that we can place any control into the two contents by adding the HTML into the tag directly. The Custom Control also containers an AjaxControlToolkit CollapsiblePanelExtender to achieve the Collapse/Expand function for the Header and Content.

 

To achieve your goal, you can follow these steps:

1. We need to build a class which inherits the Panel Class and INamingContainer Interface. This class would be the Header and Content control’s base class.

 

代码

 1  using  System;   
 2  using  System.Collections.Generic;   
 3  using  System.ComponentModel;   
 4  using  System.Text;   
 5  using  System.Web;   
 6  using  System.Web.UI;   
 7  using  System.Web.UI.WebControls;   
 8    
 9  namespace  CustomCollapsiblePanel   
10  {   
11       public   class  CCPContainer : Panel, INamingContainer   
12      {   
13    
14      }   
15  } 

 

 

2. In the CustomControl’s class, we create two properties Header and Content with the ITemplate type. Set the PersistenceModeAttribute with the value “InnerProperty”, then the two control would persist as a nested tag in the HTML.

 

代码

 1  ///   <summary>    
 2  ///  Header Template   
 3  ///   </summary>    
 4  [Browsable( false )]   
 5  [DefaultValue( null )]   
 6  [Description( " CollapisblePanel Header " )]   
 7  [PersistenceMode(PersistenceMode.InnerProperty)]   
 8  [TemplateContainer( typeof (CCPContainer))]   
 9  [TemplateInstance(TemplateInstance.Single)]   
10  public   virtual  ITemplate Header   
11  {   
12       get  {  return  _headerTemplate; }   
13       set  { _headerTemplate  =  value; }   
14  }   
15  ///   <summary>    
16  ///  Content Template   
17  ///   </summary>    
18  [Browsable( false )]   
19  [DefaultValue( null )]   
20  [Description( " CollapisblePanel Content " )]   
21  [PersistenceMode(PersistenceMode.InnerProperty)]   
22  [TemplateContainer( typeof (CCPContainer))]   
23  [TemplateInstance(TemplateInstance.Single)]   
24  public   virtual  ITemplate Content   
25  {   
26       get  {  return  _contentTemplate; }   
27       set  { _contentTemplate  =  value; }   
28  }  
29 

 

 

3. Create the Header Container and Content Container instance properties which are used to added into the CustomControl.

 

代码

 1  ///   <summary>    
 2  ///  Header Container   
 3  ///   </summary>    
 4  [Browsable( false )]   
 5  [DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)]   
 6  public  CCPContainer HeaderContainer   
 7  {   
 8       get   
 9      {   
10          EnsureChildControls();   
11           return  _header;   
12      }   
13  }   
14    
15  ///   <summary>    
16  ///  Content Container   
17  ///   </summary>    
18  [Browsable( false )]   
19  [DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)]   
20  public  CCPContainer ContentContainer   
21  {   
22       get   
23      {   
24          EnsureChildControls();   
25           return  _content;   
26      }   
27  }  
28 

 

 

4. Add two CssClasses properties for the Header and Content.

 

代码

 1  ///   <summary>    
 2  ///  Header CSS Class   
 3  ///   </summary>    
 4  [Browsable( true )]   
 5  [Category( " Appearance " )]   
 6  [Description( " CSS class for CollapisblePanel Header " )]   
 7  public   string  HeaderCssClass   
 8  {   
 9       get   
10      {   
11          EnsureChildControls();   
12           return  _header.CssClass;   
13      }   
14       set   
15      {   
16          EnsureChildControls();   
17          _header.CssClass  =  value;   
18      }   
19  }   
20    
21  ///   <summary>    
22  ///  Content CSS Class   
23  ///   </summary>    
24  [Browsable( true )]   
25  [Category( " Appearance " )]   
26  [Description( " CSS class for CollapisblePanel Content " )]   
27  public   string  ContentCssClass   
28  {   
29       get   
30      {   
31          EnsureChildControls();   
32           return  _content.CssClass;   
33      }   
34       set   
35      {   
36          EnsureChildControls();   
37          _content.CssClass  =  value;   
38      }   
39  }  
40 

 

 

5. In the override CreateChildControls function, add the Header, Content and an AjaxControlToolkit CollapsiblePanelExtender. Bind the corresponding controls with this extender. In the end, load the templates into the controls.

 

代码

 1           ///   <summary>
 2           ///  Instantiate the templates into new child controls
 3           ///   </summary>
 4           protected   override   void  CreateChildControls()
 5          {
 6               //  Create the controls
 7              Controls.Clear();
 8              _header  =   new  CCPContainer();
 9              _header.ID  =   string .Format(System.Globalization.CultureInfo.InvariantCulture,  " {0}_header " ,  this .ID);
10              Controls.Add(_header);
11              _content  =   new  CCPContainer();
12              _content.ID  =   string .Format(System.Globalization.CultureInfo.InvariantCulture,  " {0}_content " ,  this .ID);
13              Controls.Add(_content);
14 
15              CollapsiblePanelExtender cpe  =   new  CollapsiblePanelExtender();
16              cpe.ID  =   " cpe " ;
17              cpe.TargetControlID  =  _content.ID;
18              cpe.CollapseControlID  =  _header.ID;
19              cpe.ExpandControlID  =  _header.ID;
20              Controls.Add(cpe);
21 
22               //  Load the templates into the controls
23               if  (_headerTemplate  !=   null )
24                  _headerTemplate.InstantiateIn(_header);
25               if  (_contentTemplate  !=   null )
26                  _contentTemplate.InstantiateIn(_content);
27          }
28      }

 

 

6. Compile the custom control and add it into a page. Complete the property value.

 

代码

 1  < ccp:CusCollapsiblePanel ID = " CusCollapsiblePanel1 "  runat = " server "  ContentCssClass = " collapsePanel "   
 2      HeaderCssClass = " collapsePanelHeader " >   
 3       < Header >   
 4          The Header   
 5       </ Header >   
 6       < Content >   
 7          The Content   
 8           < asp:Label ID = " Label1 "  runat = " server " > FirstName: </ asp:Label >   
 9           < asp:TextBox ID = " TextBox1 "  runat = " server " > LastName: </ asp:TextBox >   
10       </ Content >   
11  </ ccp:CusCollapsiblePanel >   

 

 

7. The whole code:

The CusCollapsiblePanel.cs

 

代码

  1  using  System;   
  2  using  System.Collections.Generic;   
  3  using  System.ComponentModel;   
  4  using  System.Text;   
  5  using  System.Web;   
  6  using  System.Web.UI;   
  7  using  System.Web.UI.WebControls;   
  8  using  AjaxControlToolkit;   
  9    
 10  namespace  CustomCollapsiblePanel   
 11  {   
 12      [ToolboxData( " <{0}:CusCollapsiblePanel runat=server></{0}:CusCollapsiblePanel> " )]   
 13       public   class  CusCollapsiblePanel : WebControl   
 14      {  
 15           #region  private properties   
 16             
 17           ///   <summary>    
 18           ///  Header Container   
 19           ///   </summary>    
 20           private  CCPContainer _header;   
 21    
 22           ///   <summary>    
 23           ///  Header Template   
 24           ///   </summary>    
 25           private  ITemplate _headerTemplate;   
 26    
 27           ///   <summary>    
 28           ///  Content Container   
 29           ///   </summary>    
 30           private  CCPContainer _content;   
 31    
 32           ///   <summary>    
 33           ///  Content Template   
 34           ///   </summary>    
 35           private  ITemplate _contentTemplate;  
 36   
 37           #endregion   
 38   
 39           #region  public properties   
 40    
 41           ///   <summary>    
 42           ///  Header Container   
 43           ///   </summary>    
 44          [Browsable( false )]   
 45          [DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)]   
 46           public  CCPContainer HeaderContainer   
 47          {   
 48               get   
 49              {   
 50                  EnsureChildControls();   
 51                   return  _header;   
 52              }   
 53          }   
 54    
 55           ///   <summary>    
 56           ///  Header CSS Class   
 57           ///   </summary>    
 58          [Browsable( true )]   
 59          [Category( " Appearance " )]   
 60          [Description( " CSS class for CollapisblePanel Header " )]   
 61           public   string  HeaderCssClass   
 62          {   
 63               get   
 64              {   
 65                  EnsureChildControls();   
 66                   return  _header.CssClass;   
 67              }   
 68               set   
 69              {   
 70                  EnsureChildControls();   
 71                  _header.CssClass  =  value;   
 72              }   
 73          }   
 74    
 75           ///   <summary>    
 76           ///  Header Template   
 77           ///   </summary>    
 78          [Browsable( false )]   
 79          [DefaultValue( null )]   
 80          [Description( " CollapisblePanel Header " )]   
 81          [PersistenceMode(PersistenceMode.InnerProperty)]   
 82          [TemplateContainer( typeof (CCPContainer))]   
 83          [TemplateInstance(TemplateInstance.Single)]   
 84           public   virtual  ITemplate Header   
 85          {   
 86               get  {  return  _headerTemplate; }   
 87               set  { _headerTemplate  =  value; }   
 88          }   
 89    
 90           ///   <summary>    
 91           ///  Content Container   
 92           ///   </summary>    
 93          [Browsable( false )]   
 94          [DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)]   
 95           public  CCPContainer ContentContainer   
 96          {   
 97               get   
 98              {   
 99                  EnsureChildControls();   
100                   return  _content;   
101              }   
102          }   
103    
104           ///   <summary>    
105           ///  Content CSS Class   
106           ///   </summary>    
107          [Browsable( true )]   
108          [Category( " Appearance " )]   
109          [Description( " CSS class for CollapisblePanel Content " )]   
110           public   string  ContentCssClass   
111          {   
112               get   
113              {   
114                  EnsureChildControls();   
115                   return  _content.CssClass;   
116              }   
117               set   
118              {   
119                  EnsureChildControls();   
120                  _content.CssClass  =  value;   
121              }   
122          }   
123    
124           ///   <summary>    
125           ///  Content Template   
126           ///   </summary>    
127          [Browsable( false )]   
128          [DefaultValue( null )]   
129          [Description( " CollapisblePanel Content " )]   
130          [PersistenceMode(PersistenceMode.InnerProperty)]   
131          [TemplateContainer( typeof (CCPContainer))]   
132          [TemplateInstance(TemplateInstance.Single)]   
133           public   virtual  ITemplate Content   
134          {   
135               get  {  return  _contentTemplate; }   
136               set  { _contentTemplate  =  value; }   
137          }  
138   
139           #endregion    
140             
141           ///   <summary>    
142           ///  Instantiate the templates into new child controls   
143           ///   </summary>    
144           protected   override   void  CreateChildControls()   
145          {   
146               //  Create the controls   
147              Controls.Clear();   
148              _header  =   new  CCPContainer();   
149              _header.ID  =   string .Format(System.Globalization.CultureInfo.InvariantCulture,  " {0}_header " ,  this .ID);   
150              Controls.Add(_header);   
151              _content  =   new  CCPContainer();   
152              _content.ID  =   string .Format(System.Globalization.CultureInfo.InvariantCulture,  " {0}_content " ,  this .ID);   
153              Controls.Add(_content);   
154    
155              CollapsiblePanelExtender cpe  =   new  CollapsiblePanelExtender();   
156              cpe.ID  =   " cpe " ;   
157              cpe.TargetControlID  =  _content.ID;   
158              cpe.CollapseControlID  =  _header.ID;   
159              cpe.ExpandControlID  =  _header.ID;   
160              Controls.Add(cpe);   
161    
162               //  Load the templates into the controls   
163               if  (_headerTemplate  !=   null )   
164                  _headerTemplate.InstantiateIn(_header);   
165               if  (_contentTemplate  !=   null )   
166                  _contentTemplate.InstantiateIn(_content);   
167          }   
168      }   
169  }

 

The CCPContainer.cs

 

代码

 1  using  System;   
 2  using  System.Collections.Generic;   
 3  using  System.ComponentModel;   
 4  using  System.Text;   
 5  using  System.Web;   
 6  using  System.Web.UI;   
 7  using  System.Web.UI.WebControls;   
 8    
 9  namespace  CustomCollapsiblePanel   
10  {   
11       public   class  CCPContainer : Panel, INamingContainer   
12      {   
13    
14      }   
15  } 

 

The TestCustomCollapsiblePanel.aspx

 

代码

 1  <% @ Page Language = " vb "  AutoEventWireup = " false "  CodeBehind = " TestCustomCollapsiblePanel.aspx.vb "   
 2      Inherits = " SoluTest_CustomControl.TestCustomCollapsiblePanel "   %>   
 3    
 4  <% @ Register Assembly = " CustomCollapsiblePanel "  Namespace = " CustomCollapsiblePanel "   
 5      TagPrefix = " ccp "   %>   
 6  <! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >   
 7  < html xmlns = " http://www.w3.org/1999/xhtml " >   
 8  < head runat = " server " >   
 9       < title ></ title >   
10    
11       < script runat = " server " >   
12    
13          Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load   
14               ' form1.Controls.Add(New CustomExtenders.CustomCollapsiblePanel())   
15          End Sub   
16         
17       </ script >   
18    
19       < style type = " text/css " >   
20          .collapseContainer   
21          {   
22              width: 500px;   
23              overflow: visible;   
24          }   
25          .collapsePanel   
26          {   
27              border: medium solid #0000FF;   
28              width: 450px;   
29              background - color: white;   
30              overflow: visible;   
31               float : none;   
32          }   
33          .collapsePanelHeader   
34          {   
35              width: 450px;   
36              height: 20px;   
37              color: Yellow;   
38              background - color: # 000080 ;   
39              font - weight: bold;   
40               float : none;   
41              padding: 5px;   
42              cursor: pointer;   
43              vertical - align: middle;   
44          }   
45       </ style >   
46  </ head >   
47  < body >   
48       < form id = " form1 "  runat = " server " >   
49       < div >   
50           < asp:ScriptManager ID = " ScriptManager1 "  runat = " server " >   
51           </ asp:ScriptManager >   
52           < ccp:CusCollapsiblePanel ID = " CusCollapsiblePanel1 "  runat = " server "  ContentCssClass = " collapsePanel "   
53              HeaderCssClass = " collapsePanelHeader " >   
54               < Header >   
55                  The Header   
56               </ Header >   
57               < Content >   
58                  The Content   
59                   < asp:Label ID = " Label1 "  runat = " server " > FirstName: </ asp:Label >   
60                   < asp:TextBox ID = " TextBox1 "  runat = " server " > LastName: </ asp:TextBox >   
61               </ Content >   
62           </ ccp:CusCollapsiblePanel >   
63       </ div >   
64       </ form >   
65  </ body >   
66  </ html >  

 

8. The related Asp.Net thread URL:http://forums.asp.net/p/1499632/3553543.aspx#3553543

 

Best regards,

Zhi-Qiang Ni

 

转载于:https://www.cnblogs.com/Zhi-QiangNi/archive/2009/12/08/1619628.html