效果图:
目标:选择DropDownList,左侧ListBox从服务器端获取对应项。点击Button,对左、右侧ListBox进行操作。
最后在服务器端获取右侧ListBox的值
过程:
1、首先是给DropDownList弄个数据源,实际开发中一般都是从数据库去。我这演示方便就随便new 了个DataTable。
1private void DllBindData()
2 {
3 DataTable table = new DataTable("MyCategory");
4 DataColumn column;
5 DataRow row;
6 column = new DataColumn();
7 column.DataType = System.Type.GetType("System.Int32");
8 column.ColumnName = "iSysCode";
9 table.Columns.Add(column);
10
11 column = new DataColumn();
12 column.DataType = System.Type.GetType("System.String");
13 column.ColumnName = "cName";
14 table.Columns.Add(column);
15
16 row = table.NewRow();
17 row["iSysCode"] = 1;
18 row["cName"] = "编程语言";
19 table.Rows.Add(row);
20
21 row = table.NewRow();
22 row["iSysCode"] = 2;
23 row["cName"] = "编程工具";
24 table.Rows.Add(row);
25
26 row = table.NewRow();
27 row["iSysCode"] = 3;
28 row["cName"] = "数据库";
29 table.Rows.Add(row);
30
31 ddlCategory.DataSource = table.DefaultView;
32 ddlCategory.DataValueField = "iSysCode";
33 ddlCategory.DataTextField = "cName";
34 ddlCategory.DataBind();
35 }
2、有了数据,下面就开始操作了。
在DropDownList的客户端事件onchange中添加choose函数,choose中调用sendRequest_Item向服务器请求相应的数据
2
3、服务器端用了个WebService返回数据
4、分析操作返回的数据(XML格式)这个是关键,在这花了我好长一段时间:用xmlDoc.getElementsByTagName("Item")方法得到的options,长度length总是为0,但确实是有数据返回;用responseText可以正确取出数据。在网上搜了半天也没找到一个适当的解决方法。郁闷n久之后,找到了问题所在,原来是数据被Encode了。这好办,咱就给他DeEncode呗。
5、这样一来,DropDownList就可以和左侧的ListBox实现联动了。接下来是如何操作它了。这里我只写了最上面两个按钮的点击实现,大家可以根据自己的需要实现其他的两个。看一下JS代码:
6、进行到这里,右侧的ListBox已经有了结果项了。剩下的是如何在服务器端获取这部分数据。Test了几下表明用Request.Form这种根本无法直接获取到所需数据。那只好转个弯,先将数据放在hiddenField里,然后在服务器端方法里取出来。OK,大功告成!
感受:
本来以为弄这么个小东西顶多一上午时间就够了,没想到中间出现了不少问题,一个个解决后,发现竟然用了我一整天(包括晚上啊)的时间。唉,看来做什么事都不能大意啊。另外,大家有什么更好的方法,欢迎一起研究研究,呵呵!