How to use Ajax PopupControlExtender in Asp.net OR Ajax PopupControlExtender Example - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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.
PopupControlExtender

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

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon