1.DropDown Server Reference

TargetControlID - The ID of the control which needs a drop-down.(ex:Label or TextBox)

<補充一點：TargetControl的文本是不能改變的>

DropDownControlID - The ID of the control which will be displayed as the dropdown.

2.Demo

(1)HTML Code

1 <asp:ScriptManager ID="ScriptManager1" runat="server" />
2 <br />
3 <asp:TextBox ID="TextBox1" runat="server" Width="300px">Select an option.</asp:TextBox>
4 <asp:Label ID="TextLabel" runat="server" Text="Select an option." Width="303px"></asp:Label>
5 <asp:Panel ID="DropPanel" runat="server" CssClass="ContextMenuPanel" Style="display :none; visibility: hidden;">
6 <asp:LinkButton ID="Option1" runat="server" Text="Option 1" CssClass="ContextMenuItem" OnClick="OnSelect" />
7 <asp:LinkButton ID="Option2" runat="server" Text="Option 2" CssClass="ContextMenuItem" OnClick="OnSelect" />
8 <asp:LinkButton ID="Option3" runat="server" Text="Option 3 (Click Me !)" CssClass="ContextMenuItem" OnClick="OnSelect" />
9
10 </asp:Panel>
11 <ajaxToolkit:DropDownExtender ID="DDE" runat="server" TargetControlID="TextBox1" DropDownControlID="DropPanel">
12 </ajaxToolkit:DropDownExtender>
13
14 <br /><br /><br />
15
16 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
17 <ContentTemplate>
18 <asp:Label ID="lblSelection" runat="server" Text=""></asp:Label>
19 </ContentTemplate>
20 <Triggers>
21 <asp:AsyncPostBackTrigger ControlID="Option1" EventName="Click" />
22 <asp:AsyncPostBackTrigger ControlID="Option2" EventName="Click" />
23 <asp:AsyncPostBackTrigger ControlID="Option3" EventName="Click" />
24 </Triggers>
25 </asp:UpdatePanel>

(2)C# Code

protected void OnSelect(object sender, EventArgs e)
{
lblSelection.Text = "You selected <b>" + ((LinkButton)sender).Text + "</b>.";
}

(3)CSS Code

1 .ContextMenuPanel
2 {
3 border: 1px solid #868686;
4 z-index: 1000;
5 background: url(images/menu-bg.gif) repeat-y 0 0 #FAFAFA;
6 cursor: default;
7 padding: 1px 1px 0px 1px;
8 font-size: 11px;
9 }
10
11 .ContextMenuBreak
12 {
13 margin:1px 1px 1px 32px;
14 padding:0;
15 height:1px;
16 overflow:hidden;
17 display:block;
18 border-top: 1px solid #C5C5C5;
19 }
20
21 a.ContextMenuItem
22 {
23 margin: 1px 0 1px 0;
24 display: block;
25 color: #003399;
26 text-decoration: none;
27 cursor: pointer;
28 padding: 4px 19px 4px 33px;
29 white-space: nowrap;
30 }
31
32 a.ContextMenuItem-Selected
33 {
34 font-weight: bold;
35 }
36
37 a.ContextMenuItem:hover
38 {
39 background-color: #FFE6A0;
40 color: #003399;
41 border: 1px solid #D2B47A;
42 padding: 3px 18px 3px 32px;
43 }

　　

轉載于:https://www.cnblogs.com/January/archive/2011/08/10/2133334.html

總結

以上是生活随笔為你收集整理的AJAX Control Toolkit - DropDown的全部內容，希望文章能夠幫你解決所遇到的問題。

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