Question

I am searching for this all around the Internet, including here, for 2 days now, but I am not able to find anything similar being dealt with. Also, this is my first post on Stack Overflow, so bear with me please :]

The problem:

This is my first time actually creating a templated server control, but I accomplished this without problems with the help of MSDN on the templating topics. I have implemented a control that can be used like this:

<test:TemplatedControl ID="templatedControl" runat="server">
    <Template>
        Template start:
        <%# Container.EmailText %>
        <%# Container.EmailField %>
        Template end.
    </Template>
</test:TemplatedControl>

The control uses the following container/context for the template:

public class TemplateContainer : WebControl, INamingContainer
{
    public string EmailText
    {
        get
        {
            return this.emailLabelText;
        }
    }
    string emailLabelText;


    public TextBox EmailField
    {
        get
        {
            return this.emailField;
        }
    }
    TextBox emailField;


    public TemplateContainer()
        : base(HtmlTextWriterTag.Div)
    {
        this.BorderWidth = 2;
        this.BorderStyle = BorderStyle.Outset;

        this.emailLabelText = "E-mail:";

        this.emailField = new TextBox();
        this.emailField.MaxLength = 10;
    }
}

Both properties of the container class work ok and are accessible via data binding expressions while writing the template, but EmailField is being rendered as System.Web.UI.WebControls.TextBox, which is ok by the given code. The output of the control is:

<div style="border-width:2px;border-style:Outset;">
    Template start:
    E-mail:
    System.Web.UI.WebControls.TextBox
    Template end.
</div>

Now the question is: Is it possible to output a control (such as TextBox here) as actual control back into the template as other data via binding expressions?

If this would be possible, then it would be possible to pick apart the output of this control including its child controls and put it together as needed via the template.

I am afraid that this may not be possible to achieve at all, but I would like to get this clarified by someone. If that’s the case, I am also open to suggestions of another approach. If you are interested in why I am trying to do this, read below.

The reason for this approach:

I am building a composite server control, which customer himself will use on his site, which is still in development. Therefore the final layout and formatting needs for the output of the control are not known yet. Instead the control is required to have flexible output in terms of both layout and design, so it could be customized to match the site later.

The design part of this can be realized by setting some CSS class properties to the control, though it may be a mess to configure for the customer, as the output of the control will be quite complex.

I am not sure about how to achieve the customizable layout requirement e.g., render the form fields inside table structure, or render it in divs, or maybe just inline without additional HTML, etc.

So instead of providing several pre made types of output, I came up with an idea, that the output rendered by my control could be templated, which could solve both layout and design flexibility problem. Customer would declaratively set a template to wrap around the stuff that my template needs to render, which would also enable him to set all his CSS classes right there to wrapping elements as needed. And this leads me to aforementioned problem and question.

Thanks in advance,

Garkin

Answer 1

I think you need an abstract class that defines what the TemplateContainer is required to have. For Example:

public abstract class TemplateContainer : WebControl, INamingContainer
{
    public abstract Literal EmailText { get; }
    public abstract TextBox EmailField { get; }
}

And then require the test:TemplateControl Template to implement TemplateContainer.

This way you can use EmailText and EmailField to apply MaxLength etc. Although you probably want to verify that they are not null before using them

if(EmailText != null)
{
    //use EmailText
}

The consumer of the server control would then be creating a control UserTemplate.ascx similar to this:

Template start:
<asp:Literal ID="emailText" runat="server" />
<asp:TextBox ID="emailField" runat="server" />
Template end.

With a code behind UserTemplate.ascx.cs:

public class UserTemplate : TemplateContainer
{
    public Literal EmailText { get { return emailText; } }
    public TextBox EmailField { get { return emailField; } }
}

—-Edit—-

Based on all of this your page that contains test:TemplatedControl will look like (assuming the path to UserTemplate.ascx is aliased as test:UserTemplate):

<test:TemplatedControl ID="templatedControl" runat="server">
    <Template>
        <test:UserTemplate ID="userTemplate" runat="server" />
    </Template>
</test:TemplatedControl>

And then in the code behind you can access the properties on UserTemplate:

templatedControl.Template.EmailText.Text = "Email: ";
templatedControl.Template.EmailField.MaxLength = 10;