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

    要向控件的下拉列表中添加项,请设置它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类设置图像,(image元素不允许使用CSS类设置图像。)要将图像更改为自定义图像,请将CSS类中的background-image属性设置为所需图像文件路径的路径。确保同时设置heightwidth属性。

    .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  选择