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.
private void AddAttributes()
{
wsinsertbtn.Attributes.Add("onclick",
"javascript:return openWorkOutStrategyPopUp('" +
wsgetLatestbtn.ClientID + "');");
}
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;
}
.displayNone{display: none;}
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();
}
}
}
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();
}
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;
}
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; }
}
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();
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;
}
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();
}
}
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.
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.