Article: Calling Parent Page from Child
Share/Save/Bookmark
Description: This article will show you how to use a Parent Page with a Child Page.  The Child Page will call the Parent pages javascript method that will inturn call a server side method to perform updates on the page.  The server-side method is triggered by the button click event of a button within an update panel.  A popup is called from the parent page.
1.  In the markup of the Parent Page, add the following:
     a.  A javascript method that will be called by the child page.
     b.  a button to call the child page
     c.  a button within an update panel to execute server-side updates
     d.  a label within an update panel to show that server-side execution has taken place.

<script language="javascript" type="text/javascript">
function refresh()
{
   $get("<%=btnRefresh.ClientID%>").click();
}
</script>


<asp:UpdatePanel ID="upnlButtons" runat="server">
   <ContentTemplate>
      <asp:ImageButton ID="btnOpen" runat="server" Text="Open Child Page" />
   </ContentTemplate>
</asp:UpdatePanel>


<asp:UpdatePanel ID="upnlbody" runat="server" UpdateMode="Conditional">
   <ContentTemplate>
      <asp:Label ID="lblBodyText" runat="server"></asp:Label>
   </ContentTemplate>
</asp:UpdatePanel>


<asp:UpdatePanel ID="upnlRefresh" runat="server">
   <ContentTemplate>
      <asp:Button ID="btnRefresh" runat="server" onclick="btnRefresh_Click" style="visibility:hidden;" />
   </ContentTemplate>
</asp:UpdatePanel>

2.  In the code behind for the parent page, add the following
     a.  An attribut to add to the btnOpen button
     b.  A method to handle the btnRefresh's onclick event

protected void Page_Load( object sender, EventArgs e )
{
   if( !Page.IsPostBack )
   {
      btnOpen.Attributes.Add( "onclick", "window.open('ChildPage.aspx?','ChildPageName','height=300px,width=500px,top=400,left=200')" );
   }
}

protected void btnRefresh_Click( object sender, EventArgs e )
{
   lblBodyText.Text = lblBodyText.Text + " New";
   upnlbody.Update();
}

3.  In the markup of the child page, add the following:
     a.  An "onunloaded" event call in the body tag.
     b.  A javascript function to call the Parent Pages javascript function.

<body onunload="GoBackToParent()">

<script language="javascript" type="text/javascript">
function GoBackToParent()
{
   window.opener.refresh();
}
</script>

4.  From the "btnRefresh_Click" method in the code behind file, you can perform any server-side calls to update the page.  (e.g. update dropdowns, datagrids, etc...)