How to display a popup window using AJAX in ASP.NET
Some times we may come across the situation to display a pop up when we click on a button or link button or other any server control. We can achieve this task by using AJAX Model pop up extender.
Well, Lets discuss about Ajax, It is an Asynchronous Java Script and XML, it a web technology to make the asynchronous request to the web server using client-side JavaScript and an XmlHttpRequest object.
about AJAX Controls in asp.net
Sript Manager:
Script Manager manges the clent script for ASP.NET AJAX pages. By default it register the script for AJAX library with a Page. It is used to enable the Partial page render for the controls associated to it.
Script manager looks like below in ASP.NET web page
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
Update Panel:
It is one of Important control in AJAX. Update panel enables the partial page rendering in a page part. The update panel having two types of child tags one is ContentTemplate and other is Triggers. The content can be anything that you would normally put on your page. The Triggers tag allows you to define certain triggers which will make the panel update it's content.The update panel looks like as below.
<asp:UpdatePanel ID="upEditableFields" runat="server" UpdateMode="Conditional">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel> Model Popup Extender:
It is an AJAX control which used for enable the popup in asp.net. It is having the properties like PopupControlID and TargetControlID. PopupControlID is used to show in the pop up like as Panel Control.TargetControlID is a used when we click on the control a pop up will be shown.
Below code snippet for enable the popup in asp.net by clicking on the button.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication7.WebForm1" %>
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="upEditableFields" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<Ajax:ModalPopupExtender ID="mpeEditableFields" PopupControlID="pnEditableFields"
TargetControlID="btnDummy" BackgroundCssClass="popupbackground" CancelControlID="btnCancel"
runat="server" RepositionMode="RepositionOnWindowResizeAndScroll">
</Ajax:ModalPopupExtender>
<asp:Panel ID="pnEditableFields" runat="server" CssClass="popup" Width="400px" HorizontalAlign="Center"
Style="display: none">
<table border="0" cellpadding="3" cellspacing="0" width="100%">
<tr>
<td class="popupheader" align="center">
<asp:Label ID="lblHeading" runat="server" Text="Edit Claim"></asp:Label>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="5" cellspacing="2" width="100%">
<tr>
<td align="right" width="140px">
<b>Policy Limits</b>
</td>
<td align="center" width="10px">
:
</td>
<td align="left">
<asp:TextBox ID="txtPolicyLimits" runat="server" Width="200px" CssClass="txtBox"></asp:TextBox>
<Ajax:MaskedEditExtender ID="meePolicyLimits" runat="server" Mask="999,999,999.99"
MaskType="Number" TargetControlID="txtPolicyLimits" InputDirection="RightToLeft"
DisplayMoney="Left">
</Ajax:MaskedEditExtender>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<asp:Button ID="btnUpdate" runat="server" Text="Update" CssClass="btn" Width="100px"
OnClick="btnUpdate_Click" />
</td>
<td width="20px">
</td>
<td align="center">
<asp:Button ID="btnCancel" runat="server" Text="Cancel" CssClass="btn" Width="100px" />
</td>
</tr>
</table>
</td>
</tr>
<tr style="display: none">
<td>
<asp:Button ID="btnDummy" runat="server" Text="View" />
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>