Use the ASP. NET Ajax-popupcontrol Control

Document directory

• Introduction
• Important attributes
• Instance

Introduction

Popupcontrol can pop up any type of controls, whether on the server control or HTML control. When a control obtains the focus, another control is displayed. After some operations are performed, the displayed control is hidden.

Important attributes

Targetcontrolid: ID of the control to be popped up
Popupcontrolid: ID of the pop-up control
Position: the position of the pop-up control
Offsetx/offsety: The relative coordinates of the pop-up control and the default position

Instance

1. Open vs2005 and create an ajaxcontroltoolkit website named ajaxpopupcontrol.
2. Open the default. ASPX page generated by default and switch to the design view of the form.
3. Drag an updatepanel, popupcontrolextender, Textbox, and calendar control on the page.
4. Set the attributes of the popupcontrolextender control. The calendar control is displayed on the right side of the popupcontrolextender control when the focus is obtained.

<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server"                  TargetControlID="TextBox1" PopupControlID="Calendar1" Position="right"></ajaxToolkit:PopupControlExtender>

5. Add code to the selectionchanged event of the calendar control so that the selected date can be displayed in the text box after the date is selected, as shown below:

protected void Calendar1_SelectionChanged(object sender, EventArgs e){    this.TextBox1.Text = this.Calendar1.SelectedDate.ToShortDateString();}

6. Save the design and run the program. When you click the text box, the calendar control is displayed on the right of the text box. Select a date and the date will be displayed in the text box.