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.

Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget