特征
UpdatePanel
一起使用min-width
属性)背景
我一直在寻找一个允许我从下拉列表中选择多个项目的控件,在互联网上搜索无效后,我决定编写自己的ASP.NET server控件,允许选择多个项目,所以有了这个MultiDropDown
控件。
使用MultiDropdown控件
控件由textbox
,图像按钮和下拉列表组成,控件的默认外观为:
单击textbox
或单击图像按钮将打开下拉区域。
选定项目时,textbox
将自动更新,以显示选定项目的逗号分隔列表,选定的行也会突出显示,通过单击项目上的任意位置而不只是checkbox
选择项目,你也可以单击"全部"项来选择/取消选择下拉列表中的所有项,控件还有自动显示选定项的aToolTip。
在搜索框中开始键入时,将筛选列表以匹配所有以键入字符开头的项目,单击Clear Search清除过滤器,并显示所有项目。
若要使用此控件,请将MultiDropdown.dll添加到Visual Studio工具箱和drag-n-drop MultiDropDown
控件,也可以添加对程序集的引用,并自己创建control指令,control指令如下所示:
<%@RegisterAssembly="MultiDropDown"Namespace="MultiDropDownLib"TagPrefix="MultiDropDownLib"%>
控件实例如下所示:
<MultiDrodownLib:MultiDrodownID="MultiDropdown1"runat="server"/>
要向控件的下拉列表中添加项,请设置它DataSource
,DataTextField
和DataValueField
属性。
DataTable dt1 = new DataTable(); dt1.Columns.Add(new DataColumn("Name", typeof(System.String))); dt1.Columns.Add(new DataColumn("ID", typeof(System.String))); dt1.Rows.Add(new string[] { "Apple", "1" }); dt1.Rows.Add(new string[] { "Orange", "2" }); dt1.Rows.Add(new string[] { "Pear", "3" }); dt1.Rows.Add(new string[] { "Banana", "4" }); dt1.Rows.Add(new string[] { "Grapes", "5" }); dt1.Rows.Add(new string[] { "Strawberry","6" }); MultiDropDown1.DataSource = dt1; MultiDropdown1.DataTextField = "Name"; MultiDropdown1.DataValueField = "ID";
若要获取选定项和选定值的列表,请使用SelectedItems
,SelectedValues
属性,SelectedItems
属性以逗号分隔,SelectedValues
属性以管道分隔。
string selectedItems = MultiDropdown1.SelectedItems;string selectedValues = MultiDropdown1.SelectedValues;
自定义MultiDropDown控件
几乎可以自定义控件的各个方面,下面是自定义控件的一个实例。
<MultiDropDownLib:MultiDropDownID="MultiDropDown2"runat="server"DropdownOnMouseOver="true"DropdownOnFocus="true"TextBoxClass="textbox1"ImageButtonClass="imagebutton1"TooltipClass="tooltip1"DropdownClass="dropdown1"/>
若要通过将鼠标悬停在textbox
上来显示下拉框,请将DropdownOnMouseOver
属性设置为true
,默认关闭此选项,以避免不必要的入侵页面上的下拉框,DropDownOnFocus
属性确定当textbox
获得焦点时是否显示下拉框,默认情况下,此属性为true
。
可以通过将TextBoxClass
属性设置为自定义CSS类来自定义textbox
。
.textbox1 { border: 1px solid maroon;background-color:#FFC2D0;color:maroon;font-weight:bold;}
可以通过将ImageButtonClass
属性设置为web项目中的自定义CSS类来自定义按钮,图像呈现为div
元素,以允许使用CSS类设置图像,(image元素不允许使用CSS类设置图像。)要将图像更改为自定义图像,请将CSS类中的background-image属性设置为所需图像文件路径的路径。确保同时设置height
和width
属性。
.imagebutton1 { display:block;background-image:url(../images/multidropdown.png);background-position:bottom;background-repeat:no-repeat;height:18px; width:21px;}
可以通过将DropdownClass
属性设置为自定义CSS类来自定义下拉列表,但是,在为dropdown声明CSS类时,还必须为td
声明单独的类,如下所示:
.dropdown1 { border: 2px solid maroon;min-width:150px;} .dropdown1td{ border: 1px dotted maroon;background-color:#FFC2D0;}
可以通过将TooltipClass
属性设置为自定义CSS类来自定义工具提示的外观。
.tooltip1 { position:absolute;display:block;padding:2px 12px 3px 7px;margin-left:5px;background:#FFC2D0;color:#222222;border:4px solid maroon; font-weight:bold;}
以下是自定义MultiDropDown
控件的示例:

探索源代码
控件是使用Visual Studio 2010/.NET框架4.0开发的,项目结构如下所示: