• [转]轻松掌握Ajax.net系列教程十六:使用DropDownExtender


    本章主要介绍DropDownExtender的使用方法。以前要做一个带DropDownList的TextBox控件可是大费周章,脚本代码一大堆,而且还要兼顾和后台的交互,否则只能做静态的DropDownList。但现在有了DropDownExtender,一切烦恼迎刃而解。

    第一步:建立Ajax Control Toolkit Website

    本例子需要一个TextBox控件、N个LinkButton控件、一个DropDownExtender组件和一个UpdatePanel组件。把所有组件拖进设计界面后代码如下所示:

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:TextBox ID="TextBox1" Text="请选择项" runat="server"></asp:TextBox>
                    <asp:Panel CssClass="ContainPanel" ID="Panel1" runat="server" Height="50px" Width="125px"
                        Style="visibility: hidden">
                        <asp:LinkButton ID="LinkButton1" CssClass="link" runat="server" OnClick="OnSelect">选项一</asp:LinkButton><br />
                        <asp:LinkButton ID="LinkButton2" CssClass="link" runat="server" OnClick="OnSelect">选项二</asp:LinkButton><br />
                        <asp:LinkButton ID="LinkButton3" CssClass="link" runat="server" OnClick="OnSelect">选项三</asp:LinkButton><br />
                        <asp:LinkButton ID="LinkButton4" CssClass="link" runat="server" OnClick="OnSelect">选项四</asp:LinkButton>
                    </asp:Panel>
                    <ajaxToolkit:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="TextBox1"
                        DropDownControlID="Panel1">
                    </ajaxToolkit:DropDownExtender>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="LinkButton1" EventName="Click" />
                    <asp:AsyncPostBackTrigger ControlID="LinkButton2" EventName="Click" />
                    <asp:AsyncPostBackTrigger ControlID="LinkButton3" EventName="Click" />
                    <asp:AsyncPostBackTrigger ControlID="LinkButton4" EventName="Click" />
                </Triggers>
    </asp:UpdatePanel>

    注意:以上代码有几个要点,第一、所有组件都要放在UpdatePanelContentTemplate里,这样做才能在TextBox1中显示所选择的值。如果大家不需要在TextBox1中显示选择的值,那么UpdatePanel中只需要放显示值的控件即可,TextBox1Panel1DropDownExtender都可以放在UpdatePanel外面。第二、Panel1一定要加Style="Visibility:hidden",否则在Ajax.net脚本库完全加载完毕之前,Panel1会显示出来,产生闪烁的不良效果。

    以下是CSS样式代码,大家参考一下:

    .ContainPanel
    {
        background:#ffcc00;
        font-size:12px;
        padding:3px;
        border:solid 1px #666;
        line-height:150%;
    }
     
    .link
    {
        color:#666;
        font-size:12px;
    }

    第二步:设置DropDownExtender

    DropDownExtender的设置非常简单,就两个属性,代码如下所示:

    <ajaxToolkit:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="TextBox1"  DropDownControlID="Panel1">              </ajaxToolkit:DropDownExtender>

    TargetControlID是指激活下拉菜单的控件ID,这里是TextBox1DropDownControlID是指下拉菜单载体的控件ID,这里是Panel1

    第三步:编写后台代码

    大家发现前面的LinkButton点击后都会执行一个叫OnSelect的函数,现在我们转到CS文件编写这个函数,代码很简单,如下所示:

    protected void OnSelect(object sender, EventArgs e)
    {
            TextBox1.Text = ((LinkButton)sender).Text;
    }

    该函数的意思是在TextBox1显示所选择的值。

    OK,运行,效果如下图:

    一般状态中TextBox1只是一个平凡的TextBox。

    当用鼠标点击时,下拉菜单出现了。

    选择完后菜单消失,所选择的值显示在TextBox1中。

    结束:

    本章主要介绍了DropDownExtender的使用方法。有了DropDownExtender,我们可以把DropDownList整合到很多控件上面,包括TextBox、Label、Panel等,大家可以自己试验一下。

    引用地址:http://www.falaosao.net/article.asp?id=168

  • 相关阅读:
    API 生命周期管理
    devops注意事项
    持续交付
    如何进行自动化测试
    环境分类
    多环境配置管理
    一包到底
    111 Lucky
    python反射机制 Lucky
    单元测试框架(unittest) Lucky
  • 原文地址:https://www.cnblogs.com/sishierfei/p/1610587.html
Copyright © 2020-2023  润新知