Get client side HTML changes on postback

Question

I want to add rows to a table with javascript, but I also want to be able to find out what those rows are on postback. Is there a way to do that?

I also want to be able to populate the original rows in the table from the server (I'm thinking with a repeater). Is it still possible to do that?

That's not much of a description but I think that covers it...

The code currently looks something like this

<table id="myTable">
<tr> <td> some static row </td> </tr>
<asp:repeater id="rptTest" runat="server">
<HeaderTemplate>
    <tr class="dgheader">
        <th> head1 </th>
        <th> head2 </th>
        <th></th>
    </tr>
</HeaderTemplate>
<ItemTemplate>
    <tr class="<%# (Container.ItemIndex%2 == 0) ? "dgitem" : "dgalternatingitem" %>">
        <td><%# Eval("val1") %> </td>
        <td><%# Eval("val2") %> </td>
        <td><a class="dgdeletebutton" href="javascript:delete(this)"></a></td>
    </tr>
</ItemTemplate>
</asp:repeater>
</table>

At the moment all I'm wondering is how, server side, I can get a version of the table that has whatever changes I made client side.

Answer 1

In order to get any information from a client in the manner you describe, you need to include a field in your form submit.

You will probably want hidden(s) field. Any time you add a row, either add a hidden field for each value you want to capture (such as val1 and val2) or have one hidden field, and when you add a row, append the information you want to the existing row.

I would warn against posting straight html, you probably only need the values not the full markup, and you most likely don't want to sanitize the html and parse it for the information you want.

So to get you a head start you can add hidden inputs:

<tr class="<%# (Container.ItemIndex%2 == 0) ? "dgitem" : "dgalternatingitem" %>">
    <input type="hidden" name="Row[1].val1" value="myvalue" />
    <td><%# Eval("val1") %> </td>
    <input type="hidden" name="Row[1].val2" value="myvalue" />
    <td><%# Eval("val2") %> </td>
    <td><a class="dgdeletebutton" href="javascript:delete(this)"></a></td>
</tr>

You can then get the submitted values on the backend:

HttpContext.Current.Request.Form["Row[1].val1"]

This is from memory, the line above might not be correct.