如何实现使用 ComboBox 控件？ (VB)

项目
07/13/2023

ComboBox 是一个 ASP.NET AJAX 控件，它将 TextBox 的灵活性与用户可以从中选择的选项列表相结合。

本教程的目的是介绍 AJAX 控件工具包 ComboBox 控件。 ComboBox 的工作方式类似于标准 ASP.NET DropDownList 控件与 TextBox 控件之间的组合。可以从预先存在的项列表中选择或输入新项。

ComboBox 类似于 AutoComplete 控件扩展程序，但这些控件用于不同的方案。自动完成扩展程序查询 Web 服务以获取匹配的条目。相比之下，ComboBox 控件是使用一组项初始化的。在处理 (数百万汽车零件) 大量数据时，使用 AutoComplete 扩展器是有意义的，而使用 ComboBox 控件在处理 (数十个汽车零件) 的一小部分数据时，使用 AutoComplete 扩展器是有意义的。

从静态项列表中进行选择

让我们从使用 ComboBox 控件的简单示例开始。假设你想要在下拉列表中显示项的静态列表。但是，你希望保持打开列表不完整的可能性。你希望允许用户在列表中输入自定义值。

我们将创建新的 ASP.NET Web Forms页，并在页面中使用 ComboBox 控件。将新的 ASP.NET 页添加到项目，并切换到“设计”视图。

如果要在页面中使用 ComboBox 控件，则必须将 ScriptManager 控件添加到页面。将 ScriptManager 控件从“AJAX 扩展”选项卡下方拖到Designer图面上。应在页面顶部添加 ScriptManager 控件;可以紧接在打开的服务器端 <表单> 标记的下方添加它。

接下来，将 ComboBox 控件拖到页面上。可以在工具箱中找到 ComboBox 控件与其他 AJAX 控件工具包控件和控件扩展器 (见图 1) 。

图 01：从工具箱中选择 ComboBox 控件 (单击以查看全尺寸图像)

我们将使用 ComboBox 控件显示静态选项列表。用户可以从三个选项列表中选择特定级别的辣度：温和、中等和热 (请参阅图 2) 。

图 02：从静态项目列表中选择 (单击以查看全尺寸图像)

可以通过两种方式将这些选项添加到 ComboBox 控件。首先，将鼠标悬停在“设计”视图中的控件上时，选择“编辑选项”任务选项，然后打开“项编辑器” (请参阅图 3) 。

图 03：编辑 ComboBox 项 (单击以查看全尺寸图像)

第二个选项是在源视图中的开始和结束 <asp：ComboBox> 标记之间添加项列表。清单 1 中的页面包含更新的 ComboBox，其中包含项目列表。

清单 1 - Static.aspx

<%@ Page Language="VB" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        lblSelection.Text = "You picked " & ComboBox1.SelectedItem.Text
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Static</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        
        Describe how spicy you like your food:
        <br />
        <cc1:ComboBox ID="ComboBox1" runat="server">
            <asp:ListItem Text="Mild" Value="0" />
            <asp:ListItem Text="Medium" Value="1" />
            <asp:ListItem Text="Hot" Value="2" />
        </cc1:ComboBox>
        
        <asp:Button
            ID="btnSubmit"
            Text="Submit"
            Runat="server" OnClick="btnSubmit_Click" />

        <hr />
        <asp:Label
            ID="lblSelection"
            Runat="server" />
        
    </div>
    </form>
</body>
</html>

打开清单 1 中的页面时，可以从 ComboBox 中选择一个预先存在的选项。换句话说，ComboBox 的工作方式就像 DropDownList 控件一样。

但是，还可以选择输入新选项 (例如不在现有列表中的“超级辣) ”。因此，ComboBox 的工作方式也类似于 TextBox 控件。

无论你是选取预先存在的项还是输入自定义项，提交表单时，你的选择都会显示在标签控件中。提交表单时，btnSubmit_Click处理程序将执行并更新标签， (见图 4) 。

图 04：显示所选项 (单击以查看全尺寸图像)

ComboBox 支持与 DropDownList 控件相同的属性，用于在提交表单后检索所选项目：

SelectedItem.Text - 显示所选项的 Text 属性的值。
SelectedItem.Value - 显示所选项目的 Value 属性的值，或显示键入到 ComboBox 中的文本。
SelectedValue - 与 SelectedItem.Value 相同，只不过此属性允许您指定默认 (初始) 选定项。

如果在 ComboBox 中键入自定义选项，则自定义选项将同时分配给 SelectedItem.Text 和 SelectedItem.Value 属性。

从数据库中选择项列表

可以从数据库中检索 ComboBox 显示的项列表。例如，可以将 ComboBox 绑定到 SqlDataSource 控件、ObjectDataSource 控件、LinqDataSource 或 EntityDataSource。

假设你想要在 ComboBox 中显示电影列表。你想要从 Movies 数据库表检索电影列表。按照以下步骤操作：

创建名为 Movies.aspx 的页面
通过将 ScriptManager 从工具箱中的“AJAX 扩展”选项卡下拖到页面，将 ScriptManager 控件添加到页面。
通过将 ComboBox 拖到页面上，将 ComboBox 控件添加到页面。
在“设计”视图中，将鼠标悬停在 ComboBox 控件上，然后选择“ 选择数据源 ”任务选项 (请参阅图 5) 。启动数据源配置向导。
在 “选择数据源 ”步骤中 <，选择“新建数据源> ”选项。
在 “选择数据源类型 ”步骤中，选择“数据库”。
在 “选择数据连接 ”步骤中，选择数据库 (例如 MoviesDB.mdf) 。
在 “将连接字符串保存到应用程序配置文件” 步骤中，选择保存连接字符串的选项。
在 “配置 Select 语句 ”步骤中，选择“Movies”数据库表并选择所有列。
在 “测试查询” 步骤中，单击“完成”按钮。
返回到 “选择数据源 ”步骤，选择要显示的字段的“标题”列和数据字段的“Id”列 (请参阅图) 。
单击“确定”按钮关闭向导。

图 05：选择数据源 (单击以查看全尺寸图像)

图 06：选择数据文本和值字段 (单击以查看全尺寸图像)

完成上述步骤后，ComboBox 将绑定到一个 SqlDataSource 控件，该控件表示 Movies 数据库表中的电影。页面的源类似于清单 2 (我稍微清理了格式) 。

列表 2 - Movies.aspx

<%@ Page Language="VB" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <br />
        
        Select your favorite movie:
        <br />
        <cc1:ComboBox 
            ID="ComboBox1"
            DataSourceID="SqlDataSource1" 
            DataTextField="Title" 
            DataValueField="Id" 
            MaxLength="0" 
            runat="server" >
        </cc1:ComboBox>
     
        <asp:SqlDataSource 
            ID="SqlDataSource1"  
            ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
            SelectCommand="SELECT * FROM [Movies]"
            runat="server">
        </asp:SqlDataSource>
     
    </div>
    </form>
</body>
</html>

请注意，ComboBox 控件具有指向 SqlDataSource 控件的 DataSourceID 属性。在浏览器中打开页面时，将显示数据库中的电影列表， (请参阅图 7) 。可以从列表中选择电影，也可以通过在 ComboBox 中键入电影来输入新电影。

图 07：显示电影列表 (单击以查看全尺寸图像)

设置 DropDownStyle

可以使用 ComboBox DropDownStyle 属性更改 ComboBox 的行为。此属性接受以下可能的值：

DropDown - (默认值) 单击箭头并输入自定义值时，ComboBox 将显示下拉列表。
简单 - ComboBox 会自动显示下拉列表，你可以输入自定义值。
DropDownList - ComboBox 的工作方式类似于 DropDownList 控件。

DropDown 和 Simple 之间的区别在于显示项列表时。对于“简单”，当您将焦点移动到 ComboBox 时，列表将立即显示。对于 DropDown，必须单击箭头才能查看项列表。

DropDownList 值使 ComboBox 控件的工作方式与标准 DropDownList 控件类似。但是，这里有一个重要的区别。旧版 Internet Explorer 显示具有无限 z 索引的 DropDownList 控件，因此该控件将出现在放置在它前面的任何控件的前面。由于 ComboBox 呈现 HTML <div> 标记而不是 HTML <选择> 标记，因此 ComboBox 正确遵循 z 排序。