在ASP.NET中实现可编辑的DropDownList [英] Implementing an editable DropDownList in ASP.NET

问题描述

在ASP.NET中实现DropDownList的最优雅方式是可编辑的，而不使用第三方组件。

作为最后的手段，我可​​能会尝试使用具有AutoCompleteExtender的TextBox具有图像下拉列表;或者一个TextBox与HTML重叠选择一些JavaScript，以从选择到文本框中填充值。但是我真的希望有一个更加简洁和可维护的解决方案。

提前感谢

解决方案

页面上的一个控件

您可以按照 这个使用标准ASP.NET TextBox和DropDownList控件结合某些JavaScript的Code Project 上的可编辑DropDownlist的简单示例。 p>

但是，直到添加了一个引用来获取TextBox和DropDownList的ClientID值时，该代码才起作用：

 < script language =javascripttype =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：absoluteID =txtDisplayrunat =server>< / asp：TextBox> 
 
< asp：DropDownList ID =ddSelectstyle =width：140pxrunat =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函数名称设置为唯一，以避免冲突。在ASCX文件中再次使用ClientID：

执行此操作：

  function DisplayText_<％= ClientID％>（）{...} 
  

在代码中：

  /// ... 
 ddSelect.Attributes.Add（onChange，DisplayText_+ ClientID +（）;）; 
 /// .. 
  

这是避免使用第三方控件的一种方法。 / p>

What's the most elegant way of implementing a DropDownList in ASP.NET that is editable without using 3rd party components.

As a last resort I will probably try using a TextBox with an AutoCompleteExtender with an image to 'drop down' the list; or a TextBox overlapping a HTML Select with some JavaScript to fill values from the Select to the TextBox. But I'm really hoping there is a more terse and maintainable solution.

Thanks in advance.

解决方案

One Control on a Page

You can follow this simple example for an Editable DropDownlist on Code Project that uses standard ASP.NET TextBox and DropDownList controls combined with some JavaScript.

However, the code did not work for me until I added a reference to get the ClientID values for the TextBox and DropDownList:

<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>

Finally, in the code behind just like in the original example, I added the following to page load:

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

Multiple Controls on a Page

I placed all of the above code in its own ASCX User Control to make it reusable across my project. However, the code as presented above only works if you require just one editable DropDownList on a given page.

If you need to support multiple custom DropDownList controls on a single page, it is necessary to set the JavaScript function name to be unique to avoid conflicts. Do this by once again using the ClientID:

in the ASCX file:

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

in the code behind:

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

This is one way to avoid using 3rd party controls.

这篇关于在ASP.NET中实现可编辑的DropDownList的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！