asked on

Dynamically created controls lose state on postback

My dynamically created controls are losing state.

Here is the process...

1 PageLoads
2 On DDLSelectedIndexChanged controls are created dynamically
3 On ButtonClick I want to read the values from the controls but they are gone

This makes sense but I'm not sure how to address it. Below is a code sample I wrote that exposes the problem I'm running in to. Just try to run it and you will see what I mean.

<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">


    protected void Page_Load(object sender, EventArgs e)
    {
        ButtonSubmit.Visible = false;    
    }
    
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (DropDownList1.SelectedIndex == 0)
            return;
        
        FillTableControls();
        ButtonSubmit.Visible = true;
    }

    protected void FillTableControls()
    {
        AddTextBoxRow("1", "Name");
        AddTextBoxRow("2", "Address");
        AddTextBoxRow("3", "Email");
    }

    protected void AddTextBoxRow(string suffix, string labelText)
    {
        TableRow row = new TableRow();
        TableCell cell1 = new TableCell();
        TableCell cell2 = new TableCell();

        System.Web.UI.WebControls.Label label = new System.Web.UI.WebControls.Label();
        System.Web.UI.WebControls.TextBox textbox = new System.Web.UI.WebControls.TextBox();

        label.ID = "Label" + suffix;
        label.Text = labelText;
        textbox.ID = "TextBox" + suffix;
        cell1.Width = 200;
        cell1.Controls.Add(label);
        cell2.Controls.Add(textbox);
        row.Cells.Add(cell1);
        row.Cells.Add(cell2);

        TableControls.Rows.Add(row);
    }


    protected void ButtonSubmit_Click(object sender, EventArgs e)
    {
        for (int i = 1; i < 4; i++)
        {
            string controlName = "TextBox" + i.ToString();
            TextBox t = (TextBox)this.TableControls.FindControl(controlName);
            LabelMessage.Text += t.Text + ", ";
        }
    }
    
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" >
            <asp:ListItem>Select something...</asp:ListItem>
            <asp:ListItem>This will do</asp:ListItem>
        </asp:DropDownList>
        <br />
        <br />
        <asp:Table ID="TableControls" runat="server">
        </asp:Table>
        <br />
        <asp:Button ID="ButtonSubmit" runat="server" Text="Postback" OnClick="ButtonSubmit_Click"  />
    
        <br />
        <br />
        <asp:Label ID="LabelMessage" runat="server"></asp:Label>
    
    </div>
    </form>
</body>
</html>

Open in new window

Dale Burrell

I think you have to recreate the control tree that was sent to the browsers earlier in the event chain. I think you have to create it on postback during the onload event at the latest for the ASP.NET framework to load viewstate data for the controls etc.

Then you can modify the control tree again later in your onclick event.

GowthamNatarajan

Try this...
Creating a static table and binding it to panel helps....

<%@ Page Language="C#" %>
<!DOCTYPE html>
<script runat="server">

static Table tab = new Table();

protected void Page_Load(object sender, EventArgs e)
{
ButtonSubmit.Visible = false;
if (IsPostBack)
{
pan.Controls.Add(tab);
}
else
{
pan.Controls.Remove(tab);
}
}

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
if (DropDownList1.SelectedIndex == 0)
return;

FillTableControls();
ButtonSubmit.Visible = true;
}

protected void FillTableControls()
{
AddTextBoxRow("1", "Name");
AddTextBoxRow("2", "Address");
AddTextBoxRow("3", "Email");
}

protected void AddTextBoxRow(string suffix, string labelText)
{
TableRow row = new TableRow();

TableCell cell1 = new TableCell();
TableCell cell2 = new TableCell();
System.Web.UI.WebControls.Label label = new System.Web.UI.WebControls.Label();
System.Web.UI.WebControls.TextBox textbox = new System.Web.UI.WebControls.TextBox();

label.ID = "Label" + suffix;
label.Text = labelText;
textbox.ID = "TextBox" + suffix;
cell1.Width = 200;
cell1.Controls.Add(label);
cell2.Controls.Add(textbox);
row.Cells.Add(cell1);
row.Cells.Add(cell2);

tab.Rows.Add(row);

pan.Controls.Add(tab);
}

protected void ButtonSubmit_Click(object sender, EventArgs e)
{
for (int i = 1; i < 4; i++)
{
string controlName = "TextBox" + i.ToString();
TextBox t = (TextBox)FindControl(controlName);
LabelMessage.Text += t.Text + ", ";
}
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" >
<asp:ListItem>Select something...</asp:ListItem>
<asp:ListItem>This will do</asp:ListItem>
</asp:DropDownList>
<br />
<br />
<asp:Panel ID="pan" runat="server"></asp:Panel>
<br />
<asp:Button ID="ButtonSubmit" runat="server" Text="Postback" OnClick="ButtonSubmit_Click" />

<br />
<br />
<asp:Label ID="LabelMessage" runat="server"></asp:Label>

</div>
</form>
</body>
</html>

ASKER CERTIFIED SOLUTION

tatton777

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

tatton777

ASKER

Hello,
This question is almost exactly the same as the other that I answered. It required the same answer.

I found the answer to my question somewhere besides EE and decided to share it with the community.