AJAX Control Toolkit - DropDown
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 }
