ASP.NET Popup Windows With Return Values Redux

by Peter A. Bromberg, Ph.D.

Peter Bromberg

"It’s taken me all my life to learn what not to play.." -- Dizzy Gillespie

We've had several pieces on the subject how to open a popup window and return values to the parent page over the last year here at eggheadcafe.com. I'm revisiting the subject because I wanted to show what could likely be the most simple implementation. The nice thing about this is you can do it all without putting any script into the ASPX (HTML) portion of the page, it can all be injected into the page from your codebehind, where it's easier to control.



The main concept we need to review first is the window.open javascript method, whose syntax is given below, including IE-specific items:

Open Method:

Opens a new window and loads the document specified by a given URL.

Syntax

oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])

Details of the available values are given below:

features Value Description
alwaysLowered When set to yes, this creates a window that always floats below other windows.
alwaysRaised When set to yes, this creates a window that always floats above other windows.
dependent When set to yes, the new window is created as a child (closes when the parent window closes and does not appear on the task bar on Windows platforms) of the current window.
directories When set to yes, the new browser window has the standard directory buttons.
height This sets the height of the new window in pixels.
hotkeys When set to no, this disables the use of hotkeys (except security and quit hotkeys) in a window without a menubar.
innerHeight This sets the inner height of the window in pixels.
innerWidth This sets the inner width of the window in pixels.
location When set to yes, this creates the standard Location entry feild in the new browser window.
menubar When set to yes, this creates a new browser window with the standard menu bar (File, Edit, View, etc.).
outerHeight This sets the outer height of the new window in pixels.
outerWidth This sets the outer width of the new window in pixels.
resizable When set to yes this allows the resizing of the new window by the user.
screenX This allows a new window to be created at a specified number of pixels from the left side of the screen.
screenY This allows a new window to be created at a specified number of pixels from the top of the screen.
scrollbars When set to yes the new window is created with the standard horizontal and vertical scrollbars, where needed
status When set to yes, the new window will have the standard browser status bar at the bottom.
titlebar When set to yes the new browser window will have the standard title bar.
toolbar When set to yes the new window will have the standard browser tool bar (Back, Forward, etc.).
width This sets the width of the new window in pixels.
z-lock When set to yes this prevents the new window from rising above other windows when it is made active (given focus).

 
These features may only be used with IE:
 
channelmode sets if the window appears in channel mode.
fullscreen the new window will appear in full screen.
left same as screenX, allows a new window to be created at a specified number of pixels from the left side of the screen.
top same as screenY, allows a new window to be created at a specified number of pixels from the top of the screen.

Return Value

Returns a reference to the new window object. Use this reference to access properties and methods on the new window.

Remarks

By default, the open method creates a window that has a default width and height and the standard menu, toolbar, and other features of Internet Explorer. You can alter this set of features by using the sFeatures parameter. This parameter is a string consisting of one or more feature settings.

When the sFeatures parameter is specified, the features that are not defined in the parameter are disabled. Therefore, when using the sFeatures parameter, it is necessary to enable all the features that are to be included in the new window. If the sFeatures parameter is not specified, the window features maintain their default values. In addition to enabling a feature by setting it to a specific value, simply listing the feature name also enables that feature for the new window.

Internet Explorer 5 allows further control over windows through the implementation of title in the sFeatures parameter of the open method. Turn off the title bar by opening the window from a trusted application, such as Microsoft Visual Basic or an HTML Application (HTA). These applications are considered trusted, because each uses Internet Explorer interfaces instead of the browser.

When a function fired by an event on any object calls the open method, the window.open method is implied.

OK! Now that we have some documentation, let's look at how to wire up some usable code. First, all the javascript needed for both the parent page and the popup window page is created and emitted from the compiled codebehind classes in this approach. You should never have to look at the ASPX "HTML" for script. There isn't any, until the page is rendered.

The key to returning values from a popup window is that ReturnValue object. When a child window is closed, the returnvalue of the window.open() method is populated. In the child window, you can assign an array to the window.returnValue object, and the parent window can read them out and thus receive multiple values. However, in this approach I use a completely different method that I believe is easier.

My parent window will have an update(array) method that expects a Javascript array - but instead of using the window.returnValue object, I'll simply have the child window call the parent.update(array) method when it closes. In this manner, everything is taken care of in one operation.

Here's the code for the parent page:

public class Default : Page

    {

        protected TextBox txtFirstName;

        protected TextBox txtLastName;

        protected Label Label1;

        protected Label Label2;

        protected HyperLink HyperLink1;

 

        private void Page_Load(object sender, EventArgs e)

        {

            //create our update function

            string scr = @"<script>

                    function update(elemValue)

                  {

                    document.getElementById('txtFirstName').innerText=elemValue[0];

                    document.getElementById('txtLastName').innerText=elemValue[1];

                  }

                  </script>";

            // register the javascript into the Page

            Page.RegisterClientScriptBlock("update", scr);

            //add our popup onclick attribute to the desired element on the page (Here, Hyperlink1)

            HyperLink1.Attributes.Add("onclick", "window.open('popup.aspx',null,'left=400, top=100, height=250, width= 250, status=n o, resizable= no, scrollbars= no, toolbar= no,location= no, menubar= no');");

 

 

        }

And, here's the code for the child "Popup" page:

public class popup : System.Web.UI.Page

    {

        protected System.Web.UI.WebControls.TextBox TextBox1;

        protected System.Web.UI.WebControls.Label Label2;

        protected System.Web.UI.WebControls.TextBox txtLastName;

        protected System.Web.UI.WebControls.TextBox txtFirstName;

        protected System.Web.UI.WebControls.Label Label1;

 

        private void Page_Load(object sender, System.EventArgs e)

        { 

            string scr= @"<script>

        function Done()

            {                                                                               

            var fName=document.getElementById('txtFirstName').value;     

var lName=document.getElementById('txtLastName').value;   

var ret= new Array(fName,lName);

window.opener.update(ret);       

            window.close(); 

            } 

           </script>;";

            Page.RegisterClientScriptBlock("done", scr);

        }

The result, when the hyperlink is clicked, will look like this when the popup is being filled in:

And it will look like so when the user closes the popup:

You can download a Visual Studio.NET 2003 Solution with all the code here.

 


Peter Bromberg is a C# MVP, MCP, and .NET consultant who has worked in the banking and financial industry for 20 years. He has architected and developed web - based corporate distributed application solutions since 1995, and focuses exclusively on the .NET Platform.
Article Discussion: