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

altas(ajax)控件(二十二):帮助用户输入的面板控件PopupControl

2013年12月08日 ⁄ 综合 ⁄ 共 2517字 ⁄ 字号 评论关闭
 

一、      简介
   
 Popupcontrol可以弹出任意类型的控件,不管是在服务器控件还是html控件。就是在某控件获取焦点时弹出另外一个控件,进行一些操作后,隐藏弹出的控件。
二、      属性说明

属性
说明
TargetControlID
需要弹出的控件的id,一般为TextBox
PopupControlID
作为弹出控件的id,一般为Panel
Position
弹出控件的位置
OffsetX/OffsetY
弹出控件的位置与默认位置的相对坐标
CommitProperty
目标控件的客户端属性,这个属性是它的值在弹出窗口选择完值后要更新的属性,比如可以是TextBox客户端属性value(注:不是Text属性),即是<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>生成HTML标签<input type="text" name="textfield" value="aa">后的属性value。
CommitScript
提交后执行的脚本

 
三、       实例

    实例
1
打开vs2005,新建一个AjaxControlToolKit网站,命名为AjaxPopupControl
2
打开默认生成的Default.aspx页面,切换到窗体的设计视图

3
在页面中拽一个UpdatePanel,一个PopupControlExtender,一个TextBox和一个RadioButtonList控件
4
设置PopupcontrolExtender控件的属性,要求当文本框获得焦点时再其右侧弹出RadioButtonList控件,如下 

 <asp:TextBox ID="MessageTextBox" runat="server" Width="200" autocomplete="off" /><br /><br />
        
<asp:Panel ID="Panel2" runat="server" CssClass="popupControl">
            
<div style="border: 1px outset white; width: 100px">
                
<asp:UpdatePanel runat="server" ID="up2">
                    
<ContentTemplate>
                        
<asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true"
                            OnSelectedIndexChanged
="RadioButtonList1_SelectedIndexChanged">
                                
<asp:ListItem Text="Walk dog" />
                                
<asp:ListItem Text="Feed dog" />
                                
<asp:ListItem Text="Feed cat" />
                                
<asp:ListItem Text="Feed fish" />
                                
<asp:ListItem Text="Cancel" Value="" />
                        
</asp:RadioButtonList>
                    
</ContentTemplate>
                
</asp:UpdatePanel>
            
</div>
        
</asp:Panel>
        
<ajaxToolkit:PopupControlExtender ID="PopupControlExtender2" runat="server"
            TargetControlID
="MessageTextBox"
            PopupControlID
="Panel2"
            CommitProperty
="value"
            Position
="Bottom"
            CommitScript
="e.value += ' - do not forget!';" />

  5 RadioButtonList控件的SelectedIndexChanged事件中添加代码,让选择日期后能将选择的日期显示在文本框中,如下

    protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
    
{
        
if (!string
.IsNullOrEmpty(RadioButtonList1.SelectedValue))
        
{
            
// 这里需要注意,执行选择操作

            PopupControlExtender2.Commit(RadioButtonList1.SelectedValue);
        }

        
else
        
{
            
// 取消操作

            PopupControlExtender2.Cancel();
        }

    }

6 保存设计,运行程序,效果:

效果如下:

 

抱歉!评论已关闭.