65.9K
CodeProject 正在变化。 阅读更多。
Home

自定义 ASP.NET 可编辑下拉列表

EricFaust
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.91/5 (51投票s)

2011年11月26日

CPOL

6分钟阅读

viewsIcon

590730

downloadIcon

33549

一个自定义的 ASP.NET 下拉列表控件

引言

ASP.NET 的 DropDownList 控件提供了一种简单的方式供用户进行选择。但是，如果您想允许用户输入下拉列表中不存在的信息，则需要编写自己的 JavaScript 或 jQuery 代码。此源代码将这些工作整合成一个 ASP.NET DLL 控件，您可以轻松地将其放置在任何 ASP.NET 网页上。

上述可下载的源代码项目使用了以下技术

  • ASP.NET 4.0 / Webforms
  • C#
  • jQuery / JavaScript
  • CSS

示例

Editable-DropDown/example1.jpg

背景

您无需了解 jQuery、JavaScript 或 CSS 即可使用 EditableDropDownList。唯一的要求是，任何引用 EditableDropDownList 的页面都必须包含上述任一下载文件中提供的 CSS 和 JavaScript 文件的正确链接。源代码下载包含 EditableDropDownList 的类库项目和一个使用 EditableDropDownList 控件的测试网站。

Using the Code

要使用 EditableDropDownList，您需要按照以下步骤操作

  1. 将 EditableDropDownList.dll 项目引用添加到您的 ASP.NET Webforms 项目中。
    • 您可以通过从 Visual Studio 工具箱中使用 EditableDropDownList 控件来跳过步骤 2 和 5。
    • 为此，请确保您当前正在编辑一个网页，以便能够访问工具箱和 ASP.NET 控件。
    • 在 Visual Studio 工具箱中，右键单击以创建新选项卡或使用现有选项卡来添加 EditableDropDownListControl。首先右键单击工具箱并选择“选择项..”然后浏览到您保存 EditableDropDownList.dll 的位置。
    • 添加后，您现在可以双击或单击并拖动 EditableDropDownList 到您的网页上以开始使用。这将自动将引用添加到您的 Web 项目，将适当的代码放在您的网页的头部，并将控件添加到您的网页中。
  2. 在您的网页顶部注册 EditableDropDownList 。
    <%@ Register Assembly="EditableDropDownList" 
Namespace="EditableControls" TagPrefix="editable" %>
  3. 将这些文件添加到您的网站
    • 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 文件应按此顺序引用）
    • jquery-1.6.4.min.js (* 或更高版本)
    • jquery.ui.core.js
    • jquery.ui.widget.js
    • jquery.ui.button.js
    • jquery.ui.position.js
    • jquery.ui.autocomplete.js
    • jquery.ui.combobox.js (此文件不是 jQuery 库的一部分)
  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. 在您的网页上添加 EditableDropDownList 的 script 标签
    <editable:EditableDropDownList ID="EditableDropDownList1" runat="server"> 
</editable:EditableDropDownList>
  6. 手动添加 ListItems 到 EditableDropDownList ，或通过绑定到 DataSource 来填充下拉列表项。
    • 这两个示例都可以在上述下载的源代码中找到。
  7. 您已完成！现在您可以与您的 EditableDropDownList 一起使用，找到最适合您的选项。如果您在您的网站上使用了此控件，我将非常乐意收到您的宝贵反馈。

可编辑下拉列表与普通 .NET 下拉列表有何不同？

与 ASP.NET DropDownList 控件的主要区别如下

  • 新增了 OnClick 事件。
    • 现在可以捕获用户单击或选择某项的事件。捕获此事件将导致用户做出选择后自动进行页面回发。
  • AutoWidth 以适应列表项的内容。
    • 此功能是浏览器和 <select> 元素的一部分。我们不为此控件使用 select 元素，因此您需要自行设置适合您提供给用户的数据的 width 。
  • 已排序 [新增/添加] (布尔值)
    • 添加了一个新的属性“Sorted”，允许您自动为您排序项目。
  • 重复条目将被忽略。如果您在下拉列表中提供了多个条目，则只会列出单个条目。
  • 不允许空下拉列表条目。如果您想为用户提供一个空条目供其选择，我建议您使用“&nbsp;”作为显示值。
  • 如果未提供任何下拉列表项或 Enabled="false"，则将显示一个简单的文本框。
  • ASP.NET DropDownList 中的某些其他属性，如“DataTextFormatString”，可能不适用于 EditableDropDownList。如果您想添加此功能或任何其他功能，欢迎根据需要修改源代码。
  • 下拉列表的最大高度在 CSS 文件 "css/jquery-ui.css" 中设置为 300px。
    • 这将导致滚动条始终可见，但也会防止下拉列表过大。
    • 要禁用此功能，您需要删除或注释掉设置 max-height 的行，或者您可以调整最大高度。

自定义

如果您想修改 EditableDropDownList 的外观和感觉，有几种方法可以做到

  • 使用 CSS 类并相应地设置 CssClass 属性。（请确保您的 CSS 文件在头部中的引用位于 "jquery-ui.css" 文件引用之后）
  • 像处理任何 ASP.NET 控件一样，通过代码隐藏设置样式。（示例：EditableDropDownList1.Style.Add(HtmlTextWriterStyle.BackgroundColor, "#fefecc");)
  • 修改 jQuery CSS 文件“jquery-ui.css”。
    • 如果您想在整个网站以及使用 EditableDropDownList 的任何地方保持一致的外观和感觉，那么这将是您的最佳选择。
    • 请记住，如果您正在使用其他 jQuery UI 控件，那么更改也将影响这些控件。

历史

  • 2011 年 11 月 25 日：文章发布
  • 2012 年 1 月 15 日：更新了 EditableDropDownList 控件，使其现在可以正确用于 MasterPage
  • 2012 年 2 月 25 日：更新了 EditableDropDownList 控件
    • 以便现在可以正确用于 UpdatePanel
    • 允许将 AutoPostBack 设置为 True
    • 添加了 OnClick 事件
    • 在 CSS 文件 "css/jquery-ui.css" 中添加了 max-height
  • 2012 年 6 月 18 日：更新了 EditableDropDownList 控件：
    • 原始文本输入 ID 设置为 ClientID，自动完成文本输入 ID 设置为 ClientID + '_list'，按钮设置为 ClientID + '_list_button'，以便这些控件可以在 javascript 中访问。
  • 2012 年 7 月 19 日：修复了一个错误，由于之前的更新，TextChanged 和 SelectedIndexChanged 已停止正常工作。
  • 2012 年 11 月 12 日：将 SelectedIndexChanged 事件移至控件的 PreRender 事件之前引发，以便页面上的所有其他控件的数据都已加载并准备就绪，以备需要。
  • 2012 年 11 月 19 日：修复了以下项目。
    • 如果 EditableDropDownList 被禁用，它在回发时不会丢失其文本。
    • 可以设置 TabIndex。
    • 如果调用 Focus() 方法，则将使用 jquery 来设置此控件的焦点。
  • 2012 年 11 月 23 日：添加了自动选择下拉列表第一个项目的选项。
    • 新的布尔属性名称 AutoselectFirstItem。
  • 2012 年 12 月 19 日：下拉列表将使用与其文本框相同的字体系列。
    • 向下拉列表添加了 'white-space: pre-wrap' 样式，以便允许使用空格进行格式化。

编码愉快！

© . All rights reserved.