How to use Pop-UP Window in ASP.NET

How to use Pop-UP Window in ASP.NET

There are two types of Popup extenders in AJAX ASP.NET
1.ModalPopupExtender
2.PopupControlExtender
  
1. The ModalPopup Extender: allows a page to display content to the user in a "modal" manner which prevents the user from interacting with the rest of the page. The modal content can be any hierarchy of controls and is displayed above a background that can have a custom style applied to it. When displayed, only the modal content can be interacted with; clicking on the rest of the page does nothing. When the user is done interacting with the modal content, a click of an OK/Cancel control dismisses the modal content and optionally runs custom script. The custom script will typically be used to apply whatever changes were made while the modal mode was active. If a postback is required, simply allow the OK/Cancel control to postback and the page to re-render. You can also absolutely position a modal popup by setting the X and Y properties. By default it is centered on the page, however if just X or Y is specified then it is centered vertically or horizontally.

ModalPopup Extender Properties:

The control above is initialized with this code. The display on the modal popup element is set to none to avoid a flicker on render. The italic properties are optional:

<ajaxToolkit:ModalPopupExtender ID="MPE" runat="server"
    TargetControlID="LinkButton1"
    PopupControlID="Panel1"
    BackgroundCssClass="modalBackground" 
    DropShadow="true" 
    OkControlID="OkButton" 
    OnOkScript="onOk()"
    CancelControlID="CancelButton" 
    PopupDragHandleControlID="Panel3" />

• TargetControlID - The ID of the element that activates the modal popup
• PopupControlID - The ID of the element to display as a modal popup
• BackgroundCssClass - The CSS class to apply to the background when the modal popup is displayed
• DropShadow - True to automatically add a drop-shadow to the modal popup
• OkControlID - The ID of the element that dismisses the modal popup
• OnOkScript - Script to run when the modal popup is dismissed with the OkControlID
• CancelControlID - The ID of the element that cancels the modal popup
• OnCancelScript - Script to run when the modal popup is dismissed with the CancelControlID
• PopupDragHandleControlID - The ID of the embedded element that contains the popup header/title which will be used as a drag handle
• X - The X coordinate of the top/left corner of the modal popup (the popup will be centered horizontally if not specified)
• Y - The Y coordinate of the top/left corner of the modal popup (the popup will be centered vertically if not specified)
• RepositionMode - The setting that determines if the popup needs to be repositioned when the window is resized or scrolled.

 Test above ModalPopup Extender Example   Clickhere

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


This ModalPopup will be spawned programmatically. The ModalPopupExtender that this popup is attached to has a hidden TargetControl. The popup can be shown via server in code behind and on the client in script by calling the ModalPopupExtender methods to show and hide.


The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:PopupControlExtender ID="PopEx" runat="server"
    TargetControlID="DateTextBox"
    PopupControlID="Panel1"
    Position="Bottom" />

• TargetControlID - The ID of the control to attach to
• PopupControlID - The ID of the control to display
• Position - Optional setting specifying where the popup should be positioned relative to the target control. (Left, Right, Top, Bottom, Center)
• CommitProperty - Optional setting specifying the property on the control being extended that should be set with the result of the popup
• CommitScript - Optional setting specifying additional script to run after setting the result of the popup
• OffsetX/OffsetY - The number of pixels to offset the Popup from its default position, as specified by Position.
• Animations - Generic animations for the PopupControlExtender. See the Using Animations walkthrough and Animation Reference for more details.
  • 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 <HideAction Visible="true" /> to display the popup along with any other visual effects.
  • OnHide - The OnHide animation will be played each time the popup is hidden.

  Test above PopupControlExtender Example   Clickhere

Here you need

1. You need add reference ASP.NET AJAX Control Toolkit  to your website  Download here

OR

Add ASP.NET AJAX Control Tool Kit Controls to your Toolbox

Goto-->ToolBox--->RightClick-->Add New Tab-->give name as AJAX Extensions--->and give a right click on AJAX Extensions and select Choose Items--->Browse-->Ok

See below image for clarification:

2.Open Visual Studio

3.Selecet  --->NEW ----->Website--->Name:PopupwindowExample

4.You need to register the ajaxtoolkit control in the page like webusercontrol

EX: <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

Default.aspx: 

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Popup Window Example</title>
   </head>
<body bgcolor="Silver">
    <form id="form1" runat="server">
    <center>
        <asp:Label ID="Label1" runat="server" Text="Popup Window Example"
            ForeColor="#6066B5" Font-Size="X-Large"></asp:Label></center>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
         <asp:LinkButton ID="LinkButton1" runat="server">Home</asp:LinkButton>
       <br />
    <asp:LinkButton ID="LinkButton2" runat="server">Login</asp:LinkButton>
    <br />
    <br />
       <cc1:ModalPopupExtender ID="ModalPop" runat="server" Enabled="true" TargetControlID="LinkButton2" PopupControlID="Panel1" CancelControlID="Button1"></cc1:ModalPopupExtender>
    <asp:Panel ID="Panel1" runat="server" BackColor="ActiveCaption"
        BorderColor="BlueViolet" Height="322px" Width="500px">
    <center>
    <asp:TextBox ID="txtbox" runat="server" />
    <asp:Button ID="Button1" runat="server" Text="Close PopUP" />
    <asp:UpdatePanel  ID="updatepane" runat="server">
    <ContentTemplate>
    <asp:Button ID="Button2" runat="server" Text="Inside PopUP" />
     </ContentTemplate>
    </asp:UpdatePanel>
</center>
    </asp:Panel>
    <cc1:PopupControlExtender runat="server" Enabled="true" TargetControlID="LinkButton1" PopupControlID="Panel2" Position="Center"></cc1:PopupControlExtender>
       <br />
    <br />
        <asp:Panel ID="Panel2" runat="server" BackColor="Control"
        BorderColor="BlueViolet" Height="322px" Width="500px">
     <center>
    <asp:TextBox ID="TextBox1" runat="server" />
    <asp:Button ID="Button3" runat="server" Text="Close PopUP" />
    <asp:UpdatePanel  ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <asp:Button ID="Button4" runat="server" Text="Inside PopUp" />
     </ContentTemplate>
    </asp:UpdatePanel>
</center>
    </asp:Panel>
</center>
    </asp:Panel>
    </form>
</body>
</html>

OUTPUT:

1.Initial Screen: