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);
}