使用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>
<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>
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;
}
...{
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;
}
{...}{
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