介绍
我们可以用ASP.NET提供的DropDownList控件非常简单的去展现一系列的选项，不过如果你想要允许用户输入信息，那么很是可惜啊，答案是不能，非得想要，你就得写javascript或者是jquery什么的。现在我将分享一个我觉得不错的DLL控件，你可以非常容易的集成到你的asp.net页面中。
源码所运用到的知识：
- ASP.NET 4.0 / Webforms
- C#
- jQuery / JavaScript
- CSS
例子
背景
使用这个控件，你完全不需要懂jQuery,JavaScript,和CSS。唯一需要的是，你得在需要的页面引用它，还有正确的包含所用到的CSS和javascript文件，当然得写在引用控件的上面。OK，去下源码吧，里面有所有源码包括测试的。
怎样使用
你需要遵循下面的步骤：
1.在你的asp.net项目中引用EditableDropDownList.dll
- 如果你从工具箱中拖拽，可以跳过步骤2到5
- 至于怎么在工具箱中找到，你可以右击工具箱添加
2.在你的webpage最顶端注册EditableDropDownList
<%@ Register Assembly="EditableDropDownList" Namespace="EditableControls" TagPrefix="editable" %>
3.在你的website中添加下列文件
- jquery-ui.css
- img/ui-bg_flat_0_aaaaaa_40x100.png
- img/ui-icons_222222_256x240.png
- img/ui-icons_454545_256x240.png
- img/ui-icons_888888_256x240.png
- (Javascript files below should be referenced in this order below)
- jquery-1.6.4.min.js (* or greater)
- jquery.ui.core.js
- jquery.ui.widget.js
- jquery.ui.button.js
- jquery.ui.position.js
- jquery.ui.autocomplete.js
- jquery.ui.combobox.js (This file is not a part of the jQuery library)
4.在页面头部添加css和JavaScript的引用
<head runat="server"> <title></title> <link href="css/jquery-ui.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="js/jquery.ui.core.js" type="text/javascript"></script> <script src="js/jquery.ui.widget.js" type="text/javascript"></script> <script src="js/jquery.ui.button.js" type="text/javascript"></script> <script src="js/jquery.ui.position.js" type="text/javascript"></script> <script src="js/jquery.ui.autocomplete.js" type="text/javascript"></script> <script src="js/jquery.ui.combobox.js" type="text/javascript"></script> </head>
5.再把控件按如下方式添加到页面就Ok了
<editable:EditableDropDownList ID="EditableDropDownList1" runat="server"> </editable:EditableDropDownList>
6.下面你可以手动用ListItems的方式，或者datasource的方式帮顶数据，这些例子都在源码里
7.好了，你已经完成了
EditableDropDownList和普通的控件有什么区别呢？
有如下几点：
- OnClick事件是重写的
你可以捕捉用户选择或者点击项的事件，并且页面会自动产生一个postback
- AutoWidth 自适应内容长度
这个功能取决于浏览器和<select>元素。这个控件不使用<select>，而是你指定宽度
- 排序功能
可以为你自动的排序项
- 去除重复项
- 不允许有空项
如果你想有空的，可以用” “代替
- 如果dropdownlist里没有任何项，或者Enabled=”false”那么它会显示成一个普通的textbox
- 不过有些原来的特性，是没有的，比如DataTextFormatString，如果你想加的话，自己修改源码吧，哈哈
- 它的最大高度是300px在
"css/jquery-ui.css"中设置
当然这会产生滚动条，好处是不会变得太长。。。
到此就介绍完了，欢迎交流！！！