ASP.NET 的 ComboBox 控件

• 下载源代码 - 40 Kb

引言

在 ASP.NET 中使用服务器控件非常棒。拥有一个健壮的编程模型来与您的 HTML 元素交互，无疑让生活变得美好。虽然 ASP.NET 附带了您可能需要的所有最常见的服务器控件，但为您的工具箱添加新东西总是很有趣的。这个 ComboBox 控件模仿了 WinForms 世界中 ComboBox 的功能 - 允许用户从预定义的选择列表中进行选择，**或者**输入一个新值。

替代方案

这并不是互联网上，甚至 Code Project 上第一个或唯一一个 ComboBox 功能的实现。这篇文章提供了一个解决方案，但它基于 Microsoft 行为，使其特定于 IE，并且它使用自定义图像来模拟下拉箭头。

这篇文章提供了一个视觉上看起来像真正的 <SELECT> 框的解决方案，但它也依赖于行为 - 但我想要完整的跨浏览器支持，并且不想处理额外的 .htc 文件。

我还偶然发现了 MetaBuilders 的这个实现。它具有跨浏览器兼容性并能优雅降级，但它仍然不像一个普通的 HTML 元素，并且在加载时在浏览器中重绘时有一个烦人的“闪烁”。

最后，我找到了一个来自 Opinionated Geek 的非常精巧的实现，它似乎就是我正在寻找的。它看起来就像一个真正的 <SELECT> 框，并且在旧浏览器中似乎能优雅降级。然而，它是一个商业产品，我想要一些我自己可以调整的东西。我心想——“看来我只能自己写一个了。”。于是我就写了。

亮点

在开发这个控件时，我脑海中有几个设计目标：

• 必须与所有当前代浏览器兼容。
• 必须在旧浏览器中优雅降级（并仍提供基本功能）。
• 必须是自包含的，以便可以将其直接放到页面上并“工作”。
• 必须支持标准 DropDownList 控件的所有属性，包括所有视觉样式、数据绑定以及与 Validator 控件一起工作。
• 不能有任何布局显示限制。（例如，绝对定位、并排定位等）

希望当您下载并尝试附加的代码时，您会发现所有这些标准都已满足。示例网页展示了 ComboBox 控件可以使用的几种场景。尽管如此，我并没有尝试所有可能存在的疯狂场景。如果您发现此控件无法完成的任务或有改进建议，请在此处发表您的评论，我将更新代码。

更新 - 自动填充

有人问我这个控件是否支持像 Google Suggest 那样的“自动填充”技术。我添加了对这种技术的简单版本的支持。通过将 EnableAutoFill 属性设置为 true，控件将在用户输入时自动填充预定义的值。（但是，与 Google Suggest 不同，选项列表不会随着每次按键动态生成）。请告诉我您喜欢它吗。

更新 - 设计时支持及更多

这是我的错——我忽略了将设计时属性添加到我上传的类文件中。这已经得到纠正，所以现在控件具有完整的设计时支持。另外，我修复了使 AutoFill 区分大小写的问题。请再次下载代码以获取这两个修复。

更新 - .SelectedItem 和 .SelectedValue 属性

根据 Pinndulum 的建议和代码示例（请参阅下面的帖子），我上传了一个新版本的控件，它更好地利用了控件的 .SelectedItem 和 .SelectedValue 属性。现在，文本值和所选 ListItem 的值都可以通过编程方式获得。谢谢 Pinndulum！

更新 - SelectedIndexChanged 未触发 - 已修复

当控件设置为 AutoPostBack 时，SelectedIndexChanged 事件没有触发。这是由于某些 JavaScript 在 onchange 时重置了 selectedIndex 属性。虽然这在技术上是正确的行为，但拥有 SelectedIndexChanged 事件更为重要，所以我注释掉了有问题的行。（感谢 CGRothrock 发现这个错误）。

更新 - 增加了对“GridLayout”的支持

当控件放置在使用 GridLayout 格式的页面上时，控件未能正确渲染。这个错误是由于设计器应用的定位在渲染时丢失了。（感谢 TWheelhouse 发现这个错误并提出了修复建议）。

更新 - 添加了对外部 JavaScript 的支持以及错误修复

经过几次建议，我终于添加了对外部 JavaScript 文件的支持。如果您将 ExternalResourcePath 属性设置为有效 .js 文件的位置，控件将使用它而不是内联发出 JavaScript。另外，我认为 Firefox 渲染/selectedIndex 问题终于有了一个可接受的解决方案。感谢所有为本次更新提供想法和修复的人。

致谢

我要感谢本文中提及的其他文章的作者，是他们为我提供了创建此控件的灵感。特别要感谢 Opinionated Geek 的开发人员，他们提供了如此精巧的实现，让我有所借鉴。回顾他们的一些 JavaScript 也为我提供了宝贵的建议，帮助我解决了 IE 浏览器中烦人的 1 像素间距问题。=)

• ComboBox 控件 作者：khoi pham。
• ComboBox 控件 作者：bestcomy。
• MetaBuilders ComboBox 控件.
• Opinionated Geek ComboBox 控件.

历史

• 05.27.2005
  • 初始版本发布。
• 06.02.2005
  • 新版本发布，支持自动填充。
  • 新版本发布，支持设计时功能。
• 06.03.2005
  • 新版本，包含 Pinndulum 建议的 .SelectedItem 和 .SelectedValue 属性更改。
  • 新版本消除了 .Width 属性必须设置为像素值的限制。
• 06.06.2005
  • 修复了两个错误：一个涉及 SelectedIndexChanged 事件未触发，另一个涉及 ItemCommand 事件未触发（感谢 CGRothrock 和 Farooq Azam 发现这些错误）。
• 06.07.2005
  • 修复了一个使控件与“GridLayout”不兼容的 bug。（感谢 TWheelhouse 发现此 bug 并建议了修复方案。）
• 06.09.2005
  • 修复了一个导致 Firefox 出现奇怪渲染的错误（这是几天前修复 .SelectedValue 时引入的错误）。现在这两个问题都应该已修复。
• 06.10.2005
  • 新版本支持链接到外部 JavaScript 而不是内联发出 JavaScript 的选项。还增强了 Firefox 渲染/selectedIndex 问题（感谢 Bryan Pino 提出的修复建议）。
• 06.13.2005
  • 新版本将 ComboBox 控件代码分离到一个独立的项目中，并包含预编译的控件发布版本。同时修复了 ExternalResourcePath 属性在设计器中不可见的错误。
• 06.17.2005
  • 修复了通过设计器设置 MaxLength 属性时的错误（感谢 RSBCTrumpet 发现此错误）。