现在的位置: 首页 > 综合 > 正文

使用PopupControlExtender实现textbox的下拉框

2013年12月04日 ⁄ 综合 ⁄ 共 2287字 ⁄ 字号 评论关闭

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

抱歉!评论已关闭.