使用ascx和Div来扩充列表框选择功能

在项目开发中，我们经常会通过使用列表框或组合框来解决选择问提。
但在列表框中，容纳的信息实在是有限，而且显示的条目也不能一次
性太多，那样对用户的操作也会造成不便。

有时可以通过用其它控件来替换掉列表框的展现部分，比如使用DataView或
DataList控件等，这可用自定义控件或用户控件来完成，这里介绍一个
常用的简单方法（使用用户控件）。

源码下载

方法是:
先建立一个ascx控件.

(1)
ascx控件中再分出"txtDiv"和"listDiv"两个Div层.
"txtDiv"层中使用Css将内嵌的Label和div等Html元素,画出伪列表框样式.
"listDiv"层则通过一个DataList,负责将"伪列表框"的内容展现出来.

之所以各使用独立的div是为了能通过客户端脚本来模拟列表框的展开和收缩,
能及时的将"listDiv"层显示和隐藏起来.

(2)
为"listDiv"层的DataList添加搜索和分页功能，这样再多的内容也无须担心。
DataList的列中还需有一个选中列，这样当前选中项的文本和值，才能通过脚本。
将其转移到对应的隐藏控件中。

(3)
父页面通过ascx控件的ItemText和ItemValue属性,
读取ascx页中的隐藏控件，来得到当前选中项的文本和值。

最后的使用效果为:


(图1-初始界面)



(图2-显示列表)


(图3-搜索和翻页)



(图4-选中后隐藏显示列表)


(图5-显示选中结果)


ascx控件的主要属性说明:

PageSize :列表的页尺寸
TableName :读取的数据表名
ItemText :数据表中用作项文本的字段
ItemValue :数据表中用作项值的字段

GetValue :得到当前的选中值.
GetText :得到当前的选中文本.