本章主要介紹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等，大家可以自己試驗一下。

?

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

轉載于:https://www.cnblogs.com/sishierfei/archive/2009/11/25/1610587.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。