How to use Ajax PopupControlExtender in Asp.net OR Ajax PopupControlExtender Example

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

Description:

 In the last article I have explained How to install Ajax control Toolkit in Visual Studio, How to use AutoCompleteExtender Ajax control in Asp.net, How to use TabContainer Ajax Control in Asp.net.

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">  
       

           <asp:ListItem>MCA</asp:ListItem>

           <asp:ListItem>MBA</asp:ListItem>

           <asp:ListItem>M.SC.</asp:ListItem>

           <asp:ListItem>B.TECH.</asp:ListItem>

            <asp:ListItem>GRADUATION</asp:ListItem>

         </asp:RadioButtonList>

      </ContentTemplate>

   </asp:UpdatePanel>

        </asp:Panel>

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

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

        <ContentTemplate>

        <asp:Calendar ID="calnedar" runat="server" SelectedDate="<%# DateTime.Today %>" VisibleDate="<%# DateTime.Today %>"

                onselectionchanged="calnedar_SelectionChanged"></asp:Calendar>

        </ContentTemplate>

        </asp:UpdatePanel>

        </asp:Panel>

Now go to .aspx.cs page and write the below mention code:

    protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)

    {

        PopupControlExtender1.Commit(RadioButtonList1.SelectedValue);

    }

    protected void calnedar_SelectionChanged(object sender, EventArgs e)

    {

        this.PopupControlExtender2.Commit(calnedar.SelectedDate.ToShortDateString());

    }

  

In VB (.aspx.vb)

Protected Sub RadioButtonList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)

        PopupControlExtender1.Commit(RadioButtonList1.SelectedValue)

    End Sub

    Protected Sub calnedar_SelectionChanged(ByVal sender As Object, ByVal e As EventArgs)

        Me.PopupControlExtender2.Commit(calnedar.SelectedDate.ToShortDateString())

    End Sub

Now run the project and check the result.