1

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

famousgarkin
  • 13,687
  • 5
  • 58
  • 74
  • How is your code different from: ` ` – s_hewitt Nov 01 '11 at 19:49
  • I want to retain control over those controls, as I need to work with them in my server control later. I need to know which field is which, IDs and so on. They represent a specific form together. I just want a way for the consumer of this server control to be able to decide the placement of those controls via template. It is possible I am going at this the wrong way already with these assumptions. – famousgarkin Nov 01 '11 at 20:00
  • How will the consumer of the server control be determining the placement of those controls? Are they developing in ASP.NET? – s_hewitt Nov 01 '11 at 20:26
  • Yes, they will use the control inside an ASP.NET web site, which is in development. Therefore they want to be able to customize not just the styles but also HTML layout according to how the site will be structured by then. – famousgarkin Nov 01 '11 at 20:35

1 Answers1

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;
s_hewitt
  • 4,252
  • 24
  • 24
  • I see the point here and I like the approach. It would enable me to meet my goals. I still have a small problem though. Could you please elaborate further on how to connect the `UserTemplate` with the controls that are declared on the page? How do you intended the `UserTemplate` class to be used? – famousgarkin Nov 02 '11 at 08:04
  • 1
    `UserTemplate.ascx` - contains the "template start:" through "template end." code in my answer. `UserTemplate.ascx.cs` contains the code described as "code behind" in my answer. Is that enough info? – s_hewitt Nov 02 '11 at 15:33
  • This got me on the right track, thank you. Sorry for late answer, I wanted to see it all working well in bigger picture before accepting the answer, but I had to postpone the project for a while. – famousgarkin Feb 09 '12 at 10:53