我需要创建一个下拉列表,用户可以从下拉列表中选择一个值或输入值.
完全像下面的链接中的“你来自哪里?”下拉列表:
http://www.dhtmlgoodies.com/scripts/form_widget_editable_select/form_widget_editable_select.html
我知道这是一个常见的问题,堆栈溢出也有类似的查询,但我找不到一个简单的工作解决方案.
我已经提到了以下链接:
http://www.codeproject.com/Articles/8578/Editable-Dropdown-DHTML-Behavior
http://www.codeproject.com/Articles/290218/Custom-ASP-NET-Editable-DropDownList
http://codeverge.com/asp.net.web-forms/editable-dropdown-list-c/392261
有没有人曾经做过这方面的工作,并让我知道如何进行?
最佳答案 另一种解决方案如下
您可以使用Ajax Control Toolkit Nuget
步骤1:
从引用中的Nuget包添加Ajax Control Toolkit
第2步:
如果没有将Ajax Control Toolkit控件添加到工具箱中,则需要创建一个单独的选项卡并将其命名为Ajax Toolkit Controls.
然后右键单击它并选择选择项目.
浏览到Ajax Control Toolkit的dll所在的位置,选择它.
您将看到一组控件填充到窗口中.
选择Ok,这将导致使用Ajax Control Toolkit控件填充选项卡.
第3步:
由于Ajax Toolkit控件是一个额外的附加软件包,因此您需要使用它们将它们注册为页面的一部分.如果作为nuget安装,则可以忽略此步骤.
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>
注意:tagprefix应该与您在程序中用于AjaxControlToolkit控件的tagprefix相匹配.
第4步:
添加ScriptManager控件,它是为客户端AJAX功能提供支持所必需的.因此,它加载并注册Microsoft AJAX库以启用这些功能.
<asp:ScriptManager ID="ScriptManager1" runat="server" />
第5步:
继续从工具箱中添加ComboBox,并使用SQLDataSource将其链接到数据库进行配置
完整的源代码如下
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxComboboxSample.aspx.cs" Inherits="StacksEmptied.AjaxComboboxSample" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
#ComboBox1_ComboBox1_OptionList {
width: 10% !important;
}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<ajaxToolkit:ComboBox ID="ComboBox1" AppendDataBoundItems="True" runat="server" AutoCompleteMode="Suggest" DataSourceID="SqlDataSource1" DataTextField="Fruits" DataValueField="Fruits" MaxLength="0" Style="display: inline;">
</ajaxToolkit:ComboBox>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ConnectionStrings:FruitsConnectionString %>" SelectCommand="SELECT * FROM [Fruits]"></asp:SqlDataSource>
</div>
</form>
</body>
</html>
我已在以下所有设置测试环境中测试了此代码:
Chrome浏览器版本43.0.2334.0 dev-m(64位)
Internet Explorer 11
Firefox 36.0.1
Visual Studio 2013版