本文介绍如何利用ASP.NET AJAX Control Toolkit中的PopupControlExtender组件为TextBox添加下拉框功能。通过设置PopupControlExtender和Panel，结合RadioButtonList实现下拉选项，并在用户选择后自动填充TextBox。
使用PopupControlExtender实现textbox的下拉框
效果如图：
1、1、新建一个ASP.NET AJAX Control Toolkit Website。在Default.aspx添加一个TextBox、
一个Panel，Panel设置如下：
<asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px" CssClass="popupControl"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged" Width="224px"> <asp:ListItem Text="Scott Guthrie"></asp:ListItem> <asp:ListItem Text="Simon Muzio"></asp:ListItem> <asp:ListItem Text="Brian Goldfarb"></asp:ListItem> <asp:ListItem Text="Joe Stagner"></asp:ListItem> <asp:ListItem Text="Shawn Nandi"></asp:ListItem> </asp:RadioButtonList> </ContentTemplate> </asp:UpdatePanel> </asp:Panel>再添加一个PopupControlExtender，PopupControlExtender设置如下：
<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server" CommitProperty="value" CommitScript="e.value += ' - SEND A MEETING REQUEST!';" PopupControlID="Panel1" Position="Bottom" TargetControlID="MyTextBox"> </ajaxToolkit:PopupControlExtender> 2、双击RadioButtonList1，代码如下：
protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
...{
if ((String.IsNullOrEmpty(RadioButtonList1.SelectedValue)) == false)
...{ // Popup result is the selected task PopupControlExtender.GetProxyForCurrentPopup(this.Page).Commit(RadioButtonList1.SelectedValue);
} // Reset the selected item RadioButtonList1.ClearSelection(); Label1.Text = MyTextBox.Text;
}3、把StyleSheet.css从“解决方案资源管理器”拖进<head>...</head>里。
StyleSheet.css代码如下：
.watermark{...}{ background: #FFAAFF;}.popupControl{...}{ background-color:#AAD4FF; position:absolute; visibility:hidden; border-style:solid; border-color: Black; border-width: 2px;}
4、注意：
CssClass="popupControl"--Panel1的外观设置
AutoPostBack="true" ---如果RadioButtonList1没声明这个属性，就是点了也东西
using AjaxControlToolkit;---要在Default.aspx.cs添加这个命名空间
参考：video9
扫一扫
1873
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
