Dynamic composite control

[James Gomount]

I want to build a control that can dynamically display different sub
controls.
For example, there is a dropdownlist and a submit button. When an item is
selected from the drop down list and the user press the button, I want to
display other controls (i.e. Textbox and buttons) depending on the item
selected in the dropdownlist.

I think I should create a web custom control, but I am not sure where I
should create and display the sub controls (maybe in CreateChildControls).

Is there any samples or good references for things like that?

 

[Jos]

I want to build a control that can dynamically display different sub
controls.
For example, there is a dropdownlist and a submit button. When an
item is selected from the drop down list and the user press the
button, I want to display other controls (i.e. Textbox and buttons)
depending on the item selected in the dropdownlist.

I think I should create a web custom control, but I am not sure where
I should create and display the sub controls (maybe in
CreateChildControls).

Is there any samples or good references for things like that?

I guess you can create them at any time. In onSelectedIndexChanged
would be OK, but this will cause trouble when you want those controls
to post back. The reason is that, for controls to post back, they need
to be re-created when the control is rebuilt. Otherwise the postback
event will not fire.

If the maximum number of dynamic controls is known, you may also
create all of them in CreateChildControls, hide them (Visible=False),
and just unhide the ones you want when they are needed.

 

[James Gomount]

I made a small sample with a Web user control. With the web user control
everything works fine, but when I try to convert this to a Web custom
control I have problems with the Postback.

Any hints on how to make this a custom control?

Code is below.

WebUserControl1.ascx
------------------------
namespace DynUpdateTest
{
using System;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

/// <summary>
/// Summary description for WebUserControl1.
/// </summary>
public class WebUserControl1 : System.Web.UI.UserControl
{
protected System.Web.UI.WebControls.DropDownList ddl;
protected System.Web.UI.WebControls.Panel panelField;
protected System.Web.UI.WebControls.Label lblResult;

public int MaxItems
{
get { return _maxItems; }
set { _maxItems = value; }
}
private int _maxItems;

private void Page_Load(object sender, System.EventArgs e)
{
if (!IsPostBack)
{
ddl.Items.Add("-- Select an item --");
for (int i=1; i<=_maxItems; i++)
ddl.Items.Add(i.ToString());
}

if (ddl.SelectedIndex > 0)
{
for (int i=0; i<ddl.SelectedIndex; i++)
{
TextBox box = new TextBox();
box.ID = "box_" + ddl.SelectedItem + "_" + i.ToString();
panelField.Controls.Add(new LiteralControl("<b>" + box.ID + ": </b>"));
panelField.Controls.Add(box);
panelField.Controls.Add(new LiteralControl("<br>"));
}

Button cmdSubmit = new Button();
cmdSubmit.ID = "cmdSubmit";
cmdSubmit.Text = "Send";
cmdSubmit.Click += new EventHandler(cmdSubmit_Click);
panelField.Controls.Add(cmdSubmit);

}
}

#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}

/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.ddl.SelectedIndexChanged += new
System.EventHandler(this.ddl_SelectedIndexChanged);
this.Load += new System.EventHandler(this.Page_Load);

}
#endregion

private void cmdSubmit_Click(object sender, EventArgs e)
{
//Show the results
lblResult.Text = "";

foreach (Control ctr in panelField.Controls)
{
if (ctr is TextBox)
{
TextBox txt = (TextBox) ctr;
lblResult.Text += String.Format("{0} -> {1}<br>", txt.ID, txt.Text);
}
}
}

private void ddl_SelectedIndexChanged(object sender, System.EventArgs e)
{
lblResult.Text = "";
}
}
}


-----------
WebUserControl1.ascx
----------
<%@ Control Language="c#" AutoEventWireup="false"
Codebehind="WebUserControl1.ascx.cs"
Inherits="DynUpdateTest.WebUserControl1"
TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
<aspropDownList id="ddl" runat="server" AutoPostBack="True"
Width="167px"></aspropDownList>
<HR width="100%" SIZE="1">
<aspanel id="panelField" runat="server"></aspanel>
<HR width="100%" SIZE="1">
<asp:Label id="lblResult" runat="server"></asp:Label>


-----
WebForm4.aspx.cs
------
<%@ Page language="c#" Codebehind="WebForm4.aspx.cs" AutoEventWireup="false"
Inherits="DynUpdateTest.WebForm4" %>
<%@ Register TagPrefix="uc1" TagName="WebUserControl1"
Src="WebUserControl1.ascx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm4</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<uc1:WebUserControl1 id="WebUserControl11" runat="server"
MaxItems="5"></uc1:WebUserControl1>
</form>
</body>
</HTML>

 

[Victor Garcia Aprea [MVP]]

Hi James,

From your description it looks like a custom control would fit better. When
creating a composite custom control, CreateChildControls is the method where
to put creation of child controls. If you're looking into custom control
development I highly recommend reading this[1] book.

[1] http://www.amazon.com/exec/obidos/ASIN/0735615829/laplatayacom
--
Victor Garcia Aprea
Microsoft MVP | ASP.NET
Looking for insights on ASP.NET? Read my blog:
http://obies.com/vga/blog.aspx

To contact me remove 'NOSPAM'. Please post all questions to the newsgroup

 

[ton]

I was looking for the same matter (look at my messages, from end of
januari). If you haven't solve it than here some hints

It is very simple once you know how things are done:
Implementing the InamingContainer
Add all your controls in CreateChildControls
like
Dim button1 As New Button()
button1.Text = "Submit"
Controls.Add(button1)
'Notice the event handler defined below
AddHandler button1.Click, AddressOf Me.ButtonClicked

in ButtonClicked you have to clear all controls and add your new controls
dynamically

special thanks to Alessandro Zifiglio and Arthur Mnev

Ton