PopupControlExtender Control In Ajax

PopupControl is an ASP.NET AJAX extender that can be attached to any control in order to open a popup window that displays additional content. This popup window will probably be interactive and will probably be within an ASP.NET AJAX UpdatePanel, so it will be able to perform complex server-based processing (including postbacks) without affecting the rest of the page. The popup window can contain any content, including ASP.NET server controls, HTML elements, etc. Once the work of the popup window is done, a simple server-side call dismisses it and triggers any relevant script on the client to run and update the page dynamically.



PopupControl Properties:-

1.TargetControlID :- The ID of the control to attach to
2. PopupControlID: - The ID of the control to display
3. Position :- Optional setting specifying where the popup should be positioned relative to the target control. (Left, Right, Top, Bottom, Center)
4. CommitProperty: - Optional setting specifying the property on the control being extended that should be set with the result of the popup
5. CommitScript :- Optional setting specifying additional script to run after setting the result of the popup
6.OffsetX/OffsetY :- The number of pixels to offset the Popup from its default position, as specified by Position.
7. Animations :- Generic animations for the PopupControlExtender.
 OnShow :- The OnShow animation will be played each time the popup is displayed. The popup will be positioned correctly but hidden. The animation can use to display the popup along with any other visual effects.
 OnHide: - The OnHide animation will be played each time the popup is hidden.

Example:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PopupControlExtender.aspx.cs" Inherits="PopupControlExtender" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<form id="form1" runat="server">
 <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </asp:ToolkitScriptManager> <div>
 <b>Enter Date: </b>
 <asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
 <asp:Panel ID="Panel1" runat="server">
 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
 <ContentTemplate>
 <asp:Calendar ID="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged" BackColor="#FFFFCC" BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" Height="200px" ShowGridLines="True" Width="220px">
 <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />
 <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
 <OtherMonthDayStyle ForeColor="#CC9966" />
 <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
<SelectorStyle BackColor="#FFCC66" />
<TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" /> <TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
 </asp:Calendar>
 </ContentTemplate>
</asp:UpdatePanel>
 </asp:Panel>
 <asp:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="txtDate" PopupControlID="Panel1" Position="Bottom">
</asp:PopupControlExtender>
</div>
 </form>

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
 // Popup result is the selected date PopupControlExtender1.Commit(Calendar1.SelectedDate.ToShortDateString());
}

Output:-