Using js in the foreground to add and delete ListBox items in asp.net

In the current project, there is a search part. It is necessary to display fields in the search results Grid to allow users to choose.

Therefore, two ListBoxes are used to list all displayable fields and selected display fields respectively,

and js is used in the foreground to control the items between the two Listboxes. Add, delete and move
(No way, the test mm said that the background event is refreshed and it looks uncomfortable...)

So I made 2 html buttons
The events are as follows: (Don’t worry about Hidden1 for now)

function Test(lbFieldsSelect,value)
{
for (j = 0;j<lbFieldsSelect.length; j++)
{
if (lbFieldsSelect.options[j].value == value) return true;
}
return false;
}

function SelectField()
{
var lbFields = document.getElementById("lbFields");
var lbFieldsSelect = document.getElementById("lbFieldsSelect");
var Hidden1 = document.getElementById("Hidden1");

for (i = 0;i<lbFields.length; i++)
{
if (lbFields.options[i].selected)
{
if (Test(lbFieldsSelect,lbFields.options[i].value))
{
//The field has been selected
continue;
}

lbFieldsSelect.options.add(document.createElement("OPTION"));
lbFieldsSelect.options[lbFieldsSelect.length-1].text=lbFields.options[i].text;
lbFieldsSelect.options[lbFieldsSelect.length-1].value=lbFields.options[i].value;
Hidden1.value = Hidden1.value + "#" + lbFields.options[i].text + "@" + lbFields.options[i].value;
}
}
}

function UnSelectField()
{
var lbFields = document.getElementById("lbFields");
var lbFieldsSelect = document.getElementById("lbFieldsSelect");
var Hidden1 = document.getElementById("Hidden1");

for (i = 0;i<lbFieldsSelect.length; i++)
{
if (lbFieldsSelect.options[i].selected)
{
lbFieldsSelect.options.add(document.createElement("OPTION"));
lbFieldsSelect.options[lbFieldsSelect.length-1].text=lbFields.options[i].text;
lbFieldsSelect.options[lbFieldsSelect.length-1].value=lbFields.options[i].value;
Hidden1.value = Hidden1.value + "#" + lbFields.options[i].text + "@" + lbFields.options[i].value;
}
}

}
Unexpectedly, when submitted to the background, the ListItem added in the front desk was gone. Thinking carefully, it must be that asp.net did not add the ViewState after the change of the ListBox client when posting back.
In fact, you can’t blame ms, even the table does not have ViewState (according to ms, the table is just a container, and it is necessary for the controls in the table to maintain ViewState)
ListBox, a thing that is rarely changed by the client, is obviously not needed anymore. I have no choice but to make something that can maintain the viewstate to put the items in the listBox. So I have

the corresponding code on the Hidden1 server side above:

private void RestorelbFieldsSelect()
{
string[] sField =Hidden1.Value.Split('#');

//lstShowField.Items.Clear();
DataTable dtField = new DataTable();
dtField.Columns.Add("sDisplayName","".GetType());
dtField.Columns.Add("sFieldName","".GetType());
for (int i = 0 ; i < sField.Length ; i ++)
{
if (sField[i] == null || sField[i] == "") continue;
DataRow row = dtField.NewRow();
row[0] = sField[i].Split( '@')[0 ];
row[1] = sField[i].Split( '@')[1 ];
dtField.Rows.Add(row);
}

lbFieldsSelect.DataSource = dtField;
lbFieldsSelect.DataTextField = "sDisplayName";
lbFieldsSelect.DataValueField = "sFieldName";
lbFieldsSelect.DataBind();
}
In this case, the ListBox will be updated according to the hidden status every time the page is loaded.
The goal of our project has been achieved (only the Item of the ListBox is needed, there is no need to consider selection, etc.)
If you need to process selected items, you may need another Hidden.

http://www.cnblogs.com/calmzeal/archive/2006/07/26/460068.html