多列下拉组合框 - ASP.NET 2.0 服务器控件

• 下载源代码 - 113 Kb

引言

此代码是“快速上手”系列的一部分。如果您赶时间，可以直接获取此代码并将其插入您的应用程序，无需理解。当您有时间时（是的，就像现在），您可能想回顾一下源代码。

背景

我接手了一个项目，需要将一个单用户 Access 应用程序转换为一个基于 Web 的多用户 SQL Server 应用程序。Access 应用程序中有许多多列下拉列表，我在网上找不到所需的功能。于是我自己写了一个。

在本篇文章中，我使用了 NorthWind 数据库中的 Products、Suppliers 和 Categories 表。

使用代码

• 下载项目，将其解压到您硬盘上的某个位置。
• 创建一个新的 ASP.NET 项目。
• 右键单击项目，选择 添加现有项。
• 导航到解压到的文件夹，并选择 .JS 和 .GIF 文件。
• 为项目创建一个 bin 文件夹。
• 右键单击 bin，选择 添加现有项。
• 选择 工具 > 选择工具箱项。
• 导航到解压文件夹并选择 DLL 文件。
• 这个新的服务器控件现在会出现在工具箱的 常规 类别下。
• 将它的一个实例拖到 Default.aspx 上。
• 将一个 SqlDataSource 实例拖到 Default.aspx 上。
• 配置数据源以使用自定义 SQL 语句

  SELECT Products.ProductID, Products.ProductName, 
      left(Products.ProductName+SPACE(40),40)+Suppliers.CompanyName as Name, 
      Categories.CategoryName 
  FROM Products 
  INNER JOIN Categories ON Products.CategoryID = Categories.CategoryID 
  INNER JOIN Suppliers ON Products.SupplierID = Suppliers.SupplierID 
  order by Categories.CategoryName, Products.ProductName

在 DropDownComboControl 上设置这些属性

• DropDownCssStyle: font-family: monospace; background-color: yellow
• DropDownCssClass:
• DropDownMonospace: true
• DropDownSize: 10
• TextBoxCssStyle: background-color: blue
• TextBoxCssClass:
• TextBoxColumns: 20
• TextBoxMaxLength: 30
• PickOnly: false
• onchange: SetTextBox(this, this.options[this.selectedIndex].extra);
• DataExtraField: ProductName
• DataOptGroup: CategoryName
• DataSourceID: SqlDataSource1
• DataTextField: Name
• DataValueField: ProductID
• ImageFolder: .
• ImageWidth: 26
• ScriptFolder: .

除了 DataSourceID、DataTextField 和 DataValueField 之外，上面列出的所有其他属性都是新的。该控件由一个文本框（<input> 元素）和一个下拉列表（<select> 元素）组成。

感兴趣的属性

• Border: (1px solid InactiveBorder) 设置控件的边框。
• DropDownCssClass: 设置 <select> 元素的 class 属性。
• DropDownCssStyle: 设置 <select> 元素的 style 属性。
• DropDownSize: 设置 <select> 元素的 size 属性。
• TextBoxCssClass: 设置 <input> 元素的 class 属性。
• TextBoxCssStyle: 设置 <input> 元素的 style 属性。
• TextBoxColumns: 设置 <input> 元素的 size 属性。
• TextBoxMaxLength: 设置 <input> 元素的 maxlength 属性。
• PickOnly (true/false): 设置为 true 时，您只能从列表中选择，无法输入自定义值。
• DataOptGroup: 组合框可以实现 <optgroup> 功能（参见上面的截图）。此属性告诉组合框哪个数据字段包含 optgroup 值。每次指定的值更改时，都会创建一个新的 <optgroup>。因此，在上面的 SELECT 语句中，您可以看到 ORDER BY 子句首先设置为 CatagoryName。
• DataExtraField: 组合框可以将额外信息放入 <option> 标签中。例如：<option value="3" extra="coffee">coffee by martha</option> 您稍后会看到它是如何使用的。
• ImageFolder: 下拉图像所在的文件夹（. 表示当前文件夹）。
• ImageWidth: 下拉图像的宽度。提供的图像为 26px。
• ScriptFolder: JavaScript 代码所在的文件夹（. 表示当前文件夹）。

在上面的截图中，您可以看到下拉列表比文本框宽得多。这允许您向用户展示更多关于选项的信息，但一旦选定，则占用的空间要小得多。

在截图中，我希望下拉列表是多列的，并且第二列数据对齐正确。为此，我需要选择一个固定宽度的字体。

• DropDownCssStyle: font-family: 'courier new', 'monospace'

  我必须确保多个空格不会像 HTML 标准那样被折叠成一个空格。我通过设置 DropDownCollapseSpaces: false 来实现这一点。此属性指示控件将空格替换为   - 从而保留间距。默认情况下，控件将用选定的下拉项填充文本框。

在示例中，我不希望公司名称出现在文本框中，因此我添加了一个 OnClick 事件处理程序。

ComboWithAdjustableDropDownWidth.SetTextBox(this, 
                       this.options[this.selectedIndex].extra);

这会将我们存储在 <option> 中的 extra 信息（还记得 DataExtraField 吗？）放入文本框。您可以根据需要设置 OnClick 处理程序。

关注点

该控件也适用于数据绑定，可在 GridView 等中使用。

<cc1:combowithadjustabledropdownwidth 
     id="ComboWithAdjustableDropDownWidth1" runat="server" 
     ...
     SelectedValue='<%# Bind("SupplierID") %>
</cc1:combowithadjustabledropdownwidth>

您必须手动编辑到源代码中，因为 VS2005 不会自动执行此操作。在源代码 zip 文件中，我包含了一个小型项目，展示了如何绑定到 FormView 元素。该项目还列出了一些其他固定间距字体。

结论

好了，这是一个便宜（好吧，免费）的 ASP.NET 2.0 ComboBox，满足了我的需求，也希望满足您的需求。

SmashGrab / Redux 系列

我最近在 CodeProject 上开始了两个系列的文章。Smash and Grab 旨在通过简短的文章介绍一个特定的代码技术。Redux 旨在通过较长的文章，将一个复杂的主题（如 GridView）分解成其基本组成部分，并表明一旦您拥有所有信息，它其实并没有那么难。要查找 Smash and Grab 文章，请搜索关键词 SmashGrab。要查找 Redux 文章，请搜索关键词 Redux。

我欢迎对任何系列的文章做出贡献，但请在提交文章时遵循相关指南。