ASP.net Communication Between Parent And Child Windows

1. Introduction
2. Open the child window
3. Update the child window text box from the parent window
4. Update the Parent window text box from the child window

Introduction

Recently for one my asp project, I have to open pop windows from the parent window and have to set values from child window to parent and vice versa. Of course, doing this kind of things is very simple. But, I did not found enough tutorial on this so thought of investing some time to write tutorial on this topic.

In this tutorial their will be a textbox and button controls on the parent and child windows, if we enter a value and press button, the value in the text box will be displayed/updated in the other window.

Parent window have a textbox and two button control, where one button control open the child window and other button updates the text box value to the child window (with the caption update the child window). Now in the page load function, we will add code to call the javascipt functions as follows:

1. protected void Page_Load(object sender, EventArgs e)
2. {
3.    this.OpenChildWindowButton.Attributes.Add("onclick", openChildWindow());
4.  
5.    this.UpdateChildWindowButton.Attributes.Add("onclick", UpdatechildWindow());
6.  
7. }

Child windows also have one textbox and one button controls. And we are adding following code on the page_load event:

1. protected void Page_Load(object sender, EventArgs e)
2. {
3.    this.UpdateParentwindowButton.Attributes.Add("onclick","UpdateParentWindow()");
4. }

As you observed there are three functions, openChildWindow(), UpdatechildWindow(), UpdateParentWindow(), these functions are coded in the javascirpt. I will explain them in the following sections:

• Open the child window
• Update the child window text box from the parent window
• Update the Parent window text box from the child window

Open the child window

We called a java script function in the parent window to open the child window, that is openChildWindow() as follows:

1. <script language=javascript>
2.  
3. Var childwindow;
4.  
5. function OpenChildWindow()
6. {
7. Childwindow = Window.open(“Childwindow.aspx”);
8. }
9.  
10. </script>

Window.open javascript function opens the child window. Here we opened child window with ChildWindow.aspx.

Update the child window text box from the parent window

To update the child window from the parent, we need access to the child window and as well, access to child window controls. We can do that as follows:

1. <script language=javascript>
2.  
3. Var childwindow;
4.  
5. function UpdatechildWindow()
6. {
7.    childwindow.form1.textbox1.value = document.getElementById("TextBox1").value;
8.  
9. }
10.  
11. </script>

We are access the child window using the variable “childwindow” variable which we initialized when are opening the child window in the OpenChildWindow () function.

Update the Parent window text box from the child window

When we open the child window from the parent using the window.open, a new property is created in the child that is window.opener property. With this property we can access the parent window or the creator window from the child window.

1.  
2. <script language=javascript>
3. function UpdateParentWindow()
4. {
5. Window.opener.textbox1.value = document.getElementById("TextBox1").value;
6.  
7. }
8. </script>
9.