Popup - The .NET Way!...

In this article we are going to build a method and an overload of the same which will open a popup window without using javascript or VB code in the .aspx page.

By: Shajahan Kakkattil ("Shaji") Date: September 18, 2003 Download the code. Printer Friendly Version

I have seen many .NET developers struggling to open popup windows, and sometimes it turned to be the hottest topic in discussion groups. The answer is simple, to use client side script mixed in the HTML (.aspx) page. But sometimes the question goes like..."How can I open a popup window from.net code behind...?"

Well, it seems like people are hesitant to use JavaScript mixed in the .Aspx HTML. I am a strong advocate for not mixing anything in the aspx/ascx. Not only the JavaScript, even the code using the < % = %> tags. Obviously this is something that really needs to be avoided. If you give a thought, in most of the occasions- (I find it all) you can rely on code behind files themselves.

Yes, that's the point. Most of the asp.net developers simply would like to live with code behind.

In this article we are going to build a method and an overload of the same which helps us popup windows in a neat way. Later in this article I will also demonstrate how to popup John Kilgo's ( Create a Popup Calendar for ASP.NET Web Forms) popup calendar without touching the aspx files.

So let us see how this can be done.

Wouldn't it be nice if we can call a function like:
OpenPopUp(ControlToClick, PageToOpen)
right from code behind?

Where "ControlToClick" is any asp.net webcontrol and "PageToOpen" is the page you want to get opened.

Here is the implementation.

 Public Shared Sub OpenPopUp(ByVal opener As System.Web.UI.WebControls.WebControl, ByVal PagePath As String)
   Dim clientScript As String
 
   'Building the client script- window.open
   clientScript = "window.open('" & PagePath & "')"
   'register the script to the clientside click event of the opener control
   opener.Attributes.Add("onClick", clientScript)
 End Sub 

Don't think that window will open up as soon as you call this method. Instead what it does is configure the opener webcontrol to make a client side "window.open" call. Also note that opener control can be any asp.net webcontrol which support client side "onclick".

For example,

 OpenPopup(Button1,"http://www.google.com") 

will configure the aspx Button1 to popup a window with google.com loaded in it.

Here is an overload of the same function to make it a bit more generic. Along with the opener control and the URL you need to pass the name of the window, width and height in pixels. The following method will also make the popup window to position in the center of the screen.

 Public Shared Sub OpenPopUp(ByVal opener As System.Web.UI.WebControls.WebControl, ByVal PagePath As String, ByVal windowName As String, ByVal width As Integer, ByVal height As Integer)
   Dim clientScript As String
   Dim windowAttribs As String
 
   'Building Client side window attributes with width and height.
   'Also the the window will be positioned to the middle of the screen
   windowAttribs = "width=" & width & "px," & _
             "height=" & height & "px," & _
             "left='+((screen.width -" & width & ") / 2)+'," & _
             "top='+ (screen.height - " & height & ") / 2+'"
 
   'Building the client script - window.open, with additional parameters
   clientScript = "window.open('" & PagePath & "','" & windowName & "','" & windowAttribs & "');return false;"
   'register the script to the clientside click event of 'opener' control
   opener.Attributes.Add("onClick", clientScript)
 End Sub 

We haven't invented anything new here.

The opener.attribute.add("onclick",clientScript) in both the methods will register the client-side script for the "onclick" event of the opener button.

But the cool thing is you can continue to live in the codebehind files and can be benefited of the rapid application support that it offers. If you need to make any changes to these functions you can simply do it only in a single place and can catch any compile time errors from with in Visual Studio even before you start to run the code. And avoid wandering thru the aspx/ascx to fix the javascript code.

Before we conclude this article let us have a look at a common scenario - that is to open a date picker to select a date to a text box. Normally in data intensive applications you may find situations to put date picker control many times in a single form I am using John Kilgo's date picker for the demonstration. There is one textbox and an associated image button. The calendar will popup (the child window) on clicking the image button and the selected date will get written back to the text box (on the parent window).

Here is the method declaration. Note that "opener" is the control you want to click and the "dateControl" is the name of the control you want to display the selected date from the date picker.

 Public Shared Sub ShowCalendar(ByVal opener As System.Web.UI.WebControls.WebControl, ByVal dateControl As System.Web.UI.WebControls.WebControl)
   'Call the helper function to set the calender
   OpenPopUp(opener, "CalendarPopup.aspx?textbox=" & dateControl.ClientID, "calendar", 300, 225)
 End Sub 

You may call this method as given below:

 ShowCalendar(ImageButton1,TextBox1)

To open yet another date picker use:

 ShowCalendar(LinkButton2,TextBox2)

Etc.

Notice that you can use any clickable control as opener and any control that supports client side ".value" property as datecontrol. Also "ShowCalendar" is simply making only a call to the "OpenPopup" which we wrote previously with appropriate parameter values. And the important parameter value to be noticed is

dateControl.ClientID

This returns the fully qualified client ID of the control (usercontrol.controlID), so we don't face any difficulty even if the control is placed many levels deep in a user control!

You can keep these methods in a shared library so that it can be invoked with out instantion, that's why I declared all these methods as "Public Shared" So share it! ... and re use it! ... without leaving the codebehind!

You may download the code here.