源代码下载: http://dev.mjxy.cn/a-Multi-select-drop-down-list-control-MultiDropDown.aspx
翻译:白水 引用请注明出处<敏捷学院>
介绍
ASP.NET的DropDownList控件只允许我们选择一个项,为了克服这个限制,我写了一个MultiDropDown ASP.NET服务器控件,允许选择多项。此控件支持同一个网页的多个实例。
MultiDropdown控件的使用
控件包含一个文本框,一个图像按钮和下拉列表。默认的样式如下:
![](http://dev.mjxy.cn/uploadfiles/images/mddv2-1.png)
单击文本框或图片按钮将展开下拉列表
![](http://dev.mjxy.cn/uploadfiles/images/mddv2-2.png)
当选择项目后,文本框会自动显示用逗号隔开的选中项。被选择中的项使用不同的样式显示,你可以单击要选择项的任意位置,并不一定非要是复选框。你也可以单击“全部”项来选择或取消所有项目。控件内有一个内容的工具提示用来显示已选中的项目。
![](http://dev.mjxy.cn/uploadfiles/images/mddv2-3.png)
要使用这个控件,添加MultiDropDown.dll到你的VistulStudio工具箱,拖拽到要使用的地方即可。你还可以添加引用使用控件引用的语法,类似下面这样:
1 |
<%@ Register Assembly= "MultiDropDown" Namespace= "MultiDropDownLib" TagPrefix= "MultiDropDownLib" %> |
向页面增加控件:
1 |
<MultiDropDownLib:MultiDropDown ID= "MultiDropDown1" runat= "server" /> |
添加下拉项数据,设置他的DataSource,DataTextField和DataValueField属性。
01 |
DataTable dt1 = new DataTable(); |
02 |
dt1.Columns.Add( new DataColumn( "Name" , typeof (System.String))); |
03 |
dt1.Columns.Add( new DataColumn( "ID" , typeof (System.String))); |
04 |
dt1.Rows.Add( new string [] { "Apple" , "1" }); |
05 |
dt1.Rows.Add( new string [] { "Apricot" , "2" }); |
06 |
dt1.Rows.Add( new string [] { "Avocado" , "3" }); |
07 |
dt1.Rows.Add( new string [] { "Banana" , "4" }); |
08 |
dt1.Rows.Add( new string [] { "Bilberry" , "5" }); |
09 |
MultiDropDown1.DataSource = dt1; |
10 |
MultiDropDown1.DataTextField = "Name" ; |
11 |
MultiDropDown1.DataValueField = "ID" ; |
12 |
MultiDropDown1.DataBind(); |
使用 SelectedItems,SelectedValues属性获取选择的项。SelectedItems属性是用","分隔的选中项,SelectedValues是用"|"分隔的的选中项。
1 |
string selectedItems = MultiDropdown1.SelectedItems; |
2 |
string selectedValues = MultiDropdown1.SelectedValues; |
自定义 MultiDropDown 控件
控件几乎每一个地方都可以被自定义。下面是一个自定的示例:
01 |
<MultiDropDownLib:MultiDropDown |
04 |
DropdownOnMouseOver= "true" |
05 |
TextBoxClass= "textbox1" |
06 |
ImageButtonClass= "imagebutton1" |
07 |
TooltipClass= "tooltip1" |
08 |
DropdownClass= "dropdown1" |
09 |
SelectAllAtStartup= "true" |
设置DropdownOnMouseOver属性为true是当鼠标经过TextBox的时候会展开下拉列表。DrowDownFocus决定当下拉列表显示时TextBox是否接收焦点,默认值是true。
textbox可以设置TextBoxClass属性自定义样式
3 |
border : 1px solid maroon ; |
4 |
background-color : #FFC2D0 ; |
按钮可以使用ImageButtonClass属性自定义样式。图片呈现在div元素内,设置样式background-image就可以改变图片。还可以使用height和width来设置高度和宽度。
4 |
background-image : url (../images/multidropdown.png); |
5 |
background-position : bottom ; |
6 |
background-repeat : no-repeat ; |
使用DropdownClass属性设置下拉列表的样式。为td增加样式可以自定义dropdown的分隔外观:
03 |
border : 2px solid maroon ; |
09 |
border : 1px dotted maroon ; |
10 |
background-color : #FFC2D0 ; |
TooltipClass属性设置提示的样式:
04 |
padding : 2px 12px 3px 7px ; |
08 |
border : 4px solid maroon ; |
下面是一个自定MultiDropDown的控件外观:
![](http://dev.mjxy.cn/uploadfiles/images/mddv2-4.png)
源代码结构
这个控件是使用Visual Studio 2010/.NET Framework 4.0。你可以做少量的修改来兼容以前的.net版本。项目结构如下:
![](http://dev.mjxy.cn/uploadfiles/images/mddv2-5.png)
MultiDropDown.cs文件是控件的实现代码,继承自System.Web.UI.WebControls.WebControl. 它仅实现了System.Web.UI.INamingContainer接口,用来确保ASP.NET运行时为控件的分配唯一的ID。这样才可以允许一个页面可以使用多个MultiDropDown控件。控件是由HTML文本框(HtmlImputText),HTML图像(HtmlImage),下拉区域(HtmlGenericControl)和一个Div元素的下拉区域,包含ASP.NET GridView的还有HtmlTalbeRow,HtmlTableCell对象组成。我决定使用GridView控件来代替html table是为了更容易的数据绑定。
子控件在控件的内部组成,这将更容易的照顾到ViewState。子控件的初始化重写了OnInit()方法。重写了CreateChildControls()方法来添加子控件。重写了OnPreRender()方法注入样式表的链接标签。
JavaScrpt文件,样式表和默认的按钮图片是嵌入到控件的资源中。你不妨观察项目文件,了解如何使用WebResources。我将解释如何在页面呈现一个JavaScript的标记<script>。
右键单击文件选择属性,在属性对话框设置属性Bulid Action的值为 'Enbed Resource',下一步,打开AssemblyInfo.cs文件添加如下行:
[assembly: System.Web.UI.WebResource("MultiDropDownLib.js.multidropdown.js", "text/javascript")]
其中MultiDropDownLib是项目名称,js是文件夹,multidropdown.js是实际的脚本名称。确定你指定的内容类型。然后,你可以使用下面的代码在页面注入JavaScript文件。
1 |
Page.ClientScript.RegisterClientScriptResource( this .GetType(), "MultiDropDownLib.js.multidropdown.js" ) |
页面呈现的标记看起来像这样:
2 |
<SPAN style= "FONT-SIZE: 14px" ><SPAN style= "FONT-FAMILY: Verdana" > </SPAN></SPAN> |
其他的JavaScript文件和图片也是使用同样的方法配置。
保存在资源中的样式表的呈现使用了一个类似的技术。创建一个HtmlLink控件并添加到页面的head区域,代码如下:
1 |
protected override void OnPreRender(EventArgs e) { |
3 |
HtmlLink linkCSS = new HtmlLink(); |
4 |
linkCSS.Href = Page.ClientScript.GetWebResourceUrl( this .GetType(), "MultiDropDownLib.css.multidropdown.css" ); |
5 |
linkCSS.Attributes.Add( "rel" , "stylesheet" ); |
6 |
linkCSS.Attributes.Add( "type" , "text/css" ); |
7 |
Page.Header.Controls.Add(linkCSS); |
GridView有3列数据:template列放checkbox另外两列存放DataTextFiled和DataValueField属性。
- checkboxes是第一列,它有一个onclick事件用来选择/取消行。
- 第二列显示项目的文字,并使用JavaScript将值使用","分隔传递到文本框(txtNameList)。TextBox的Selecteditems属性返回选择的值。
- 第三列是隐藏的,使用JavaSciript来控制(hndValueList)的选定。通过SelectedValues属性返回选定的值的列表。
显示 /隐藏下拉列表,选中/取消项目的脚本文件主要在 multidropdown.js文件中实现。函数ShowDropdown(),HideDropdown(),HideAllDropdowns(),SelectRow()(TR的onclick),SelectItem()(Checkbox的onclick),SelectAll()所实现的功能正如它们的函数名称。参数controlId是制定这些脚本应该在哪个控件上工作。这样可以在ASP.NET页面上使用多个实例。initialize()函数是重新选定项目的一个完整回发或ajax的回发。这个函数在mddinitialize.js文件中。完整的回发处理在 windows.onload事件中。部分回发处理在 pageLoad(sender,args)函数中。mddtoltip.js文件包含了tooltip类。