zoukankan      html  css  js  c++  java
  • AJAX ControlToolkitPopupControlExtender 3

    PopupControlExtender是一个可以控制Popup载体的组件,它本身并不会产生Popup控件,它的作用是控制Popup载体,例如panel,div等的显示、消失并获得Popup载体中控件的返回值,返回到目标控件中去。下面我们一齐来学习一下PopupControlExtender的使用方法。

    注意:UpdatePannel一定要放在Panel里面,否则运行一次之后会发生JS异常。另外一定要将RadioButtonList的AutoPostBack属性设为True,否则就没有响应了。如下所示:

    <asp:Panel ID="Panel1" CssClass="popupbox" runat="server" Height="50px" Width="125px">
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                        <ContentTemplate>
                            <asp:RadioButtonList AutoPostBack="true" ID="RadioButtonList1" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                                <asp:ListItem Text="广州市"></asp:ListItem>
                                <asp:ListItem Text="佛山市"></asp:ListItem>
                                <asp:ListItem Text="深圳市"></asp:ListItem>
                                <asp:ListItem Text="东莞市"></asp:ListItem>
                            </asp:RadioButtonList>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </asp:Panel>

    准备好所有代码之后我们还需要建立一个CSS样式,否则不能控制Popup载体的显示和消失了,样式文件如下:

    .popupbox
    {
        visibility:hidden;
        border-color:#000;
        background:#ff9900;
        font-size:12px;
    }

    注意:一定要加visibility:hidden,否则Popup就不能隐藏了,这也是CSS样式的关键作用。

    第二步:配置PopupControlExtender

    由于PopupControlExtender需要配置的属性太多,我们切换到源代码窗口进行设置,如下所示:

    <ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" TargetControlID="TextBox1" PopupControlID="Panel1" CommitScript="e.value;" Position="Bottom" CommitProperty="value" runat="server">
    </ajaxToolkit:PopupControlExtender>

     

    TargetControlID是指PopupControlExtender的目标控件ID,即获取返回值的控件ID,这里应该是TextBox1,因为我们从RadioButtonList选择好的项需要在TextBox1中显示。PopupControlID是指Popup载体控件的ID,关于Popup载体的解析在文章的开始部分已有说明,这里应该是Panel1。CommitScript是指选择完成后调用的Js脚本,这里写e.value意思是返回选择项的value值。大家可以适当扩充一下,例如"'你已选择了' + e.value; ",注意:这里的语法一定要严格遵守Js的书写格式,别忘了最后要写分号。Position指Popup载体出现在目标控件的位置,大家根据喜好选择。CommitProperty是指Popup载体中控件的返回值属性,这里就是指RadioButtonList的值的属性名称,大家可以改成Text试试。

    第三步:编写常规代码

    到了这一步就离完成不远了,我们只需要在cs文件中指定一下RadioButtonList的返回值。双击RadioButtonList1切换到CS代码窗口,编写代码,如下所示:

    protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
    {
         if(RadioButtonList1.SelectedValue != null)
        {
    PopupControlExtender.GetProxyForCurrentPopup(this.Page).Commit(RadioButtonList1.SelectedValue);
         }
         RadioButtonList1.ClearSelection();
    }

    代码很简单,这里就不作解析了。注意:写这段代码之前一定要先using AjaxControlToolkit

  • 相关阅读:
    java要注意的问题1
    广义表(线性表的推广)
    java基本类型和包装器类
    面试题10:斐波那契数列
    面试题9:用两个栈实现队列
    面试题8:二叉树的下一个结点
    10 分组数据
    9 汇总数据
    8 使用数据处理函数
    7 创建计算字段
  • 原文地址:https://www.cnblogs.com/bobofsj11/p/1514761.html
Copyright © 2011-2022 走看看