16.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>

注意：以上代码有几个要点，第一、所有组件都要放在UpdatePanel的ContentTemplate里，这样做才能在TextBox1中显示所选择的值。如果大家不需要在TextBox1中显示选择的值，那么UpdatePanel中只需要放显示值的控件即可，TextBox1、Panel1和DropDownExtender都可以放在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，这里是TextBox1。DropDownControlID是指下拉菜单载体的控件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等，大家可以自己试验一下。

下拉菜单 (DropDownExtender)

      用来弥补DropDownList控件只能够显示文本项，不能显示图片项的遗憾，可以制作出图文并茂的下拉列表项来。

      实现思路：用一个Label或TextBox作为显示框，用一个Panel作为显示项的容器，然后用DropDownExtender把二者结合起来，就形成一个界面丰富的下拉列表了。

      语法：

        <ajax:DropDownExtender ID="DropDownExtender1" runat="server"
              TargetControlID="" //要作为显示框的控件的ID
              DropDownControlID=""   //要作为显示下拉列表的Panel的ID
              DropArrowBackColor="" //右加下拉按钮的背景色
              HighlightBackColor=""   //高亮显示时的背景色 
              HighlightBorderColor=""    //高亮显示时的边框色 
              DropArrowImageUrl="" //自定义的下拉箭头的图像
        >
       
      举例一：实现图文并茂的下拉列表

      界面代码：

      <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
      <ajax:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="Label1" DropDownControlID="Panel1" ></ajax:DropDownExtender>
      <asp:Label ID="Label1" runat="server" Text="选择城市："></asp:Label>
      <asp:Panel ID="Panel1" runat="server" Height="50px" Width="150px">
      <table border=0 cellspacing=0 cellpadding=1 width=100%>
      <tr>
            <td><asp:LinkButton ID=L0 runat=server OnClientClick="return itemact(this)"><img src="number/0.gif" />中国北京</asp:LinkButton></td>
      </tr>
      <tr>
            <td><asp:LinkButton ID=L1 runat=server OnClientClick="return itemact(this)"><img src="number/1.gif" />中国天津</asp:LinkButton></td>
      </tr>
      <tr>
            <td><asp:LinkButton ID=L2 runat=server OnClientClick="return itemact(this)"><img src="number/2.gif" />中国上海</asp:LinkButton></td>
      </tr>
      <tr>
            <td><asp:LinkButton ID=L3 runat=server OnClientClick="return itemact(this)"><img src="number/3.gif" />山东济南</asp:LinkButton></td>
      </tr>
      <tr>
            <td><asp:LinkButton ID=L4 runat=server OnClientClick="return itemact(this)"><img src="number/4.gif" />山东青岛</asp:LinkButton></td>
      </tr>
      <tr>
            <td><asp:LinkButton ID=L5 runat=server OnClientClick="return itemact(this)"><img src="number/5.gif" />江苏苏州</asp:LinkButton></td>
      </tr>
      <tr>
            <td><asp:LinkButton ID=L6 runat=server OnClientClick="return itemact(this)"><img src="number/6.gif" />四川成都</asp:LinkButton></td>
      </tr>
      </table>
      </asp:Panel>        

      客户端的JS代码：

      function itemact( it )
      {
            document.getElementById('Label1').innerHTML = it.innerHTML ;
            return false;
      } 
      
      实现的效果：          

           
      举例二：将数据库的内容绑定显示

      要把数据库内容做为列表项显示出来，其实并不难，只要在Panel中放入一个GridView，然后把它与数据源绑定就可以了。

      页面代码：

      <asp:Panel ID="panTitle" runat="server" BackColor="#C0C0FF" Height="20px" Width="125px">打开下拉菜单</asp:Panel>
      <asp:Panel ID="panMenu" runat="server" Width="125px" BackColor="#E0E0E0" BorderWidth="1px">
      <asp:GridView ID="GridView1" runat="server" DataSourceID="ObjectDataSource1" ShowHeader="False" BorderWidth="0px">
      </asp:GridView>
      <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="ShowMenu" TypeName="WS"></asp:ObjectDataSource>
      </asp:Panel>
      <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
      <ajax:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="panTitle" DropDownControlID="panMenu" 
      DropArrowBackColor=red HighlightBackColor=Azure HighlightBorderColor=blue DropArrowImageUrl="images/Expand.gif" ></ajax:DropDownExtender>
           
      显示效果：

转载于:https://www.cnblogs.com/zhangliyu/archive/2008/11/14/1333517.html