[翻译]下拉列表多选控件MultiDropDown

源代码下载： http://dev.mjxy.cn/a-Multi-select-drop-down-list-control-MultiDropDown.aspx

翻译：白水 引用请注明出处<敏捷学院>

 

介绍

ASP.NET的DropDownList控件只允许我们选择一个项，为了克服这个限制，我写了一个MultiDropDown ASP.NET服务器控件，允许选择多项。此控件支持同一个网页的多个实例。

 

MultiDropdown控件的使用

控件包含一个文本框，一个图像按钮和下拉列表。默认的样式如下：

 

单击文本框或图片按钮将展开下拉列表

 

 

当选择项目后，文本框会自动显示用逗号隔开的选中项。被选择中的项使用不同的样式显示，你可以单击要选择项的任意位置，并不一定非要是复选框。你也可以单击“全部”项来选择或取消所有项目。控件内有一个内容的工具提示用来显示已选中的项目。

 

 

 

要使用这个控件，添加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

02	ID="MultiDropDown2"

03	runat="server"

04	DropdownOnMouseOver="true"

05	TextBoxClass="textbox1"

06	ImageButtonClass="imagebutton1"

07	TooltipClass="tooltip1"

08	DropdownClass="dropdown1"

09	SelectAllAtStartup="true"

10

/>

 

设置DropdownOnMouseOver属性为true是当鼠标经过TextBox的时候会展开下拉列表。DrowDownFocus决定当下拉列表显示时TextBox是否接收焦点，默认值是true。

 

textbox可以设置TextBoxClass属性自定义样式

 

1

.textbox1

2

{

3	border: 1px solid maroon;

4	background-color:#FFC2D0;

5	color:maroon;

6	font-weight:bold;

7

}

按钮可以使用ImageButtonClass属性自定义样式。图片呈现在div元素内，设置样式background-image就可以改变图片。还可以使用height和width来设置高度和宽度。

 

1	.imagebutton1

2

{

3	display:block;

4	background-image:url(../images/multidropdown.png);

5	background-position:bottom;

6	background-repeat:no-repeat;

7	height:18px;

8	width:21px;

9

}

使用DropdownClass属性设置下拉列表的样式。为td增加样式可以自定义dropdown的分隔外观：

 

01	.dropdown1

02

{

03	border: 2px solid maroon;

04	min-width:150px;

05

}

06

07	.dropdown1 td

08

{

09	border: 1px dotted maroon;

10	background-color:#FFC2D0;

11

}

TooltipClass属性设置提示的样式：

 

01	.tooltip1 {

02	position:absolute;

03	display:block;

04	padding:2px 12px 3px 7px;

05	margin-left:5px;

06	background:#FFC2D0;

07	color:#222222;

08	border:4px solid maroon;

09	font-weight:bold;

10

}

下面是一个自定MultiDropDown的控件外观：

 

源代码结构

这个控件是使用Visual Studio 2010/.NET Framework 4.0。你可以做少量的修改来兼容以前的.net版本。项目结构如下：

 

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")

 

页面呈现的标记看起来像这样：

 

1	<script src="http://www.codeproject.com/Test/WebResource.axd?d=JA_U3mGno1O0AS_cetvr4oQvuwmDwmapV40Q5-daDigeJvW5b02MkDE-6WzvJ1qzJcIRasEbn9S-0WWjgjLSCq7jY1MMtoQe_fVrDuMLxnMX_Cp3ko0tZ6wmlon77boz5c3UXBvHxc0a2FZIGl-Xxw2&t=634450289371679687" type="text/javascript"></script>

2	<SPAN style="FONT-SIZE: 14px"><SPAN style="FONT-FAMILY: Verdana"> </SPAN></SPAN>

其他的JavaScript文件和图片也是使用同样的方法配置。

保存在资源中的样式表的呈现使用了一个类似的技术。创建一个HtmlLink控件并添加到页面的head区域，代码如下：

1	protected override void OnPreRender(EventArgs e) {

2	base.OnPreRender(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);

8

}

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类。

转载于:https://www.cnblogs.com/xingquan/archive/2011/07/18/2109359.html