ASP.NET Popup Windows With Return Values Redux

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: