Introduction: In this article I will try to explain how we can use Ajax PopupControlExtender control in Asp.net.

Description:

Ajax PopupControlExtender control used to open a popup window to display additional information. Popup Control Properties:

TargetControlID: ID of the control to attach to

PopupControlID: ID of the control to display

Position: Optional setting for specify the Popup position i.e. Left, Right, Top, Bottom, Center

CommitProperty: Optional setting specify the control being extend that should be set with the result of the popup

 Add a webform to project. Drag and drop the control from Toolbox. Desgin the .aspx page as shown below:

<asp:ScriptManager ID="ScriptManager2" runat="server">

        </asp:ScriptManager>

        <table><tr><td>Qualification:</td><td><asp:TextBox ID="txtqualification" runat="server"></asp:TextBox></td></tr>

        <tr><td>&nbsp;</td></tr>

        <tr><td>Date:</td><td>

            <asp:TextBox ID="txtcalender" runat="server"></asp:TextBox></td></tr>

        </table>      

        <asp:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="txtqualification"  PopupControlID="panel1"

   Position="Right"

   CommitProperty="value">

        </asp:PopupControlExtender>

        <asp:PopupControlExtender ID="PopupControlExtender2" runat="server" TargetControlID="txtcalender" PopupControlID="pan2" Position="Bottom" CommitProperty="value">

        </asp:PopupControlExtender>      

        <asp:Panel ID="panel1" runat="server">

      <asp:UpdatePanel ID="UpdatePanel1" runat="server">

      <ContentTemplate>

         <asp:RadioButtonList ID="RadioButtonList1" runat="server"

            AutoPostBack="True" BorderColor="#336699" BorderStyle="Solid"

            Width="130px" BorderWidth="1" BackColor="#dadada"

              onselectedindexchanged="RadioButtonList1_SelectedIndexChanged">