ASP.NET dynamically-generated TableRows won't persist between postbacks

Question

In the ASPX

<asp:Table ID="superTable" runat="server" Width="100%">
    <%--populate me on the fly!--%>
</asp:Table>

<asp:Button ID="btnAddRow" runat="server" CausesValidation="false" Text="Add Row" onclick="btnAddRow_Click" Width="90%"/>

<asp:Button ID="btnRemoveRow" runat="server" CausesValidation="false" Text="Remove Last Row" onclick="btnRemoveRow_Click" Width="90%"/> 

<asp:Button ID="btnSubmit" runat="server" Text="1" onclick="btnSubmit_Click"  Width="90%"/>

Relevant bits of CodeBehind

protected void Page_Load(object sender, EventArgs e)
    {if (!IsPostBack){ writeHeader(); makeMeARow(); }}

protected void btnAddRow_Click(object sender, EventArgs e)
{   
    if (int.Parse(btnSubmit.Text) <= 20)
    {   int b = superTable.Rows.Count+1;

        writeHeader();
        btnSubmit.Text = (int.Parse(btnSubmit.Text) + 1).ToString();

        for (int a = 1; a <= int.Parse(btnSubmit.Text); a++)
            { makeMeARow(); }
    }
    else{/*tell user they can't do that! Max of 20 rows as noted by form requirements */}
}

private void writeHeader()
{
    //= == create row == =//
    TableHeaderRow tempHeaderRow = new TableHeaderRow();//make row

    //= == create cells == =//
    TableHeaderCell tempHeaderCell01 = new TableHeaderCell();
    TableHeaderCell tempHeaderCell02 = new TableHeaderCell();
    TableHeaderCell tempHeaderCell03 = new TableHeaderCell();

    tempHeaderCell01.Text = "Call Number";  tempHeaderCell01.Width = Unit.Percentage(33);
    tempHeaderCell02.Text = "Author";       tempHeaderCell02.Width = Unit.Percentage(33);
    tempHeaderCell03.Text = "Title";        tempHeaderCell03.Width = Unit.Percentage(33);

    //= == add TableCells to TableRow == =//
    tempHeaderRow.Cells.Add(tempHeaderCell01);
    tempHeaderRow.Cells.Add(tempHeaderCell02);
    tempHeaderRow.Cells.Add(tempHeaderCell03);

    //superTable.Rows.AddAt(superTable.Rows.Count, tempRow);
    superTable.Rows.Add(tempHeaderRow);
}

protected void btnRemoveRow_Click(object sender, EventArgs e)
{   int b = superTable.Rows.Count - 1;

    writeHeader();
    btnSubmit.Text = (int.Parse(btnSubmit.Text) - 1).ToString();
    for (int a = 1; a <= int.Parse(btnSubmit.Text); a++)
    {makeMeARow();}   
}
private void makeMeARow()
{
    //= == maybe off by one? == =//
    string rowCount = superTable.Rows.Count.ToString("00");

    //= == create row == =//
    TableRow tempRow = new TableRow();//make row

    //= == create cells == =//
    TableCell tempCell01 = new TableCell();
    TableCell tempCell02 = new TableCell();
    TableCell tempCell03 = new TableCell();

    //= == create TextBoxes == =//
    TextBox tempTextBox01 = new TextBox();
    TextBox tempTextBox02 = new TextBox();
    TextBox tempTextBox03 = new TextBox();

    //= == change the ID of TableRow == =//
    tempRow.ID = "tableRow_" + rowCount;

    //= == change the IDs of TableCells == =//
    tempCell01.ID = "tableCell_" + rowCount + "_01";
    tempCell02.ID = "tableCell_" + rowCount + "_02";
    tempCell03.ID = "tableCell_" + rowCount + "_03";

    //= == change the IDs of TextBoxes == =//
    tempTextBox01.ID = "txtCallNumber_" + rowCount;
    tempTextBox02.ID = "txtAuthor_" + rowCount;
    tempTextBox03.ID = "txtTitle_" + rowCount;

    //= == change TextBox widths to 90%;
    tempTextBox01.Width = Unit.Percentage(90);
    tempTextBox02.Width = Unit.Percentage(90);
    tempTextBox03.Width = Unit.Percentage(90);

    //= == add TextBoxes to TableCells == =//
    tempCell01.Controls.Add(tempTextBox01);
    tempCell02.Controls.Add(tempTextBox02);
    tempCell03.Controls.Add(tempTextBox03);

    //= == add TableCells to TableRow == =//
    tempRow.Cells.Add(tempCell01);
    tempRow.Cells.Add(tempCell02);
    tempRow.Cells.Add(tempCell03);

    //add TableRow to superTable
    //superTable.Rows.AddAt(superTable.Rows.Count, tempRow);
    superTable.Rows.Add(tempRow);
}

Okay, so, my problem; -when I hit either the "Add Row" or "Remove Row" button, the data in the cells don't persist between postbacks. The relevant rows and cells hold the same IDs, but don't persist data. Why not?

Answer 1

Dynamic controls must be re-added to the form on each postback. Typically this is done during the Init phase of the page's lifecycle. The controls that you have added dynamically DO actually have ViewState. When the appropriate control is re-added to the control tree using the exact same ID it had before, it should reappear with the values that were persisted in ViewState.

Check out this article for simple tips on using dynamic controls or you can check out this tutorial from 4 Guys from Rolla for a more in-depth look.