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
相关资源：JAVA上百实例源码以及开源项目