Ajax controltoolkit Learning Log-popupcontrolextender (21)

The popupcontrolextender control can be combined with any Asp.net Server Control to bring up a panel and select it.

The following is an example:

1) Create an ASP. NET Ajax-enabled web project in vs2005 and name it popupcontrolextender1.

2) In default. on the ASPX page, drag and drop a Textbox Control named textbox1. Then, drag and drop a panel under the control named Panel1. Drag and Drop An updatepanel in Panel1 and name it updatepanel1; drag and Drop a radiobuttonlist control in updatepanel1 to display options.

CodeAs follows:

1 < ASP: textbox ID = "Textbox1" Runat = "Server" > </ ASP: textbox > < BR />
2 & Nbsp;
3 < ASP: Panel ID = "Panel1" Runat = "Server" Height = "114px" Cssclass = "Popupclass" Width = "125px" >
4 & Nbsp; < ASP: updatepanel ID = "Updatepanel1" Runat = "Server" >
5 < Contenttemplate >
6 & Nbsp; < ASP: radiobuttonlist ID = "Radiobuttonlist1" Runat = "Server" Height = "96px" Width = "80px" Onselectedindexchanged = "Radiobuttonlistpolicselectedindexchanged" Autopostback = "True" >
7 < ASP: listitem > Eat </ ASP: listitem >
8 < ASP: listitem > Sleep </ ASP: listitem >
9 < ASP: listitem > Walk </ ASP: listitem >
10 < ASP: listitem > Speak </ ASP: listitem >
11 </ ASP: radiobuttonlist >
12 </ Contenttemplate >
13 </ ASP: updatepanel >
14 </ ASP: Panel >

3) after completing the preceding steps, drag and drop a popupcontrolextender on the page, name it popupcontrolextender1, and set its attributes.

The Code is as follows: 1 < C0: popupcontrolextender ID = "Popupcontrolextender1" Runat = "Server" Popupcontrolid = "Panel1"
2 Position = "Bottom" Commitproperty = "Value" Targetcontrolid = "Textbox1" > </ C0: popupcontrolextender >
3

Attribute description:
Targetcontrolid: The target control associated with the control.
Popupcontrolid: When the target control obtains the focus, the displayed control is displayed.
Position: Position of the displayed control relative to the target control.
Commitproperty: Select a value in the pop-up panel to set the properties of the target control.

4) press Ctrl + F5 to view the effect in the browser.

As follows: