Ajax controltoolkit-popupcontrolextender 3

Popupcontrolextender is a component that can control the popup vector. It does not generate a popup control. Its function is to control the popup vector, such as panel, div and so on, and get the return value of the control in the popup vector, and return it to the target control. Next, let's take a look at how to use popupcontrolextender.

 

 

 

Note:Updatepannel must be placed in the panel; otherwise, JS exceptions may occur after one operation. In addition, you must set the autopostback attribute of radiobuttonlist to true. Otherwise, no response is returned. As follows:

< ASP : Panel ID= "Panel1" Cssclass= "Popupbox" Runat= "Server" Height= "50px" Width= "125px"> <ASP:Updatepanel ID= "Updatepanel1" Runat= "Server"> contenttemplate > Asp : radiobuttonlist autopostback =" true " id =" radiobuttonlist1 " runat =" server " onselectedindexchanged =" radiobuttonlist1_selectedindexchanged "> <ASP:Listitem Text=" Guangzhou City "> </ ASP : Listitem > <ASP:Listitem Text=" Foshan City "> </ ASP : Listitem > <ASP:Listitem Text=" Shenzhen City "> </ ASP : Listitem > <ASP:Listitem Text=" Dongguan City "> </ ASP : Listitem > </ASP:Radiobuttonlist> </Contenttemplate> </ASP:Updatepanel> </ASP:Panel>

Prepare allCodeThen we need to create a CSS style. Otherwise, we cannot control the display and disappearance of the popup carrier. The style file is as follows:

. Popupbox { Visibility:Hidden; Border-color:#000; Background:# Ff9900; Font-size:12px; }

Note:Be sure to addVisibility:Hidden, otherwise the popup cannot be hidden, which is also the key role of CSS styles.

Step 2: Configure popupcontrolextender

Because too many attributes need to be configured for popupcontrolextender, we switchSource codeWindow, as shown below:

< Ajaxtoolkit : Popupcontrolextender ID= "Popupcontrolextender1" Targetcontrolid= "Textbox1"Popupcontrolid= "Panel1" Commitscript= "E. value ;" Position= "Bottom" Commitproperty= "Value"Runat= "Server"> </ Ajaxtoolkit : Popupcontrolextender >

 

Targetcontrolid refers to the target control ID of popupcontrolextender, that is, the Control ID that gets the returned value. Here it should be textbox1, because the items selected from radiobuttonlist need to be displayed in textbox1. Popupcontrolid refers to the ID of the popup carrier control.ArticleThe start part of the project already exists. Here it should be panel1. Commitscript refers to the JS script called after the selection is complete. Writing E. value here indicates that the value of the selected item is returned. You can expand it as needed, for example, "you have selected '+ E. value ;",Note:The syntax here must strictly abide by the JS writing format. Don't forget to write a semicolon at last. Position refers to the position where the popup vector appears in the target control. Commitproperty refers to the return value attribute of the control in the popup vector. Here it refers to the attribute name of the value of radiobuttonlist. You can change it to text.

Step 3: Write Common Code

This step is not far from complete. We only need to specify the return value of radiobuttonlist In the CS file. Double-click radiobuttonlist1 to switch to the CS code window and write the code as follows:

Protected VoidRadiobuttonlistpolicselectedindexchanged (ObjectSender,EventargsE) { If(Radiobuttonlist1.selectedvalue! =Null) { Popupcontrolextender . Getproxyforcurrentpopup (This. Page). Commit (radiobuttonlist1.selectedvalue ); } Radiobuttonlist1.clearselection (); }

The code is very simple and will not be parsed here.Note:: Before writing this code, you must first using ajaxcontroltoolkit