Control HTML rendered by CompositeControl Templated Server Controls

Question

I'm building my first custom server control which inherits from CompositeControl

The reason for the control is to be able to have a consistent content area (HTML elements) for multiple online applications that we develop.

So instead of having to constantly type out:

<div class="titleBar">
</div>
<div class="actionBar">
</div>
<div class="workspace">
</div>

the developer could add a server control as follows:

<custom:Workspace id="..." runat="server" Title="MyTitle">
   <TitleBar>
      Here is the title
   </TitleBar>
   <ActionBar>
      <asp:button id="..." runat="server" Title="MyButton" />
   </ActionBar>
   <Content>
      <asp:DataGrid id="..." runat="server" />
   </Content>
</custom:Workspace>

I read the article at http://msdn.microsoft.com/en-us/library/ms178657.aspx and it works, but the problem is... I don't understand why. (Does anyone have a link to a layman's version of an article that describes how to build these kinds of server controls?)

Main thing I notice so far is that Asp.net is rendering a bunch of SPAN elements, which of course I don't want.

How does one control the HTML that the new CompositeControl is outputting?

Thanks, Jacques

PS. Here's my code so far:

using System;
using System.ComponentModel;
using System.Drawing;
using System.Security.Permissions;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.Design;
namespace TemplatedServerControl
{
    [DefaultProperty("Title")]
    [ToolboxData("<{0}:Workspace runat=server></{0}:Workspace>")]
    public class Workspace : CompositeControl
    {
        #region FIELDS
        private ITemplate _TitleBarTemplateValue;
        private ITemplate _ActionBarTemplateValue;
        private TemplateOwner _TitleBarOwnerValue;
        private TemplateOwner _ActionBarOwnerValue;
        #endregion
        #region PROPERTY - TitleBarOwner
        [Browsable(false),
        DesignerSerializationVisibility(
        DesignerSerializationVisibility.Hidden)]
        public TemplateOwner TitleBarOwner
        {
            get
            {
                return _TitleBarOwnerValue;
            }
        } 
        #endregion
        #region PROPERTY - ActionBarOwner
        [Browsable(false),
        DesignerSerializationVisibility(
        DesignerSerializationVisibility.Hidden)]
        public TemplateOwner ActionBarOwner
        {
            get
            {
                return _ActionBarOwnerValue;
            }
        }
        #endregion
        #region PROPERTY - Title
        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("[Provide the title for the workspace]")]
        [Localizable(true)]
        public string Title
        {
            get
            {
                String s = (String)ViewState["Title"];
                return ((s == null) ? "[" + this.ID + "]" : s);
            }

            set
            {
                ViewState["Text"] = value;
            }
        }
        #endregion
        #region PROPERTY - TitleBar
        [Browsable(false),
        PersistenceMode(PersistenceMode.InnerProperty),
        DefaultValue(typeof(ITemplate), ""),
        Description("Control template"),
        TemplateContainer(typeof(Workspace))]
        public virtual ITemplate TitleBar
        {
            get
            {
                return _TitleBarTemplateValue;
            }
            set
            {
                _TitleBarTemplateValue = value;
            }
        }
        #endregion
        #region PROPERTY - ActionBar
        [Browsable(false),
        PersistenceMode(PersistenceMode.InnerProperty),
        DefaultValue(typeof(ITemplate), ""),
        Description("Control template"),
        TemplateContainer(typeof(Workspace))]
        public virtual ITemplate ActionBar
        {
            get
            {
                return _ActionBarTemplateValue;
            }
            set
            {
                _ActionBarTemplateValue = value;
            }
        }
        #endregion
        #region METHOD - CreateChildControls()
        protected override void CreateChildControls()
        {
            //base.CreateChildControls();
            Controls.Clear();

            _TitleBarOwnerValue = new TemplateOwner();
            _ActionBarOwnerValue = new TemplateOwner();

            ITemplate temp1 = _TitleBarTemplateValue;
            ITemplate temp2 = _ActionBarTemplateValue;

            temp1.InstantiateIn(_TitleBarOwnerValue);
            temp2.InstantiateIn(_ActionBarOwnerValue);

            this.Controls.Add(_TitleBarOwnerValue);
            this.Controls.Add(_ActionBarOwnerValue);
        } 
        #endregion
        #region METHOD - RenderContents(HtmlTextWriter writer)
        protected override void RenderContents(HtmlTextWriter writer)
        {
            base.RenderContents(writer);
        } 
        #endregion
    }

    [ToolboxItem(false)]
    public class TemplateOwner : WebControl
    {
    }
}

Answer 1

The extra <span> elements are coming from the TemplateOwner controls because a WebControl (which TemplateOwner inherits from) renders <span> tags by default. You could change TemplateOwner to specify the tag to render:

public class TemplateOwner : WebControl
{
    public TemplateOwner() :
        base(HtmlTextWriterTag.Div)
    {
    }
}

But you don't need to create your own class to use templates. For example, you can just use Panel controls:

private Panel _TitleBarPanel;
private Panel _ActionBarPanel;

protected override void CreateChildControls()
{
    _TitleBarPanel = new Panel { CssClass = "titleBar" };
    _TitleBarTemplateValue.InstantiateIn(_TitleBarPanel);
    this.Controls.Add(_TitleBarPanel);

    _ActionBarPanel = new Panel { CssClass = "actionBar" };
    _ActionBarTemplateValue.InstantiateIn(_ActionBarPanel);
    this.Controls.Add(_ActionBarPanel);
}