Ajax toolkit Control Learning Series (4) -- two panel-related controls

• It mainly refers to the usage of two dropxxxextender under the name.

Let's look at the effect first.

• In the above example, A textbox is in a panel, while dropshadowextender controls the panel, so targetcontrolid is indispensable. Opacity sets transparency. The remaining attributes are described below. As far as I can see, I have not found any specific useful information. Further exploration is needed.

 

Code


   <Ajax: dropshadowextenderID= "DDE"Runat= "Server"Targetcontrolid= "Panel2"Opacity= "0.3"Rounded= "True"Radius= "3">
 

 

• In the dropdownexbutton example, A textbox is an invisible panel with several built-in linkbuttons. The targetcontrolid of this control naturally controls textbox,DropdowncontrolidIt controls the pop-up panel. Click the linkbutton in to trigger the corresponding event and return the value to the textbox. It is worth mentioning thatAsyncpostback in triggerYou need to set the textbox value because it is an asynchronous update triggered by linkbutton.

  <  Form  ID  = "Form1"  Runat  = "Server"  > 
  <  Div  >  
  <  ASP: scriptmanager  ID  = "SM"  Runat  = "Server"  >  
  </  ASP: scriptmanager  >  
 <  ASP: updatepanel  ID  = "Updatepanel1"  Runat  = "Server"  >  
  <  Contenttemplate  >  
  <  BR  />  
  < ASP: Panel  ID  = "Panel2"  Runat  = "Server"  Cssclass  = ""  >  
  <  ASP: Label  ID  = "Lb_username"  Runat  = "Server"  Text  = "" > </  ASP: Label  >  
  <  ASP: textbox  ID  = "Tb_panel2"  Runat  = "Server"  > </  ASP: textbox  >  
  </  ASP: Panel  > 
  <  BR  />  
  <  ASP: textbox  ID  = "Tbinput"  Runat  = "Server"  Text  = ""  > </  ASP: textbox  >  
 <  ASP: Panel  ID  = "Panel"  Runat  = "Server"  Cssclass  = "Panelcss"  Style  = "Visibility: hidden"  >  
  <  ASP: linkbutton  ID  = "LB1"  Cssclass = "Link"  Runat  = "Server"  Onclick  = "Onselect"  >  Option 1  </  ASP: linkbutton  > <  BR  />  
  <  ASP: linkbutton  ID  = "LB2" Cssclass  = "Link"  Runat  = "Server"  Onclick  = "Onselect"  >  Option 2  </  ASP: linkbutton  > <  BR  />  
  <  ASP: linkbutton  ID = "Lb3"  Cssclass  = "Link"  Runat  = "Server"  Onclick  = "Onselect"  >  Option 3  </  ASP: linkbutton  > <  BR  />  
  <  ASP: linkbutton ID  = "Lb4"  Cssclass  = "Link"  Runat  = "Server"  Onclick  = "Onselect"  >  Option 4  </  ASP: linkbutton  >  
  </  ASP: Panel  > 
  <  Ajax: dropdownex.pdf  ID  = "Dropdownextender1"  Runat  = "Server"  Targetcontrolid  = "Tbinput"  
Dropdowncontrolid  = "Panel"  >  
  </  Ajax: dropdownex.pdf  > 
  <  Ajax: dropshadowextender  ID  = "DDE"  Runat  = "Server"  Targetcontrolid  = "Panel2"  Opacity  = "0.3"  
Rounded  = "True"  Radius  = "3"  > 
  </  Ajax: dropshadowextender  >  
  </  Contenttemplate  >  
  <  Triggers  >  
  <  ASP: asyncpostbacktrigger  Controlid = "LB1"  Eventname  = "Click"     />  
  <  ASP: asyncpostbacktrigger  Controlid  = "LB2"  Eventname  = "Click"     />  
  < ASP: asyncpostbacktrigger  Controlid  = "Lb3"  Eventname  = "Click"     />  
  <  ASP: asyncpostbacktrigger  Controlid  = "Lb4"  Eventname  = "Click"     /> 
  </  Triggers  >  
  </  ASP: updatepanel  >  
  </  Div  >  
  </  Form  > 

 

• Description of several dropshadowextender attributes.

Behaviorid: ID of the control's behavior on the client.
Targetcontrolid: the control bound to the control to implement the shadow effect.
Opacity: the transparency of the control that implements the shadow effect.
Rounded: Specifies whether the shadow control has rounded corners.
RADIUS: the radius of the control that implements the shadow effect.

• In msdn, if the eventname is set asynchronously as a button, the attribute is click.

Widget	Default event
Button	Click
Calendar	Selectionchanged
Checkbox	Checkedchanged
Gridview	Selectedindexchanged
Textbox	Textchanged

 

• ReferenceArticle: Kelvin http://www.falaosao.net/article.asp? Id = 168