Preserving dynamic content on Postback

Question

I have a table that by default, looks like so:

<table width="650" id="myTable" runat="server">
    <tbody>
        <tr>
            <td class="cellWidth300 bottomBorder topBorder">Column1</td>
            <td class="cellWidth125 leftBorder topBorder bottomBorder textCenter">Column2</td>
            <td class="cellWidth100 leftBorder topBorder bottomBorder textCenter">Column3</td>
            <td class="cellWidth125 leftBorder rightBorder topBorder bottomBorder textRight">Column4</td>
        </tr>
        <tr>
            <td class="cellWidth300"><input type="text" size="29" runat="server"/></td>
            <td class="cellWidth125 leftBorder textCenter"><input type="text" size="9" class="units commas" runat="server"/></td>
            <td class="cellWidth100 leftBorder textCenter"><input type="text" size="8" class="value commas" runat="server"/></td>
            <td class="cellWidth125 leftBorder rightBorder textRight"><input type="text" size="11" readonly="readonly" tabindex="-1" class="totalA1 autoTotal" runat="server"/>&nbsp;</td>
        </tr>
        <tr>
            <td class="cellWidth300"><input id="Text2" type="text" size="29" runat="server"/></td>
            <td class="cellWidth125 leftBorder textCenter"><inputtype="text" size="9" class="units commas" runat="server"/></td>
            <td class="cellWidth100 leftBorder textCenter"><input  type="text" size="8" class="value commas" runat="server"/></td>
            <td class="cellWidth125 leftBorder rightBorder textRight"><input type="text" size="11" readonly="readonly" tabindex="-1" class="totalA1 autoTotal" runat="server"/>&nbsp;</td>
        </tr>
        <tr>
            <td class="cellWidth300"><input  type="text" size="29" runat="server"/></td>
            <td class="cellWidth125 leftBorder textCenter"><input type="text" size="9" class="units commas" runat="server"/></td>
            <td class="cellWidth100 leftBorder textCenter"><input type="text" size="8" class="value commas" runat="server"/></td>
            <td class="cellWidth125 leftBorder rightBorder textRight"><input type="text" size="11" readonly="readonly" tabindex="-1" class="totalA1 autoTotal" runat="server" />&nbsp;</td>
        </tr>
    </tbody>
</table>

I have a chunk of jquery that generates a new row every time you type something into the last row. it looks like so:

var _addRow ='<tr>' +
'<td width="300"><input type="text" size="29" runat="server" ></td>' +
'<td width="125" class="leftBorder textCenter"><input type="text" size="9" class="units commas" runat="server" /></td>' +
'<td width="100" class="leftBorder textCenter"><input type="text" size="8" class="value commas" runat="server" /></td>' +
'<td width="125" class="leftBorder rightBorder textRight"><input type="text" size="11" readonly="readonly" tabindex="-1" class="totalA1 autoTotal" runat="server" />&nbsp;</td>' +
'</tr>';

function initialize() {
$(document).on('keypress', '#myTable tr:last input', AddRowToMyTable);
}

function AddRowToMyTable() {
$('#myTable tr:last').after(_addRow);
}

This all works just super great.

Now, I have do a couple things that require a postback. One of them is I save the data in the table in XML and another is I can create a PDF out of the data in the table. Every time I postback though, it loses all the dynamically generated data before the data even gets there. That is to say, if I write up an XML file with all the data, anything past the third row (the last row that's not dynamically generated) doesn't even show up.

The odd thing is that there was a time I had this all working. At the time, I thought I saved the data and reloaded it immediately to get my tables back, but that isn't working any more and I'm not sure why.

My first major question is this: If I postback to the server, shouldn't all the data in the dynamic rows be sent too? That is to say, if I have data in the 6th row, even though it will be lost when the postback is complete, shouldn't it still be sent to the server before getting wiped out? My saving algorithm looks like so:

private void WriteMyTableToXML()
{
    HtmlInputText tContent;
    HtmlTableRow tRow;

    int i = 1; //First row is headers, which we don't want.

    _Writer.WriteStartElement("MyTable");

    while (i < tblCropsAndFeed.Rows.Count - 1) // last row should always be blank.  We can skip it
    {
        tRow = tblCropsAndFeed.Rows[i];

        _Writer.WriteStartElement("Entry");

        string tInputBox0 = tRow.Cells[0].Controls[0].ClientID;
        tContent = (HtmlInputText)tRow.FindControl(tInputBox0);
        _Writer.WriteStartElement("name");
        _Writer.WriteString(tContent.Value);
        _Writer.WriteEndElement();

        string tInputBox1 = tRow.Cells[1].Controls[0].ClientID;
        tContent = (HtmlInputText)tRow.FindControl(tInputBox1);
        _Writer.WriteStartElement("units");
        _Writer.WriteString(tContent.Value);
        _Writer.WriteEndElement();

        string tInputBox2 = tRow.Cells[2].Controls[0].ClientID;
        tContent = (HtmlInputText)tRow.FindControl(tInputBox2);
        _Writer.WriteStartElement("value");
        _Writer.WriteString(tContent.Value);
        _Writer.WriteEndElement();

        _Writer.WriteEndElement();

        i++;
    }

    _Writer.WriteEndElement();
}

Second, is there someway to actually just preserve the state of the page. Doesn't something like this exist?

If(IsPostBack)
    {
    DontResetThePage();
    }

Answer 1

So I believe the best option here would be to use an ASP GridView with a server side binding. When you edit or add rows to the gridview it will be automatically rebuilt on postback using the data you feed from the created XML file.