How to modify the HTML in Javascript and then read the changes in ASP.NET on the postback?

Question

This is a two-fer, and I've looked in a lot of places and could not put together a solution for this particular scenario.

I will have the user enter multiple values using a single text field, such as:

<div style="margin-left: 5px; display: block;">
    <div id="divTemplateLine" style="display: none;">
        <a href="javascript:" onclick="javascript: RemoveLine(this);">x</a>
    </div>
</div>  

Using Javascript, the Add button will keep cloning divTemplateLine and include the text within the parent node.
I got all that working fine.

Now, I'd like to read all these lines (salmon, soup, miso, japanese) on the postback.
I'm assuming at this point I'm in the realm of parsing HTML, since these div's I added are not "runat" server.

One answer could be using a server-run hidden value, where the Javascript will keep appending to it.. yes that's a good solution, but I'd like to see how I can parse out the HTML elements and nodes just as I did in Javascript, because my real scenario is more complicated than a single value, so a hidden value will not quite do.

Any input and/or judgment is welcome.

Answer 1

The solution is to keep two versions of your data, one that you show on the user, and one on a hidden input that you post back and get the data that user select and keep.

For example, when your user enter the ' salmon ', you place it both on html render, and on an input hidden control with your way of serialize. When your user remove it, you remove it from your hidden control also.

At the end you going to have something like that, and you post it back and analyse it and save it on your database.

<input name="final_select" type="hidden" value="salmon;soup;miso;japanese" />

Answer 2

@BeemerGuy: take one text box and auto complete extender as follows:

<asp:TextBox ID="txtCustName" AutoPostBack="true" AutoComplete="off" runat="server"
                OnTextChanged="txtCustName_TextChanged" />
            <cc1:AutoCompleteExtender ID="ace1" TargetControlID="txtCustName" ServiceMethod="GetCustomers"
                MinimumPrefixLength="1" OnClientItemSelected="ace1_itemSelected" FirstRowSelected="true"
                runat="server" />

Auto Complete Extender has service method property which will be called when you enter text on text box and will add text box value in list view

<< * ** * ** Webmethod code is here * ** * ** >>

 ListBox list = new ListBox();
[WebMethod]
public static DataSet GetCustomers(string prefixText)
{
   list .Items.Add(New ListItem(prefixText, 0));

}