Erik Lenaerts

ASP.NET Popup v2

In a previous post I talked about a popup mechanism for ASP.NET 2.0. Since that time we have been using it here and there and noticed room for improvement, hence version 2.

Basically I kept the same principle as before with the PopupManager and PopupWindow classes. However I dropped the PopupWindowBase class from the design.

PopupManager
We use this class for factoring PopupWindow objects and for taking care of the results of the popup window. The following image shows the different Methods:

You use the PopupManager as main class for both the parent (page that contains the button for the popup window) as child (the page that is shown in the modal dialog box) page.

PopupWindow
On the parent page, we need to create an instance of the PopupWindow and configure it. First you need to set the page that need to be shown in the modal dialog box. And secondly you need to assign it to a button (any control which implement IButtonControl).

When you want to pass data to the child page you can use 2 possibilities:

1. Pass data via the querystring as displayed in the code below 

PopupManager popupManager = new PopupManager(this);

PopupWindow popup1 = popupManager.CreatePopupWindow("Popup1", 
"SelectCountry.aspx?myvar=myvalue");

2. Pass the data via the ControlParameters Dictionary.

popup2.ControlParameters.Add("country", txtValue1);

Via the ControlParameters Dictionary you can register all controls (that implement the ITextControl interface) that contain data you want to pass to the child page. With this, you're actually telling the PopupWindow to generate client side code that will fetch the value entered in the browser (client side) and add it to the QueryString.

Suppose you have 2 boxes, one for the country and one for the region as shown in the next picture:

In the first popup, the user selects the coutnry from a list. When the popup is closed the country will be set in the first textbox.

When the user clicks on "popup 2" linkbutton, we want to pass the value of the first textbox as parameter to the page shown in the modal dialog box. The problem is that we're still on the client side and that we need to extract the value from the textbox in javascript code and add it to the querystring for the second popup.

The following code is generated by the PopupWindow after the user selected the country.

<script type="text/javascript">
<!--
//Defines the Param Class
function Param(name, value)
{
	this.Name = name;
	this.Value = value;
}

//Adds the parameters to the url
function GenerateUrl(url, params)
{
	var paramDelimiter;
	if (url.indexOf('?') > 0)
		paramDelimiter = '&';
	else
		paramDelimiter = '?';

	//loop over the params and add them to the url
	for (i=0;i<params.length;i++)
	{
		url += paramDelimiter + params[i].Name + '=' + params[i].Value;
		paramDelimiter = '&';
	}

	return url;
}

function Popup1()
{
	var params_Popup1 = new Array(1);
	params_Popup1[0] = new Param('__pid', 'Popup1');
	params_Popup1[1] = new Param('__cid', 'c53e6be8-9b0d-4f24-94d6-732e3aa00c10');

	var url_Popup1 = GenerateUrl('SelectCountry.aspx?myvar=myvalue', params_Popup1);
	window.showModalDialog(url_Popup1,null,
'status:yes;dialogWidth:300px;dialogHeight:200px;
center:yes;edge:Raised;help:yes;resizable:no;scroll:yes');
}

function Popup2()
{
	var params_Popup2 = new Array(2);
	params_Popup2[0] = new Param('__pid', 'Popup2');
	params_Popup2[1] = new Param('__cid', 'cc7438c7-4fa9-4894-983c-f075dd6f5a8f');
	params_Popup2[2] = new Param('country', document.getElementById('txtValue1').value);

	var url_Popup2 = GenerateUrl('SelectRegion.aspx', params_Popup2);
	window.showModalDialog(url_Popup2,null,
'status:yes;dialogWidth:300px;dialogHeight:200px;
center:yes;edge:Raised;help:yes;resizable:no;scroll:yes');
}

// -->
</script>

 The function Param() is the javascript way of defining a Param class.

The function GenerateUrl() takes a base url and extends the URL parameters based on an array of Param objects.

The Popup1() and Popup2() functions are called from the button onclick events. These functions contain the call to the showModalDialog. You can clearly see in Popup2(), that an additional parameter was generated. This parameter takes its value from the txtValue1 BOM (browser object model) element.

The __pid parameter stores the popup id, needed to identify popup 1 or 2. The __cid is the call id needed to fix an issue with the showModalDialog. The problem is that the showModalDialog doesn't request the page from the server anymore when opened for a second or n-the time. However, when the URL changes, it has to request the page again from the server and that's why we always add a unique guid in the url.

version 2.1

In version 2.1 there were 2 changes:

• whenever you call the GetPopupResult() method, you get the result and the session state will be cleared out. This way you can tell when you are in a postback situation of the popup or from somthing else. If the GetPopupId returns null, you are not in a postback from the Popup, if it contains a value, you get the Id from the Popup window.
• The SetPopupResult & GetPopupResult work now with a object type instead of a generic type. This causes less unexpected results.

Conclusion
This release of the ASP.NET popup adds features to pass control parameters to the popup window and fixes a caching issue of the showModalDialog.

v 2.0 Download the Visual Studio 2005 project code here (includes a sample)

v 2.1 Download the Visual Studio 2005 project code here (includes a sample)