AJAX Control Toolkit is loaded with many control extenders and these controls extenders provide excellent features to use in ASP.NET websites and applications. These control extenders provide different functionalities for different purposes in a simple and easy way. ModalPopupExtender is one of these control extenders which is used extensively in ASP.NET website and applications. ModalPopupExtender displays a popup box according to your defined functionality and layout and disables entire page other than popup box. All other functionality on the web page will be disabled by the ModalPopupExtender and user can only use functionality provided in popup box. So it prevents user to interact with any other control in the page except the controls in popup box. This popup box can contain any control and functionality that you want to implement and you can also set its layout using style sheets. You can also set the position of the ModalPopupExtender popup box as absolute and can set the content vertical or horizontal but by default it is displayed at the center of the page.
Some important properties for ModalPopupExtender
PopupControlID: ID of control which will be appeared as popup box. This can be panel control or div tag.
TargetControlID: It is the ID of the control which will be used to activate the popup box. This can be a Button control or LinkButton control.
CancelControlID: The ID of the control which will be used to cancel the popup box.
OkControlID: The ID of the control which will be used to OK the functionality in popup box and close the popup box.
BackGroundCssClass: This property is used to define the layout in style sheet for background of the popup box.
Important properties for PopupControlID
Style=”display:none” : This is used to hide the popup control and all other controls in popup control before we need to display it.
CssClass: This is used to set the layout using style sheet for the text and controls in popup control.
1.Open Visual Studio 2010
2.File > New > Website
3.Visual basic or Visual C# > ASP.NET Empty Web Site
4.Website > Add New Item > Web Form
5.Open Toolbox > Right Click > Add Tab
6.Name the Tab As “AJAX Control Toolkit”
7.Click on Tab > Choose Items
8.Browse the “AjaxControlToolkit.dll” > Click Ok
9.I have downloaded and extracted AJAX Control Toolkit in “Ajax” folder in “C” Drive so my path to the file is “C:\Ajax\ AjaxControlToolkit.dll”
10.Open web form and add a ScriptManager control from “AJAX Extensions” tab.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
ScriptManager control is necessary when you are using Ajax functionality in your application.
11.Add a style tag in between head tag for following CSS classes
<style type="text/css">
.modalBackground
{
background-color:Gray;
}
.modalPopup
{
background-color:White;
text-align:center;
padding-top:20px;
border-width: 5px;
border-style: solid;
border-color: black;
width: 500px;
height: 200px;
}
</style>
12.Add a Button control and a Panel control and a Button control inside the Panel control. Also add a ModalPopupExtender control from “AJAX Control Toolkit. Entire code in body tag will look like as below.
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="Button1" runat="server" Text="Create Modal Popup" />
<asp:Panel ID="Panel1" runat="server" style="display:none" CssClass="modalPopup" >
<h3>Welcome to AJAX Control Toolkit</h3>
This is simple example for AJAX ModalPopupExtender
<br />
<br />
<asp:Button ID="Button2" runat="server" Text="Close" />
</asp:Panel>
<ajax:ModalPopupExtender ID="ModalPopupExtender1" PopupControlID="Panel1" TargetControlID="Button1"
CancelControlID="Button2" DropShadow="true" BackgroundCssClass="modalBackground" runat="server">
</ajax:ModalPopupExtender>
</div>
</form>
13.Now see the web site in browser
