MultiDropDown v2: ASP.NET的多重选择下拉控件

分享于 

15分钟阅读

Web开发

  繁體

介绍

ASP.NET 附带的DropDown 控件允许我们只选择一个项目。 为了克服这个限制,我编写了 MultiDropDown ASP.NET 服务器控件,允许从一个可以检查的项目列表中选择。 这里控件支持同一网页中的多个实例。 这个控件最好的部分是,你不必将任何其他外部文件添加到项目中,控件会自动执行所有的场景,从而使场景变得更加复杂。

功能

  • 在同一页面上支持多个实例。
  • 文本框,按钮,下拉列表和工具提示的外观可以自定义。
  • 不需要外部文件,如JavaScript或者样式表。 这种控制处理一切。
  • 兼容 ASP.NET AJAX。适用于 UpdatePanel
  • 使用普通JavaScript不需要任何JavaScript框架( 像 jQuery,mootools,等等 )。
  • 使用 IE,Firefox,Chrome,Opera 和 Safari。 ( Safari和 Chrome 似乎不遵守下拉属性的min-width )。
  • 仅drag-n-drop到你的页面并开始使用控件。
  • 允许搜索项目。

背景

我一直在寻找一个允许从下拉中选择多个项目,在搜索互联网之后,我决定写自己的ASP.NET 服务器。 结果MultiDropDown 控件。

使用MultiDropdown控件

控件由 textbox。图像按钮和下拉列表组成。 控件的默认外观为:

。multidropdowncontrol/mddv2-1.png

单击 textbox 或者图像按钮将显示下拉区域。

。multidropdowncontrol/mddv2-2.png

选中项目后,textbox 会自动更新以显示所选项目的逗号分隔列表。 选定的行也高亮显示。 你可以通过单击项目上的任意位置来选择项目,而不只是单击 checkbox。 你还可以单击 '全部' 项目来选择/取消选择下拉列表中的所有项目。 控件还具有内置工具提示,自动显示所选项目。

当你在搜索框中键入时,将筛选列表以 MATCH 键入所键入的所有字符。 单击清除搜索按钮清除过滤器并显示所有项目。

。multidropdowncontrol/mddv2-3。png

要使用这里控件,请将 MultiDropdown.dll 添加到 Visual Studio 工具箱,并对 MultiDropDown 控件进行 drag-n-drop。 还可以添加对程序集的引用,并自己创建控件指令。 控制指令如下所示:

<%@RegisterAssembly="MultiDropDown"Namespace="MultiDropDownLib"TagPrefix="MultiDropDownLib"%>

控件实例如下所示:

<MultiDrodownLib:MultiDrodownID="MultiDropdown1"runat="server"/>

要将项添加到控件下拉列表中,请设置它的DataSourceDataTextFieldDataValueField 属性。

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

若要获取所选项和选定值的列表,请使用 SelectedItemsSelectedValues 属性。 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类设置图像。 如果不允许图像被设置为自定义图像,请将CSS类中的属性设置为所需图像文件路径的路径。 请确保设置了 heightwidth 属性。

.imagebutton1 
{
 display:block;background-image:url(../images/multidropdown.png);background-position:bottom;background-repeat:no-repeat;height:18px; 
 width:21px;}

下拉列表可以通过将 DropdownClass 属性设置为自定义的CSS类来进行定制。 但是,在为下拉菜单声明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 控件的示例:

。multidropdowncontrol/mddv2-4.png

探索源代码

控件是使用 Visual Studio 2010/.NET 框架 4.0开发的。 不过,只要稍加调整,就可以使用旧版本的.NET。 项目结构如下所示:

。multidropdowncontrol/mddv2-5.png

MultiDropDown.cs 文件包含 ASP.NET 服务器控件,它继承自 System.Web.UI.WebControls.WebControl 函数还实现 marker 接口 System.Web.UI.INamingContainer,以确保 ASP.NET 运行时基于控件的MultiDropDown Id为子控件分配惟一名称。 这帮助我们以这样的方式编写代码,可以将控件的多个实例放在同一个 ASP.NET 页面。 控件由 Html textbox ( HtmlInputText )。Html图像( HtmlImage )。下拉区域( HtmlGenericControl ) 和下拉列表项以及用于排列子控件的Html table ( 带有关联 HtmlTableRowHtmlTableCell 对象的HtmlTable ) 组成。 我决定使用 GridView 控件而不是 HTML table 来简化数据绑定。

控件的子控件由 inside 组成,它自动处理控件的子 ViewState。 子控件在重写的OnInit() 方法中初始化。 重写 CreateChildControls() 方法将子控件添加到控件 Collection的服务器控件中,并执行实际的数据绑定。 重写 OnPreRender() 方法以插入样式表的link 标记。

JavaScript文件。样式表和默认按钮图像被嵌入 inside 控件程序集作为 WebResource。 这使得控件可以将嵌入资源作为资源通过网络提供。 你可能希望搜索CodeProject以了解如何使用 WebResources。 我将解释如何在页面中将主JavaScript文件呈现为 <script> 标记。

右键单击文件并从上下文菜单中选择'属性',然后在属性窗口中将'生成操作'属性设置为'嵌入资源'。 接下来,打开 AssemblyInfo.cs 文件并添加以下行:

[assembly: System.Web.UI.WebResource("MultiDropDownLib.js.multidropdown.js", 
 "text/javascript")]

其中 MultiDropDownLib 是项目名,/js是文件夹结构和 multidropdown.js is是实际的文件名。 确保指定了精确的内容类型。 然后可以使用下面的代码将JavaScript文件注入到网页。

Page.ClientScript.RegisterClientScriptResource(this.GetType(), 
 "MultiDropDownLib.js.multidropdown.js")

呈现的脚本标记将类似于下面这样:

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

其他JavaScript文件和默认按钮图像以类似的方式呈现。

通过将css场保存为 WebResource,使用类似的技术呈现样式表。 使用以下代码创建 HtmlLink 控件并将它的添加到页面的header 中:

protectedoverridevoid OnPreRender(EventArgs e) {
 base.OnPreRender(e);
 HtmlLink linkCSS = new HtmlLink();
 linkCSS.Href = Page.ClientScript.GetWebResourceUrl(this.GetType(), 
 "MultiDropDownLib.css.multidropdown.css");
 linkCSS.Attributes.Add("rel", "stylesheet");
 linkCSS.Attributes.Add("type", "text/css");
 Page.Header.Controls.Add(linkCSS);
}

GridView 有三个列: DataTextFieldDataValueField 属性的复选框和两个绑定列的模板列。

  • 第一列( 以及 tr 元素本身) 中的复选框有一个 onclick 事件,该事件检查/。
  • 第二列包含项的文本,JavaScript使用这里值填充文本框( txtNameList ),使用逗号分隔的项列表。 文本框的值由 SelectedItems 属性返回。
  • 保存项的值的第三列是隐藏的。 JavaScript使用这里列填充所选值的隐藏控件( hdnValueList )。 这里隐藏控件用于通过 SelectedValues 属性返回所选值的列表。

现在 coming javascript,显示/隐藏下拉框和选中/取消选中条目的主要脚本位于 multidropdown.js 文件中。 functions ShowDropdown()HideDropdown()HideAllDropdowns()SelectRow() ( 从 tr onclick 调用)。SelectItem() ( 从 checkbox onclick调用)。SelectAll() 执行它们的名称。 一个 controlId 参数被传递给它们,它指定它们应该处理的控件实例。 这使得我们可以将控件的多个实例放在同一 ASP.NET 页上。 Initialize() 函数选择所选项目,以便在完整 postback 或者AJAX部分 postback 之后恢复状态。 这里函数由 mddinitialize.js 文件中的代码调用。 完整的postback 是通过将 Initialize() 函数附加到 window.onload 事件来处理的。 部分 postback 由预定义的pageLoad(sender, args) 函数处理。 mddtooltip.js 文件包含工具提示类。

Points of Interest

工具提示类的单个实例被重用以显示网页上所有控件的工具提示。 这节省了一些内存和系统资源,并使DOM占用更小。 也许我的页面和网页中的控件都是简单的,原因是工具提示类很简单,因为它很简单,所以它很难在多个实例中使用,这使得它很难使用。 但是,这是将来可以完成的事情,所以我将它添加到for的时间表中。

心愿单

将来可以实现的功能:

  • 多列下拉菜单( 比如。具有地址的人的姓名)
  • 设计时间支持
  • 使用鼠标动态调整下拉区域的大小
  • 自定义关于控件的所有内容( 包括下拉 background 颜色,选定的行颜色,等等 )
  • '调试'模式,在下拉列表中显示值列和工具提示中的值以在控件不行时启用故障排除。
  • 网页中控件的所有实例的下拉列表。 ( 与工具提示类类似)

我希望你喜欢使用这个控件,就像我在开发它时所。 你可以随意浏览源代码,并根据需要进行更改。 如果你对该控件做了重大更改,我将很高兴地听到你所做的更改。

如果你喜欢这个控件和本文,请对本文进行投票,你可以在 below 中找到,。 请把你的意见,建议,喜好,好恶或者其他东西发送给你,我想听你的。

历史记录

版本 1.0
  • 初始版本
版本 2.0
  • 搜索特性
  • 次要 Bug 修复

控制  asp  asp-net  Select  选择  
相关文章