I want to take this opportunity to introduce a new useful control that can make our web applications really interactive. In this quick demonstration, I am going to show you how we can implement a modal Dialog Box using AJAX in ASP.NET. Modal Dialog Box (formally called
window.open() to open a pop-up or to open a separate ASP.NET page as a pop-up are sometimes very tedious, time consuming and more importantly, many times performance has to be sacrificed. A simple example can prove my point.
Steps for demonstration
- Create a new
AjaxEnabledWebSite from the Visual Studio Project Wizard options.
- Add the AjaxControlToolkit.dll which is attached with this article to the reference collections of the Web Project.
- In any page in your Web Application (let's say Default.aspx), add a Link Button named like "View Job Details".
- Add an HTML table with some static values and an OK and Cancel button. Place these controls (not the link button) inside a Panel control.
- If the
ScriptManager tag is not present in your form, then it should be specified inside the
<asp:ScriptManager ID="ScriptManager1" runat="server" />
- Design the page as shown below:
- Add the following style sheet to a separate new file or the page itself. In this example, a separate file called StyleSheet.css has been created and included in the page.
body, div, p, h1, h2, h3, h4, ul, li, table
/* Modal Pop-up */
- In the
head tag, place the following code:
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
- Now place the following code just above the Panel control in a seprate row:
CancelControlId property of the
ModalPopUpExtender signifies that which control is treated as the Cancel button. By default property of this control is to close the dialog. But it can be customized using
OnOkScript attribute as well.
- It’s mandatory to register the assembly (AJAXControlToolKit.dll). So the following code has to be placed after the page directive.
<%@ Register Assembly="AjaxControlToolkit"
- Now here comes the demo, just click on the "View job Details" button and see the Modal Popup.
- You can change the opacity, background color of the background. It’s all up to you and how you can play with style sheet to make your application more interactive.
This is a basic idea and demonstration about how to implement Modal Popup Extender in ASP.NET. The representation shows above simply demonstrates a Search window. This window contains a
GridView which itself calls a web service to produce the search result. Please send your thoughts, ideas, suggestions and views.