title: Custom Server Controls - Base Classes & Usage
body: <p>I hope someone out there can shed some light on the topic of creating server controls, the control base classes and the usage of those classes.</p>
  
  <p>Here is an example of what I want to achieve. I want to create a custom panel control that one can instantiate in the ASPX markup like so: </p>
  
  <pre><code>&lt;acme:Panel ID="MyPanel" runtat="server" Scrolling="true"&gt;
    &lt;Header&gt;My Panel Header&lt;/Header&gt;
    &lt;Toolbars&gt;
      &lt;acme:Toolbar ID="Toolbar1" runat="server"/&gt;
      &lt;acme:Toolbar ID="Toolbar2" runat="server"/&gt;
    &lt;/Toolbars&gt;
    &lt;Contents&gt;
      &lt;%-- Some Content for the Contents section --%&gt;
    &lt;/Contents&gt;
    &lt;Footer&gt;
      &lt;%-- Some Content for the Footer section --%&gt;
    &lt;/Footer&gt;
  &lt;/acme:Panel&gt;
  </code></pre>
  
  <p>It should render the following HTML:</p>
  
  <pre><code>&lt;div id="MyPanel" class="panel scroll-contents"&gt;
    &lt;div class="panel-header"&gt;
      &lt;div class="panel-header-l"&gt;&lt;/div&gt;
      &lt;div class="panel-header-c"&gt;
        &lt;div class="panel-header-wrapper"&gt;My Panel Header&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="panel-header-r"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="panel-toolbars"&gt;
      // HTML of Toolbar control
    &lt;/div&gt;
    &lt;div class="panel-body"&gt;
      &lt;div class="panel-body-t"&gt;
        &lt;div class="panel-body-tl"&gt;&lt;/div&gt;
        &lt;div class="panel-body-tc"&gt;&lt;/div&gt;
        &lt;div class="panel-body-tr"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="panel-body-m"&gt;
        &lt;div class="panel-body-ml"&gt;&lt;/div&gt;
        &lt;div class="panel-body-mc"&gt;
          &lt;div class="panel-body-wrapper"&gt;
            // Contents
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="panel-body-mr"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="panel-body-b"&gt;
        &lt;div class="panel-body-bl"&gt;&lt;/div&gt;
        &lt;div class="panel-body-bc"&gt;&lt;/div&gt;
        &lt;div class="panel-body-br"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="panel-footer"&gt;
      &lt;div class="panel-footer-l"&gt;&lt;/div&gt; 
      &lt;div class="panel-footer-c"&gt;
        &lt;div class="panel-footer-wrapper"&gt;
          // Footer contents
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="panel-footer-r"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The developer should be able to omit any of the sections except the Contents section. Omitted sections' HTML should not be rendered. Plus the user should be able to instantiate/add a Panel control in the code behind of the page and add additional controls to the various sections of the Panel control, like so: </p>
  
  <pre><code>ACME.Panel MyPanel = new ACME.Panel();
  MyPlaceHolder.Controls.Add(MyPanel);
  
  MyPanel.Header = "My Panel Header";
  
  MyPanel.Toolbars.Controls.Add(new ACME.Toolbar());
  
  MyPanel.Footer.Controls.Add(new Literal());
  
  MyPanel.Contents.Controls.Add(new GridView());
  </code></pre>
  
  <p>I have read the following article : Communications Sector Conversations : Authoring Custom ASP.NET Server Controls (Which base class?)</p>
  
  <p>Since I do not really want the developer to change the styling of my control, the System.Web.UI.Control base class should be sufficient, but I will also need to apply the INamingContainer interface. Thus my control should look like so:</p>
  
  <pre><code>using System.Web;
  using System.Web.UI;
  using System.Web.UI.Design;
  using System.Web.UI.HtmlControls;
  using System.Web.UI.WebControls;
  using System.ComponentModel;
  using System.ComponentModel.Design;
  using System.Security.Permissions;
  namespace ACME
  {
      [ToolboxData("&amp;lt;{0}:Panel runat=server&gt;&lt;/{0}:Panel &gt;")]
      [ParseChildren(true)]
      public class Panel : Control, INamingContainer
      {
          private string _header;
          private ITemplate _toolbars;
          private ITemplate _contents;
          private ITemplate _footerContents;
          public DialogBox()
          {
          }
          [Browsable(false),
          PersistenceMode(PersistenceMode.InnerProperty)]
          public virtual ITemplate Toolbars
          {
              get { return _toolbars; }
              set { _toolbars = value; }
          }
          [Browsable(false),
          PersistenceMode(PersistenceMode.InnerProperty)]
          public virtual ITemplate Contents
          {
              get { return _contents; }
              set { _contents= value; }
          }
          [Browsable(false),
          PersistenceMode(PersistenceMode.InnerProperty)]
          public virtual ITemplate Footer
          {
              get { return _footerContents; }
              set { _footerContents = value; }
          }
      }
  }
  </code></pre>
  
  <p>I have read many tutorials but they either don't cover my intended implementation or explain WHY a certain approach was taken. They have also confused me so much that I have resorted to JavaScript to dynamically render the necessary HTML. If there are any Control Guru's out there, could you please explain how you would have tackled this task?</p>