在ASP.NET中实现可编辑的DropDownList

Question

在ASP.NET中实现DropDownList的最优雅方式是什么,可以在不使用第三方组件的情况下进行编辑.

作为最后的手段,我可​​能会尝试使用带有AutoCompleteExtender的TextBox,并使用图像"下拉"列表; 或者一个与HTML重叠的TextBox用一些JavaScript来填充从Select到TextBox的值.但我真的希望有一个更简洁和可维护的解决方案.

提前致谢.

Answer 1

页面上的一个控件

您可以按照这个简单的示例,在Code Project上使用标准ASP.NET TextBox和DropDownList控件以及一些JavaScript 编辑可编辑的DropDownlist.

但是,在我添加引用以获取TextBox和DropDownList的ClientID值之前,代码对我不起作用:

<script language="javascript" type="text/javascript">

function DisplayText()
{
    var textboxId = '<% = txtDisplay.ClientID %>';
    var comboBoxId = '<% = ddSelect.ClientID %>';
    document.getElementById(textboxId).value = document.getElementById(comboBoxId).value;
    document.getElementById(textboxId).focus();
}
</script>    

<asp:TextBox style="width:120px;position:absolute" ID="txtDisplay" runat="server"></asp:TextBox>

<asp:DropDownList ID="ddSelect" style="width:140px" runat="server">    
    <asp:ListItem Value="test1" >test1</asp:ListItem>    
    <asp:ListItem Value="test2">test2</asp:ListItem>    
</asp:DropDownList>

最后,在原始示例中的代码中,我将以下内容添加到页面加载:

protected void Page_Load(object sender, EventArgs e)
{
    ddSelect.Attributes.Add("onChange", "DisplayText();");
}

页面上的多个控件

我将所有上述代码放在自己的ASCX用户控件中,以使其可以在我的项目中重用.但是,如果您在给定页面上只需要一个可编辑的DropDownList,则上述代码才有效.

如果需要在单个页面上支持多个自定义DropDownList控件,则必须将JavaScript函数名称设置为唯一以避免冲突.再次使用ClientID执行此操作:

在ASCX文件中:

function DisplayText_<% = ClientID %>(){...}

在后面的代码中:

/// ...
ddSelect.Attributes.Add("onChange", "DisplayText_" + ClientID + "();");
///..

这是避免使用第三方控件的一种方法.