asp.net中在前台用js增删ListBox的items

核心提示：现在的项目中,有个搜索部分,需要对搜索结果Grid显示字段让用户选择于是 用2个ListBox分别列示所有可显示字段和已选择显示字段并在前台用js控制2个Listbox之间项目的增删和移动(没办法,测试mm说后台事件有刷新的看着不舒服...)于是 搞2个html button事件如下:(先别管Hidden1)funct

现在的项目中,有个搜索部分,需要对搜索结果Grid显示字段让用户选择

于是 用2个ListBox分别列示所有可显示字段和已选择显示字段

并在前台用js控制2个Listbox之间项目的增删和移动
(没办法,测试mm说后台事件有刷新的看着不舒服...)

于是 搞2个html button
事件如下:(先别管Hidden1)

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))
　　　　　　　　　　　  {
　　　　　　　　　　　　　  //已经选择该字段
　　　　　　　　　　　　　  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;
　　　　　　　　　  }
　　　　　　　  }
　　　　　　　 
　　　　　  }
不料提交到后台时,前台增加的ListItem都没有了
仔细想想,肯定是asp.net没有在回发时加上ListBox客户端改变后的ViewState
其实也不能怪ms,连Table都没有ViewState(按照ms的说法，table只是个容器，table里面的控件才有必要维持ViewState)
ListBox这种客户端难得改变一次的东西显然是更不需要了
没办法,只好自己弄一个可以维持viewstate的东西来放listBox的Item了
于是有了上面的Hidden1

服务器端相应代码:

　　　  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();
　　　  }
这样的话,每次pageload时都根据hidden的状态更新ListBox
我们项目的目标达到了(只需要ListBox的Item，不需要考虑选定等)
如果需要处理选定项，可能需要再多一个Hidden吧。

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