本章主要介紹DropDownExtender的使用方法。以前要做一個(gè)帶DropDownList的TextBox控件可是大費(fèi)周章，腳本代碼一大堆，而且還要兼顧和后臺(tái)的交互，否則只能做靜態(tài)的DropDownList。但現(xiàn)在有了DropDownExtender，一切煩惱迎刃而解。

第一步：建立Ajax Control Toolkit Website

本例子需要一個(gè)TextBox控件、N個(gè)LinkButton控件、一個(gè)DropDownExtender組件和一個(gè)UpdatePanel組件。把所有組件拖進(jìn)設(shè)計(jì)界面后代碼如下所示：

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> ??????????? <ContentTemplate> ??????????????? <asp:TextBox ID="TextBox1" Text="請(qǐng)選擇項(xiàng)" 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">選項(xiàng)一</asp:LinkButton><br /> ??????????????????? <asp:LinkButton ID="LinkButton2" CssClass="link" runat="server" OnClick="OnSelect">選項(xiàng)二</asp:LinkButton><br /> ??????????????????? <asp:LinkButton ID="LinkButton3" CssClass="link" runat="server" OnClick="OnSelect">選項(xiàng)三</asp:LinkButton><br /> ??????????????????? <asp:LinkButton ID="LinkButton4" CssClass="link" runat="server" OnClick="OnSelect">選項(xiàng)四</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>

注意：以上代碼有幾個(gè)要點(diǎn)，第一、所有組件都要放在UpdatePanel的ContentTemplate里，這樣做才能在TextBox1中顯示所選擇的值。如果大家不需要在TextBox1中顯示選擇的值，那么UpdatePanel中只需要放顯示值的控件即可，TextBox1、Panel1和DropDownExtender都可以放在UpdatePanel外面。第二、Panel1一定要加Style="Visibility:hidden"，否則在Ajax.net腳本庫(kù)完全加載完畢之前，Panel1會(huì)顯示出來(lái)，產(chǎn)生閃爍的不良效果。

以下是CSS樣式代碼，大家參考一下：

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

第二步：設(shè)置DropDownExtender

DropDownExtender的設(shè)置非常簡(jiǎn)單，就兩個(gè)屬性，代碼如下所示：

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

TargetControlID是指激活下拉菜單的控件ID，這里是TextBox1。DropDownControlID是指下拉菜單載體的控件ID，這里是Panel1。

第三步：編寫(xiě)后臺(tái)代碼

大家發(fā)現(xiàn)前面的LinkButton點(diǎn)擊后都會(huì)執(zhí)行一個(gè)叫OnSelect的函數(shù)，現(xiàn)在我們轉(zhuǎn)到CS文件編寫(xiě)這個(gè)函數(shù)，代碼很簡(jiǎn)單，如下所示：

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

該函數(shù)的意思是在TextBox1顯示所選擇的值。

OK，運(yùn)行，效果如下圖：

一般狀態(tài)中TextBox1只是一個(gè)平凡的TextBox。

當(dāng)用鼠標(biāo)點(diǎn)擊時(shí)，下拉菜單出現(xiàn)了。

選擇完后菜單消失，所選擇的值顯示在TextBox1中。

結(jié)束：

本章主要介紹了DropDownExtender的使用方法。有了DropDownExtender，我們可以把DropDownList整合到很多控件上面，包括TextBox、Label、Panel等，大家可以自己試驗(yàn)一下。

?

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

轉(zhuǎn)載于:https://www.cnblogs.com/sishierfei/archive/2009/11/25/1610587.html

總結(jié)

以上是生活随笔為你收集整理的[转]轻松掌握Ajax.net系列教程十六：使用DropDownExtender的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。