在服务器端获取客户端对ListBox的操作

在上一篇文章中，我们实现了ListBox控件的客户端的常用操作，但是我们可能会发现一个问题，在客户端对ListBox进行的操作，在服务器端代码中无法获得。如对一个ListBox插入了一个项目，在服务器端去获取它的项目时却获取不到那个新插入的项目，对于其它的操作，也有类似的问题。如果这个问题不能得到解决，我们探讨在客户端操作ListBox的意义就大打折扣。下面是我对这个问题的一种解决方案，虽然仍感不够理想，但先放到这里，希望能起个抛砖引玉的作用。如果哪位朋友能有更好的方案，希望能告诉我。

为了便于比较，还是利用上一篇文章中用到的例子。只是在那个例子代码的基础上，增加了一个保存按钮，一个文本框和服务器端的一些代码。全部代码如下：

1、页面代码：

<% ... @ Page Language="C#" AutoEventWireup="true" CodeFile="ListBox.aspx.cs" Inherits="ListBox"  %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title > ListBox脚本操作 </ title >
    
     < script  language  ="javascript"   > ...
    <!--
    function SelectItem(listbox1,listbox2)
    ...{
       var leftList = document.getElementById(listbox1);
       var rightList = document.getElementById(listbox2);
       //未在左列表中选择项目
       if(leftList.selectedIndex==-1)
       ...{
          return false;
       }
       else//在左侧选择了项目
       ...{
           for(var i=0;i<leftList.length;i++)
           ...{
              if(leftList.options[i].selected)
              ...{
                var value = leftList.options[i].value;
                var text = leftList.options[i].text;
                
                //验证右侧是否已经存在所选的项目
                var isExist = false;
                for(var j=0;j<rightList.length;j++)
                ...{
                   if(value == rightList.options[j].value && text == rightList.options[j].text)
                   ...{
                       isExist = true;
                       break;
                   }
                }
                //不存在则添加
                if(!isExist)
                ...{
                   rightList.options[rightList.length] = new Option(text,value);
                }
              }
           }
        }
       
       return false;
    }
    
    function Up(listbox)
    ...{
       var rightList = document.getElementById(listbox);
       if(rightList.selectedIndex == -1 || rightList.selectedIndex == 0)
       ...{
          return false;
       }
       else
       ...{
          var text = rightList.options[rightList.selectedIndex-1].text;
          var value = rightList.options[rightList.selectedIndex-1].value;
          rightList.options[rightList.selectedIndex-1].text = rightList.options[rightList.selectedIndex].text;
          rightList.options[rightList.selectedIndex-1].value = rightList.options[rightList.selectedIndex].value;
          rightList.options[rightList.selectedIndex].text = text;
          rightList.options[rightList.selectedIndex].value = value;
          rightList.selectedIndex--;
          return false;
       }
    }
    
    function Down(listbox)
    ...{
       var rightList = document.getElementById(listbox);
       if(rightList.selectedIndex == -1 || rightList.selectedIndex == rightList.length-1)
       ...{
          return false;
       }
       else
       ...{
          var text = rightList.options[rightList.selectedIndex+1].text;
          var value = rightList.options[rightList.selectedIndex+1].value;
          rightList.options[rightList.selectedIndex+1].text = rightList.options[rightList.selectedIndex].text;
          rightList.options[rightList.selectedIndex+1].value = rightList.options[rightList.selectedIndex].value;
          rightList.options[rightList.selectedIndex].text = text;
          rightList.options[rightList.selectedIndex].value = value;
          rightList.selectedIndex++;
          return false;
       }
    }
    
    function Delete(listbox)
    ...{
       var rightList = document.getElementById(listbox);
       if(rightList.selectedIndex == -1)
       ...{
          return false;
       }
       else
       ...{
          rightList.remove(rightList.selectedIndex);
          return false;
       }
    }
    
    function Save(listbox,hidden)
    ...{
       var list = document.getElementById(listbox);
       var hid = document.getElementById(hidden);
       var str = "";
       for( var i=0;i<list.length;i++)
       ...{
          str+=list.options[i].value + "," + list.options[i].text + ";";
       }
       str = str + list.selectedIndex.toString();
       hid.value =str;
       return true;
    }
    //-->
     </ script >
    
</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < div >
         < asp:ListBox  ID ="ListBox1"  runat ="server"  Height ="192px"  SelectionMode ="Multiple"
            Width ="108px" >
             < asp:ListItem  Value ="1" > 项目一 </ asp:ListItem >
             < asp:ListItem  Value ="2" > 项目二 </ asp:ListItem >
             < asp:ListItem  Value ="3" > 项目三 </ asp:ListItem >
             < asp:ListItem  Value ="4" > 项目四 </ asp:ListItem >
             < asp:ListItem  Value ="5" > 项目五 </ asp:ListItem >
             < asp:ListItem  Value ="6" > 项目六 </ asp:ListItem >
             < asp:ListItem  Value ="7" > 项目七 </ asp:ListItem >
             < asp:ListItem  Value ="8" > 项目八 </ asp:ListItem >
             < asp:ListItem  Value ="9" > 项目九 </ asp:ListItem >
             < asp:ListItem  Value ="10" > 项目十 </ asp:ListItem >
         </ asp:ListBox >
         &nbsp;   &nbsp; < asp:Button  ID ="btnSelect"  runat ="server"  Text ="==>>"   />
         &nbsp;&nbsp;   &nbsp; < asp:ListBox  ID ="ListBox2"  runat ="server"  Height ="192px"  Width ="108px" >
         </ asp:ListBox > &nbsp;
         < asp:Button  ID ="btnUp"  runat ="server"  Text ="上移"   /> &nbsp;
         < asp:Button  ID ="btnDown"  runat ="server"  Text ="下移"   /> &nbsp;
         < asp:Button  ID ="btnDelete"  runat ="server"  Text ="删除"   />
         < asp:Button  ID ="btnSave"  runat ="server"  OnClick ="btnSave_Click"  Text ="保存"   />
         < asp:TextBox  ID ="txtHidden"  runat ="server" ></ asp:TextBox ></ div >
     </ form >
</ body >
</ html >

2、后台代码：

using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;

public   partial   class  ListBox : System.Web.UI.Page
... {
    protected void Page_Load(object sender, EventArgs e)
    ...{
        if (!IsPostBack)
        ...{
            this.btnSelect.Attributes.Add("onclick", "javascript:return SelectItem('" + this.ListBox1.ClientID + "','" +
                this.ListBox2.ClientID + "');");

            this.btnUp.Attributes.Add("onclick", "javascript:return Up('" + this.ListBox2.ClientID + "');");

            this.btnDown.Attributes.Add("onclick", "javascript:return Down('" + this.ListBox2.ClientID + "');");

            this.btnDelete.Attributes.Add("onclick", "javascript:return Delete('" + this.ListBox2.ClientID + "');");

            this.btnSave.Attributes.Add("onclick", "javascript:return Save('" + this.ListBox2.ClientID + "','" +
                this.txtHidden.ClientID + "');");

            //隐藏文本框，注意不能用Visible=False隐藏，这样在客户端脚本就不能对其进行操作；
            //通过css隐藏
            this.txtHidden.Attributes.Add("style", "display : none");
        }
    }

    //ASP.net2.0 添加了"event validation"的功能, ASP.NET会检查 POST方法中的所带的参数,如果
    //认为不合法,就会抛出异常，所以重写Render方法。
    protected override void Render(HtmlTextWriter writer)
    ...{
        for (int i = 0; i < ListBox1.Items.Count; i++)
        ...{
            ClientScript.RegisterForEventValidation(this.ListBox2.UniqueID, ListBox1.Items[i].Value);
        }
        base.Render(writer);
    }

    protected void btnSave_Click(object sender, EventArgs e)
    ...{
        //服务器端获取所选的项目
        string selctItem = this.txtHidden.Text;
        if (selctItem.Length == 0 || selctItem == "-1")
        ...{
            return;
        }
        else
        ...{
            DataTable dt = new DataTable();
            dt.Columns.Add("value", typeof(string));
            dt.Columns.Add("text", typeof(string));
            string[] items = selctItem.Split(';');
            //分割后的字符串数组最后一项是被选中项目的索引;
            for (int i = 0; i < items.Length - 1; i++)
            ...{
                DataRow row = dt.NewRow();
                row[0] = items[i].Split(',')[0];
                row[1] = items[i].Split(',')[1];
                dt.Rows.Add(row);
            }

            this.ListBox2.DataSource = dt;
            this.ListBox2.DataValueField = "value";
            this.ListBox2.DataTextField = "text";
            this.ListBox2.DataBind();
            this.ListBox2.SelectedIndex = Convert.ToInt32(items[items.Length - 1]);
        }
        
        //下面添加服务器的其它操作代码
    }
}

欢迎大家探讨更多更好的解决方案！