Modal Popup Extender Basics

• Download AjaxControlToolkit - 383.52 KB
• Download ModalDialogExtender - 385.43 KB

Introduction

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 ModalPopupExtender) is extremely essential in today’s applications, as writing JavaScript 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

1. Create a new AjaxEnabledWebSite from the Visual Studio Project Wizard options.
2. Add the AjaxControlToolkit.dll which is attached with this article to the reference collections of the Web Project. 
3. In any page in your Web Application (let's say Default.aspx), add a Link Button named like "View Job Details".
4. 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. 
5. If the ScriptManager tag is not present in your form, then it should be specified inside the Form tag. 
ASP.NET

<asp:ScriptManager ID="ScriptManager1" runat="server" />  

6. Design the page as shown below: 

<shapetype id="_x0000_t75" coordsize="21600,21600" o:preferrelative="t" o:spt="75" filled="f" stroked="f" path=" m@4@5 l@4@11@9@11@9@5 xe"><stroke joinstyle="miter"><formulas /><f eqn="if lineDrawn pixelLineWidth 0 "><f eqn="sum @0 1 0 "><f eqn="sum 0 0 @1 "><f eqn="prod @2 1 2 "><f eqn="prod @3 21600 pixelWidth "><f eqn="prod @3 21600 pixelHeight "><f eqn="sum @0 0 1 "><f eqn="prod @6 1 2 "><f eqn="prod @7 21600 pixelWidth "><f eqn="sum @8 21600 0 "><f eqn="prod @7 21600 pixelHeight "><f eqn="sum @10 21600 0 "></formulas /></f></f></f></f></f></f></f></f></f></f></f></f><f eqn="if lineDrawn pixelLineWidth 0 "><f eqn="sum @0 1 0 "><f eqn="sum 0 0 @1 "><f eqn="prod @2 1 2 "><f eqn="prod @3 21600 pixelWidth "><f eqn="prod @3 21600 pixelHeight "><f eqn="sum @0 0 1 "><f eqn="prod @6 1 2 "><f eqn="prod @7 21600 pixelWidth "><f eqn="sum @8 21600 0 "><f eqn="prod @7 21600 pixelHeight "><f eqn="sum @10 21600 0 "><path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"><lock aspectratio="t" v:ext="edit"><shape id="Picture_x0020_1" style="width: 559.5pt; height: 265.5pt;" coordsize="21600,21600" o:spid="_x0000_i1025" type="#_x0000_t75"><imagedata src="/KB/ajax/ModalPopupExtender/20Control_files/image001.jpg" o:href="cid:image003.jpg@01C87E20.6E62C880">

7. 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 
{
    margin:0;
    padding:0;
    border:none;
}

/* Modal Pop-up */ 

.modalBackground 
{
    background-color:
    filter:alpha(opacity=70);
    opacity:0.7; 
} 

.modalPopup 
{
    background-color:#ffffdd; 
    border-width:3px; 
    border-style:solid; 
    border-color:Gray; 
    padding:3px; 
    width:250px; 
}

8. In the head tag, place the following code:
ASP.NET

<link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 

9. Now place the following code just above the Panel control in a seprate row:
ASP.NET

<ajaxtoolkit:modalpopupextender 
    id="ModalPopupExtender" 
    runat="server" 
    backgroundcssclass="modalBackground" 
    cancelcontrolid="CancelButton" 
    dropshadow="true" 
    okcontrolid="OkButton" 
    popupcontrolid="Panel1" 
    popupdraghandlecontrolid="Panel3" 
    targetcontrolid="lbn_job_det"> 
</ajaxtoolkit:modalpopupextender> 

The 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 OnCancelScript attributes. You just need to use any JavaScript function to do that. There is a OnOkScript attribute as well.

10. It’s mandatory to register the assembly (AJAXControlToolKit.dll). So the following code has to be placed after the page directive.

<%@ Register Assembly="AjaxControlToolkit" 
    Namespace="AjaxControlToolkit" 
    TagPrefix="ajaxToolkit" %>  

11. Now here comes the demo, just click on the "View job Details" button and see the Modal Popup.



<shape id="Picture_x0020_2" style="width: 516pt; height: 356.25pt;" coordsize="21600,21600" o:spid="_x0000_i1026" type="#_x0000_t75"><imagedata src="/KB/ajax/ModalPopupExtender/20Control_files/image002.jpg" o:href="cid:image006.jpg@01C87E20.6E62C880">

12. 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.

<shape id="Picture_x0020_3" style="width: 634.5pt; height: 351pt;" coordsize="21600,21600" o:spid="_x0000_i1027" type="#_x0000_t75"><imagedata src="/KB/ajax/ModalPopupExtender/20Control_files/image003.jpg" o:href="cid:image009.jpg@01C87E20.6E62C880">

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.