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

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

第一步：建立Ajax Control Toolkit Website

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

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

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

<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，运行，效果如下图：