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

•分享于 

•

7分钟阅读

Web开发

  •繁體
  • 下载，NET程序集（二进制）-11.22 KB
  • 下载源代码- 15.15 KB
  • 下载演示-22.88 KB

    • 特征

  • 在同一页上支持多个实例
  • 可自定义文本框，按钮，下拉和工具提示的外观
  • 不需要JavaScript或样式表这样的外部文件，控制负责一切
  • ASP.NET符合AJAX，与UpdatePanel一起使用
  • 使用纯JavaScript，不需要JavaScript框架(像jQuery，mootools，等等)
  • 适用于IE，Firefox，Chrome，Opera和Safari，Safari和Chrome不接受dropdown的min-width属性)
  • 只有drag-n-drop到你的页面，开始使用控件
  • 允许搜索项目

    • 背景

    我一直在寻找一个允许我从下拉列表中选择多个项目的控件，在互联网上搜索无效后，我决定编写自己的ASP.NET server控件，允许选择多个项目，所以有了这个MultiDropDown控件。

    使用MultiDropdown控件

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

    multidropdowncontrol/mddv2-1.png

    单击textbox或单击图像按钮将打开下拉区域。

    multidropdowncontrol/mddv2-2.png

    选定项目时，textbox将自动更新，以显示选定项目的逗号分隔列表，选定的行也会突出显示，通过单击项目上的任意位置而不只是checkbox选择项目，你也可以单击"全部"项来选择/取消选择下拉列表中的所有项，控件还有自动显示选定项的aToolTip。

    在搜索框中开始键入时，将筛选列表以匹配所有以键入字符开头的项目，单击Clear Search清除过滤器，并显示所有项目。

    multidropdowncontrol/mddv2-3.png

    若要使用此控件，请将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控件的示例：

    multidropdowncontrol/mddv2-4.png

    探索源代码

    控件是使用Visual Studio 2010/.NET框架4.0开发的，项目结构如下所示：

    multidropdowncontrol/mddv2-5.png


    控制  asp  asp-net  Select  选择