ASP.NET Popup Composite Control with close detection

• Download Sample Project - 36.45 KB

Introduction

Some time ago I had a project in hand which needed so many popup windows here and there to enter and edit data, but I had to perform a postback in asp.net to register startup script for popup also I couldn't detect popup window close so had to use hovering divs or make user to refresh the window in order to see the changes s/he made.

This control will address these needs and I find it very simple to use. 

Background

Some understanding of javascript and composite controls will help you to understand and customize the control. 

Understanding the code

This control is consisted of two parts, first the asp control containing the functionalities of server side, and second the javascript which handles things on client side. 

• The control inherits CompositeControl class and implements IPostBackEventHandler, it generates javascript function line (using JFunc() method) based on the parameters provided via properties like url, PopupWidth, hight and etc. and embeds it into href attribute of <a> tag which will be called on client side. It also Registers PopupHandler.js in the ScriptManager so it'll be available for mentioned function call.
  
  Also every time a property changes SetProps() method will be called to ensure the changes being displayed.
  This control has an event PopupClose which triggers when user closes popup window.
   

• The javascript performs two tasks: 

1. Displaying the popup window. I tried to include ways of displaying modal and modeless popups compatible with IE, Opera and FireFox.
   IE supports window.showModalDialog() method which will be called in case browser supports it and this will be detected by this line of code
JavaScript

if (window.showModalDialog){...} 




otherwise window.open() method will be called. Each method has it's own way of passing parameters and options so the option string will be prepared accordingly.




2. Detecting popup close, causing a postback and triggering the event on server side. 

SetCloseHandler() method will create a timer which checks the popup window on 100 ms intervals and when detects it's closure fires __doPostBack() 

Using the code

It's quite easy to use the control:

1. Copy "PopupCommand" folder into your project (preferably into a new assembly project named "Popup" otherwise change "Popup" namespace in PopupCommand.cs to your desired namespace [lines 12,13,14,53])
2. Set BuildAction of "PopupHandler.js" to "Embedded Resource"and build the project
3. Drag newly added item named PopupCommand from the toolbox wherever you need the popup control
    
   
   ASP.NET

   <hmc:PopupCommand
   	ID="PopupCommand1"
   	runat="server" />

4. Set the parameters of control regarding to your need
    
   
   ASP.NET

   <hmc:PopupCommand
   	ID="PopupCommand1"
   	runat="server"
   	Url="http://www.google.com"
   	Text="Popup"
   	ImageUrl="~/Images/Image.png" />

You can also double click on inserted control and handle PopupClose
server event

Properties

• Text:  Text to be displayed
• EntityName: Name of entity being displayed in the popup (optional)
• EntityID: Unique identifier of entity being displayed in the popup (optional)
  
  it will also replace @ID in url if present, this way dynamically generated url's can include ID of the entity
  
• Url: Url of the page being displayed in the popup window
• PopupWidth: Width of popup window
• PopupHeight: Height of popup window
• ImageUrl: Url of the image to be displayed next to control's text 
• CommandName: The command name which will be passed to server side event handler of PopupClose event
• CommandArgument: The command argument which will be passed to server side event handler of PopupClose event

Events

• PopupClose: Will be triggered when user closes popup window and will return command name and argument specified in properties