Passing information using a hidden button and Session from a pop up window

• Download source code - 462 KB

Introduction

The article deals with passing information from a popup page to a parent page using sessions and a hidden button on the parent page.

The main purpose of this article is to let developers know of a way to save some real estate on the parent/main page by doing data entry through a popup page.

The developer should have knowledge of C#, ASP.NET, and some idea on JavaScript.

Using this logic/solution, a developer can use a popup window to do data entry and the information is transferred from the popup window to the parent window through Session.

Background

A lot of times, real estate is an important issue faced by applications. Let's take an example of a case where a user enters some information using multiple web controls (i.e., textboxes, dropdownlists, and radiobuttons) and upon a button click, that information is saved as a row into a GridView. Instead of placing these controls on the parent page, the data entry can be done on a popup page that has all the data entry web controls (i.e., the textboxes, dropdownlists, etc.) and removing them from the parent page, thus saving some space. To achieve this, the same kind of GridView should be used on the popup page, and after the user is done entering the information to the popup grid and closes it, the data is transferred to the parent page through a session variable.

One other example is if you have a scenario where the data entry is disabled on the parent window and you can only do data entry on a popup screen (multiple number of rows at the same time); the information from the popup window is saved into a DataSet or any collection object and finally saved into Session. This session is called from the parent window through a button which is triggered through a popup window.

The information can be transferred between a popup window and a parent page using a hidden button on the parent page and then triggering the click event of the hidden button of the parent page from the popup page.

Using the Code

Please feel free to download the solution and run it on Visual Studio 3.5/2.0.

If you look at the solution, I have created two pages, a parent page (ParentPage.aspx) and a PopUpPage.aspx popup page. If you notice, there is no data entry point in ParentPage.aspx, all the data entry is done through PopUpPage.aspx.

The above screenshot is evident of the explanation above, it doesn't have a data entry point. When a user clicks "Add New WorkOut Strategy" link, a new popup window opens up. Before that, the code which calls or opens up the popup window is written in JavaScript which is added to the script tag of ParentPage.aspx.

The name of the JavaScript function is openWorkOutStrategyPopUp. This function accepts a parameter which is passed as a Query String to PopUpPage.aspx.

This function accepts "CtrlID" as a parameter, which is nothing but our hidden button.

The hidden button is placed anywhere on the screen, preferably next to the "Add New Workout Strategy" link button. You don't see the hidden button because it's not actually hidden but the hidden button's style sheet makes it hidden. (The stylesheet class is provided in the code segment below.)

The JavaScript is called in the AddAttributes function of the code-behind file of ParentPage.aspx. The hidden button's clientID is passed as a parameter to the JavaScript function openWorkOutStrategyPopUp.

The code snippet in support of this argument is provided below wherein the AddAttributes function adds attributes to the visible link button (Add New WorkOutStrategy), passing the clientID of the hidden button. Now since the JavaScript is tied to the link button, a popup window opens up when the user clicks it. The clientID of the hidden button is passed as a query string to PopUpPage.aspx.

The popup window opens up.

You will notice the parent page on the background of the popup page. The current example needs the user to select the workout strategy and since the date is pre-filled, the user can click Enter. The moment a user clicks insert, a new row is inserted into a DataSet and it is bound to a GridView and the DataSet is saved into Session. An example screenshot after data entry is shown here:

The Delete button deletes the row of the GridView.

If you notice, the popup window is a typical popup window and it doesn't have any status bar or address bar, but the address bar of the popup window has the ClientID of ParentPage.aspx's hidden button as a query string. The DataSet has all the information that the user entered on this screen, and it is saved into a Session variable.

When the user is done with the data entry, he can simply click the Save and Close button.

This is the interesting part of the whole article, the Save and Close buttons' onClientClick is tied to a JavaScript function "CloseWindow()" which is written on the popup page (please look at the code snippet). The CloseWindow function will close the current popup window and then find the client ID of ParentPage.aspx's hidden button and clicks it. This way, the user doesn't have to close the popup window and do a page refresh on the parent page to get information from the session.

The ParentPage.aspx hidden button's click event will just convert the Session variable which was used by PopUpPage.aspx and bind it to its GridView. The screenshot below displays the final result, i.e., the records from PopUpPage.aspx GridView is transferred to the parent page.

// This is how I pass the client id of the hidden button
// to the Add Attributes Function of ParentPage.aspx.cs

private void AddAttributes()
{
    //note that wsgetLatestbtn is the Hidden Buttons ID and
    //we are passing its client ID, adding attributes to the onclick
    //event of the "Add New WorkOutStrategy" Link Button(wsinsertbtn)
    wsinsertbtn.Attributes.Add("onclick", 
      "javascript:return openWorkOutStrategyPopUp('" + 
      wsgetLatestbtn.ClientID + "');");
}

//Code for openWorkOutStrategyPopUp Javascript function written in ParentPage.aspx
function openWorkOutStrategyPopUp(getlatestbtn) 
{
    var url = 'PopUpPage.aspx?ctrlID=' + getlatestbtn;
    window.open(url, 'PopUpPage', 'toolbar=0,width=700,height=550,top=150,left=200');
    return false;
}

//end JavaScript Code
//CSS for the hidden button
.displayNone{display: none;}
//end CSS.
//the click event of hidden button
protected void wsgetLatestbtn_Click(object sender, EventArgs e)
{
    if (Session["wsrecord"] != null)
    {
        DataSet DS = (DataSet)Session["wsrecord"];
        if (DS.Tables.Count > 0)
        {
            wsgrid.DataSource = DS;
            wsgrid.DataBind();
        }
    }
}

//end click event
//the javascript of popup page which triggers the click event
//of the hidden button on the parent window
//the var buttonid gets the hidden buttons client ID from
//the Query String of PopupPage.aspx's Address bar
function CloseWindow() {
    var par = document.location.search;
    var buttonid = par.substring(par.indexOf('=') + 1, par.length);
    self.opener.window.document.getElementById(buttonid).click();
    window.opener = 'x';
    window.close();
}

//the self.opener.window.document.getElementByID will go the parent page
//and look for the buttonID(since the buttonID is the clientID
//from the QueryString), and clicks it.
// the popup window closes on itself when because of window.close();

//DataSet is Created for Adding Rows
private void CreateWorkOutStrategyDS()
{
    DataSet ds = new DataSet();
    DataTable dt = new DataTable("WSInfo");
    ds.Tables.Add(dt);
    DataColumn dcgid = new DataColumn("uniqueWSID", 
               System.Type.GetType("System.Int32"));
    DataColumn dc1 = new DataColumn("WorkOutStrategyName");
    DataColumn dc2 = new DataColumn("WorkOutStrategyID");
    DataColumn dc3 = new DataColumn("WorkOutStrategyDate");
 
    dt.Columns.Add(dcgid);
    dt.Columns.Add(dc1);
    dt.Columns.Add(dc2);
    dt.Columns.Add(dc3);
    DataColumn[] keys = new DataColumn[1];

    keys[0] = dcgid;
    dt.PrimaryKey = keys;
    Session["wsrecord"] = ds;
}

//the DataSet is saved into a Session["wsrecord"],
//this Session is used in ParentPage.aspx and PopUpPage.aspx.
//WorkOutStrategyEntity
public class WorkOutStrategyEntity
{
#region "Constructor"
    public WorkOutStrategyEntity()
    {
        WorkOutStrategyDate = Convert.ToDateTime("01/01/1900");
        WorkOutStrategyID = -1;
        WorkOutStrategyName = string.Empty;
        WorkOutStrategyOrderID = -1;
    }
#endregion

    public DateTime WorkOutStrategyDate { get; set; }
    public string WorkOutStrategyName { get; set; }
    public int WorkOutStrategyID { get; set; }
    public int WorkOutStrategyOrderID { get; set; }
}

// I would pass each values of the dataentry to each property
// of this Class and pass it to a method which will bind it to a DataSet
// this method will return a DataSet when I pass the
// WorkOutStrategyEntity class as a parameter,
// we can then bind the returned DataSet to the GridView.
private DataSet AddWorkOutStrategyInfo(WorkOutStrategyEntity WS)
{
    DataSet ds = new DataSet();
    DataTable dt = new DataTable("WSInfo");

    if (Session["wsrecord"] != null)
    {
        ds = (DataSet)Session["wsrecord"];
        dt = ds.Tables[0];
        DataRow dr;
        dr = dt.NewRow();

        //Write a logic to check the the uniqueID
        int GIUID = GetGridUniqueID(wsgrid);
        dr["uniqueWSID"] = GIUID;
        dr["WorkOutStrategyID"] = WS.WorkOutStrategyID;
        dr["WorkOutStrategyName"] = WS.WorkOutStrategyName;
        dr["WorkOutStrategyDate"] = WS.WorkOutStrategyDate.ToShortDateString();
        dt.Rows.Add(dr);

        Session["shid"] = dr["uniqueWSID"];
        Session["wsrecord"] = ds;
    }
    return ds;
}

//end AddWorkOutStrategyInfo
//Code for passing a values from web controls to WorkOutStrategyEntity
protected void wsinsertbtn_Click(object sender, EventArgs e)
{
    WorkOutStrategyEntity WS = new WorkOutStrategyEntity();
    WS.WorkOutStrategyDate = DateTime.Now;
    WS.WorkOutStrategyID = Convert.ToInt32(workoutstrategyddl.SelectedValue);
    WS.WorkOutStrategyName = workoutstrategyddl.SelectedItem.ToString();

    try
    {
        DataSet DS = AddWorkOutStrategyInfo(WS);
        wsgrid.DataSource = DS;
        wsgrid.DataBind();
        workoutstrategyddl.SelectedIndex = -1;
    }
    catch (Exception ex)
    {
        wslblMsg.Text = ex.Message.ToString();
    }
}
//end passing values, this class/entity is then passed
//to AddWorkoutStrategyInfo method which will return
//a DataSet which is binded to the GridView.

The code is written in C# and the UI in ASP.NET 3.5.

Points of Interest

AJAX doesn't seem to work on the popup page. I am not sure of the reason, I couldn't get enough reasons for this behaviour. Please don't use AJAX on the popup page. (I used AJAX controls but did not put the grid in an UpdatePanel). The rest of the code is simple and self-explanatory. We can pass the clientID of the hidden button in a number of ways. We can use a session variable and pass the clientID of the hidden button from the parent page and access it in the popup page. We can also add attributes to the Save and Close buttons so that the CloseWindow function can accept any number of parameters.

History

First release on 08/05/09.