Click here to Skip to main content
11,435,319 members (52,060 online)
Click here to Skip to main content

ASP.NET parent page partial refresh after closing popup window

, 17 May 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
Refresh a control in the parent page after closing a pop up window.

Introduction

This article depicts how to refresh a portion of a parent ASP.NET page while closing a child/pop-up window. This won't affect any sessions, cookies, and other public/static variables in the parent page.

Using the code

This sample uses two ASPX pages: Parent.aspx and popup.aspx. Place whatever code you want in the Parent.aspx page with one DataGrid bound with a DataTable. Pass a DataTable as a Session variable to the popup window. Do something in the popup window, e.g., add or remove some data from the DataTable.

Books.JPG

Parent.aspx

Place two similar DataGrids in this page, bind same data with both the grids, and place a hidden button (the Click event of this button is called while closing the popup window). Add a Show button to show the popup window.

<%@ Page Language="C#" AutoEventWireup="true" 
   CodeFile="Default.aspx.cs" Inherits="Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"  runat="server">
<title>Parent-Child</title>
</head>
<body>
<form id="frmParent"  runat="server">
<table id="tableGrid2" cellSpacing="0" cellPadding="0" 
          width="100%" align="center" border="0">
     <tr>
    <td>
          <asp:DataGrid id="GridOne" runat="server" 
             Font-Names="Tahoma" Font-Size="8pt" 
             HorizontalAlign="Center" Width="100%" 
             GridLines="Both" AllowSorting="True" 
             AutoGenerateColumns="False" AllowPaging="True" 
             CellPadding="1" BackColor="Beige">
               <HeaderStyle Font-Size="8pt" Font-Names="Tahoma" 
                  Font-Bold="True" Height="20px" 
                  ForeColor="White" BackColor="#669999" 
                  HorizontalAlign="Left"></HeaderStyle>    
        <Columns>
              <asp:BoundColumn DataField="MagazineName" 
                      HeaderText="Magazine Name"/>
              <asp:BoundColumn DataField="Price" HeaderText="Price"/>
        </Columns>
        <PagerStyle HorizontalAlign="Right" BackColor="#669999" 
                  Mode="NumericPages" ForeColor="White" />
          </asp:DataGrid>
    </td>
     </tr>
</table>

<table id="tableGrid2" cellSpacing="0" cellPadding="0" 
            width="100%" align="center" border="0">
     <tr>
    <td>
          <asp:DataGrid id="GridTwo" runat="server" 
             Font-Names="Tahoma" Font-Size="8pt" 
             HorizontalAlign="Center" Width="100%" 
             GridLines="Both" AllowSorting="True" 
             AutoGenerateColumns="False" 
             AllowPaging="True" CellPadding="1" BackColor="Beige">
               <HeaderStyle Font-Size="8pt" Font-Names="Tahoma" 
                 Font-Bold="True" Height="20px" ForeColor="White"
                 BackColor="#669999" HorizontalAlign="Left"></HeaderStyle> 
        <Columns>
              <asp:BoundColumn DataField="MagazineName" HeaderText="Magazine Name"/>
              <asp:BoundColumn DataField="Price" HeaderText="Price"/>
        </Columns>
        <PagerStyle HorizontalAlign="Right" BackColor="#669999" 
               Mode="NumericPages" ForeColor="White" />
          </asp:DataGrid>
    </td>
     </tr>
</table>

<asp:Button ID="btnHidden" runat="Server" 
     style="display:none" OnClick="btnHidden_Click" />
<asp:Button ID="btnShowPopup" runat="Server" 
     Text="Open Window" OnClick="btnShowPopup_Click" />

</form>
</body>
</html>

Parent.aspx.cs

Create a DataTable (here, I query a SQL table Books having columns BookName, Price, and BookCode. Create functions to bind the grids. Call the function BindGridTwo() to bind GridTwo on the hidden button's Click event (the event will be fired from the pop-up window's JavaScript).

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;

public partial class Parent : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindGridOne();
            BindGridTwo();
        }
    }
    private DataTable CreateDataTable()
    {
        DataSet bookSet = new DataSet();

        string Stmt = "Select BookName,Price,BookCode from Books";
        SqlConnection Conn = new SqlConnection(
          ConfigurationManager.ConnectionStrings["TmpConString"].ConnectionString);
        Conn.Open();
        SqlDataAdapter adapter = new SqlDataAdapter(Stmt, Conn);
        adapter.Fill(bookSet);
        Conn.Close();

        return bookSet.Tables[0];
    }
    private void BindGridOne()
    {
        DataTable bookTable_one = CreateDataTable();

        GridOne.DataSource = bookTable_one;
        GridOne.DataBind();
    }
    private void BindGridTwo()
    {
        DataTable bookTable_one = CreateDataTable();

        GridTwo.DataSource = bookTable_one;
        GridTwo.DataBind();
    }    
    protected void btnHidden_Click(object sender, EventArgs e)
    {
        // Bind GridTwo only(after the modification of table in pop-up window
        // This button click event is performed by Javascript function in pop-up window
        BindGridTwo();
    }
    protected void btnShowPopup_Click(object sender, EventArgs e)
    {
        string popupScript = "<script language="'javascript'">" +
                        "window.open('popup.aspx', 'ThisPopUp', " +
                        "'left = 300, top=150, width=400, height=300, " + 
                        "menubar=no, scrollbars=no, resizable=no')" +
                        "</script>";
        Page.ClientScript.RegisterStartupScript(GetType(), "PopupScript", popupScript);
    }
}

popup.aspx

Just add two buttons in this page; first to update the table, and second to close the window as well as calls the parent page's btnHidden_Click event (this is defined in the client-side script RefreshParent).

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="popup.aspx.cs" Inherits="popup" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head  runat="server">
    <title>Popup window</title>
<script language="Javascript">
function RefreshParent()
{
    window.opener.document.getElementById('btnHidden').click();
    window.close();
}
</script>    
</head>
<body>
<form id="frmpopup"  runat="server">
    <asp:Button ID="btnUpdate" runat="Server" 
      Text="Update Record" OnClick="btnUpdate_Click" />
    <asp:Button ID="btnClose" runat="Server" 
      Text="Close Window" OnClientClick="RefreshParent();" />

    <asp:Label ID="lblMsg" runat="Server" />
</form>
</body>
</html>

popup.aspx.cs

Do something with the Books table. Here, I'm updating a record.

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;

public partial class popup : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // your code, if any
    }
    protected void btnUpdate_Click(object sender, EventArgs e)
    {
        // Do something with the Books Table
        string Stmt = "Update Books Set Price = 1500 Where BookCode = 'CF'";
        SqlConnection Conn = new SqlConnection(
          ConfigurationManager.ConnectionStrings["TmpConString"].ConnectionString);
        SqlCommand cmd = new SqlCommand(Stmt, Conn);
        Conn.Open();
        cmd.ExecuteNonQuery();
        Conn.Close();

        lblMsg.Text = "Record updated";
    }    
}

web.config

You have to define the connection string in the web.config file as shown below:

<connectionStrings>
    <add name="TmpConString" 
      connectionString="Data Source=localhost;
           Initial Catalog=Shopping;User ID=xxxxx;Password=yyyyy" 
      providerName="System.Data.SqlClient"/>
</connectionStrings>

Conclusion

You can notice that the second grid's record against your update query will be updated.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

S Satheesh Kumar
Technical Lead
India India
Microsoft .Net(ASP.Net, C#) Developer in Windows and Web Applications for last 8 years

Comments and Discussions

 
QuestionshowModalDialog instead of window.open? Pin
Timothy Vandeweerd2-Dec-14 11:48
memberTimothy Vandeweerd2-Dec-14 11:48 
GeneralMy vote of 5 Pin
Praveen P N4-Jun-13 0:03
memberPraveen P N4-Jun-13 0:03 
GeneralRe: My vote of 5 Pin
S Satheesh Kumar5-Jun-13 7:18
memberS Satheesh Kumar5-Jun-13 7:18 
QuestionHello Pin
AyeNaingKye14-Oct-12 2:50
memberAyeNaingKye14-Oct-12 2:50 
QuestionNot working :( Pin
alifdadyah1-Feb-12 16:46
memberalifdadyah1-Feb-12 16:46 
AnswerFound the answer Pin
pipdanby13-Jan-12 8:07
memberpipdanby13-Jan-12 8:07 
AnswerFound the answer Pin
pipdanby12-Jan-12 10:47
memberpipdanby12-Jan-12 10:47 
GeneralRe: Found the answer Pin
S Satheesh Kumar13-Jan-12 4:48
memberS Satheesh Kumar13-Jan-12 4:48 
QuestionOnly seems to work in Firefox Pin
pipdanby12-Jan-12 2:51
memberpipdanby12-Jan-12 2:51 
AnswerRe: Only seems to work in Firefox Pin
S Satheesh Kumar12-Jan-12 4:38
memberS Satheesh Kumar12-Jan-12 4:38 
GeneralMy vote of 5 Pin
SreeSiddu29-Jun-11 21:30
memberSreeSiddu29-Jun-11 21:30 
GeneralBest Article Pin
Rajkumar Aili23-Jun-10 21:37
memberRajkumar Aili23-Jun-10 21:37 
GeneralRe: Best Article Pin
S Satheesh Kumar9-Jul-10 20:23
memberS Satheesh Kumar9-Jul-10 20:23 
QuestionIt will throw an exception... Pin
Rakesh Bhavsar24-Aug-09 4:31
memberRakesh Bhavsar24-Aug-09 4:31 
AnswerRe: It will throw an exception... Pin
Steven Berkovitz24-Aug-09 4:32
memberSteven Berkovitz24-Aug-09 4:32 
AnswerRe: It will throw an exception... Pin
S.Satheesh24-Aug-09 19:01
memberS.Satheesh24-Aug-09 19:01 
GeneralRe: It will throw an exception... Pin
zinkii1-Sep-09 3:55
memberzinkii1-Sep-09 3:55 
GeneralRe: It will throw an exception... Pin
S.Satheesh2-Sep-09 4:44
memberS.Satheesh2-Sep-09 4:44 
GeneralA tip for naming container scenarios Pin
Steven Berkovitz18-May-09 8:28
memberSteven Berkovitz18-May-09 8:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150428.2 | Last Updated 17 May 2009
Article Copyright 2009 by S Satheesh Kumar
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid