How can I add dynamic html to a server control?

Question

I am creating a server control that will sit in a aspx page. When the user selects a menu option, html controls (selects, inputs, etc) will have be added dynamically. I can do it using a user control, but I'm not sure how to go about it in a server control.

Can anyone tell me how I can add dynamic html into the control after it's already sitting in a page?

Answer 1

Since you are planning to add several controls as the output of your server control, you should consider inheriting from CompositeControl, this control is designed to work with several constituent controls, minimizing the code needed to do common things like keeping state and handling constituent control events

You need to override the CreateChildControls to add child controls. At the end of this method you should use this.ChildControlsCreated = true; to specify if the child controls were created, this is necessary because the CreateChildControls is called several times during the ASP.Net page life-cycle

You need to apply the same rules that you would typically apply to any server control, for example implement the INamingContainer interface to ensure that child controls will have a unique client ID

This is a simple example:

[DefaultProperty("UserText")]
[ToolboxData(@"<{0}:UserPassword runat=server UserText="""" PasswordText="""" />")]
public class UserPassword : CompositeControl
{
    public event EventHandler Submitted = delegate { };

    [Bindable(true)]
    [Category("Appearance")]
    [Description("User text")]
    [DefaultValue("")]
    [Localizable(true)]
    public string UserText
    {
        get
        {
            var t = this.FindControl("Username") as TextBox;
            return t.Text;
        }
        set
        {
            var t = this.FindControl("Username") as TextBox;
            t.Text = value;
        }
    }

    [Bindable(true)]
    [Category("Appearance")]
    [Description("Password text")]
    [DefaultValue("")]
    [Localizable(true)]
    public string PasswordText
    {
        get
        {
            var t = this.FindControl("Password") as TextBox;
            return t.Text;
        }
        set
        {
            var t = this.FindControl("Password") as TextBox;
            t.Text = value;
        }
    }

    protected override void CreateChildControls()
    {
        var p = new Panel { Width= new Unit(200), BackColor = Color.Silver };
        var ul = new Label { Text = "Username: " };
        var u = new TextBox { ID = "Username" };
        var pal = new Label { Text = "Password: " };
        var pa = new TextBox { ID = "Password", TextMode = TextBoxMode.Password };
        var l = new Literal { Text = "<br />" };
        var b = new Button { Text = "Log in" };

        b.Click += (x, y) => this.Submitted(x, y);

        p.Controls.Add(ul);
        p.Controls.Add(u);
        p.Controls.Add(l);
        p.Controls.Add(pal);
        p.Controls.Add(pa);
        p.Controls.Add(l);
        p.Controls.Add(l);
        p.Controls.Add(b);

        this.Controls.Add(p);
        this.ChildControlsCreated = true;
    }
}