Automaticaly Refresh Parent Window whenever Popup Window is closed

For data driven web application most of the times we need to Refresh or Reload Parent Window while closing Popup Window. There are lot of way to handle this issue. Here i am trying to show you my own process. To describe this problem here i am using DataTable instead of database since anyone can replace my code easily by his own data reader code block. Let’s say we have a requirement that a parent page contains a list of suppliers & just below the list, the client want to add a link “Add more suppliers”. Means if user click on add more supplier link then the link open a popup to enter supplier details. After entering the supplier details when user click on the save button then system automatically save the data & close the popup as well as refresh the Parent Page to reflect the currently added row to the Parent Page Supplier List.

Objective/Output:
Automaticaly Refresh Parent Window whenever Popup Window is closed

So now we can start step by step. At first add a page named parentrefresh.aspx. Then add a GridView to display the existing suppliers. After the GridView we need to add a link button/html button to popup the window. So parentrefresh.aspx looks like:

<b>List of suppliers:</b>

<asp:GridView runat="server" ID="gvEdit" DataKeyNames="ID" AutoGenerateColumns="false" HeaderStyle-BackColor="CornflowerBlue" HeaderStyle-Font-Bold="true" HeaderStyle-ForeColor="White" CellPadding="5">
<Columns>
<asp:BoundField DataField="Code" HeaderText="Code"></asp:BoundField>
<asp:BoundField DataField="Name" HeaderText="Name"></asp:BoundField>
<asp:BoundField DataField="Address" HeaderText="Address"></asp:BoundField>
<asp:BoundField DataField="Contact" HeaderText="Contact no"></asp:BoundField>
</Columns>
</asp:GridView>

<asp:LinkButton runat="server" OnClientClick="window.open('childrefresh.aspx');return false;"
ID="lnkNew">Add more supplier
</asp:LinkButton>

To read existing supplier data from database(here I use DataTable for simplicity) we need to write few server side code under Page_Load event:
C# Code:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataTable dtSupplier;
            if (Session["dtSupplier"] == null)
            {
                //If not populated previously then we need to populate data. Otherwise we read from session.
                dtSupplier = new DataTable("Supplier");
                dtSupplier.Columns.Add(new DataColumn("ID", System.Type.GetType("System.UInt64")));
                dtSupplier.Columns.Add(new DataColumn("Code"));
                dtSupplier.Columns.Add(new DataColumn("Name"));
                dtSupplier.Columns.Add(new DataColumn("Address"));
                dtSupplier.Columns.Add(new DataColumn("Contact"));
                dtSupplier.Rows.Add(1, "st0001", "S.R. Steel", "Uttara, Dhaka", "01711xxxxxx");
                dtSupplier.Rows.Add(2, "ir0039", "Shadesh builders", "Rampura, Dhaka", "01711yyyyyy");
                dtSupplier.Rows.Add(3, "cr0042", "Orchard confec.", "Shahabag, Dhaka", "01711zzzzzz");
                dtSupplier.Rows.Add(4, "er0078", "Windblow", "Mirpur, Dhaka", "01711qqqqqq");
                dtSupplier.Rows.Add(5, "bd0301", "Rahimkarim", "Badda, Dhaka", "01711oooooo");
                Session["dtSupplier"] = dtSupplier;
            }
            else
                dtSupplier = (DataTable)Session["dtSupplier"];
            gvEdit.DataSource = dtSupplier;
            gvEdit.DataBind();
        }
    }

VB.Net Code:

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Dim dtSupplier As DataTable
            If Session("dtSupplier") Is Nothing Then
                'If not populated previously then we need to populate data. Otherwise we read from session.
                dtSupplier = New DataTable("Supplier")
                dtSupplier.Columns.Add(New DataColumn("ID", System.Type.GetType("System.UInt64")))
                dtSupplier.Columns.Add(New DataColumn("Code"))
                dtSupplier.Columns.Add(New DataColumn("Name"))
                dtSupplier.Columns.Add(New DataColumn("Address"))
                dtSupplier.Columns.Add(New DataColumn("Contact"))
                dtSupplier.Rows.Add(1, "st0001", "S.R. Steel", "Uttara, Dhaka", "01711xxxxxx")
                dtSupplier.Rows.Add(2, "ir0039", "Shadesh builders", "Rampura, Dhaka", "01711yyyyyy")
                dtSupplier.Rows.Add(3, "cr0042", "Orchard confec.", "Shahabag, Dhaka", "01711zzzzzz")
                dtSupplier.Rows.Add(4, "er0078", "Windblow", "Mirpur, Dhaka", "01711qqqqqq")
                dtSupplier.Rows.Add(5, "bd0301", "Rahimkarim", "Badda, Dhaka", "01711oooooo")
                Session("dtSupplier") = dtSupplier
            Else
                dtSupplier = CType(Session("dtSupplier"), DataTable)
            End If

            gvEdit.DataSource = dtSupplier
            gvEdit.DataBind()
        End If

    End Sub

Now we need to add another page named childrefresh.aspx which will be our popup window. If you look at the first page link button click event then you found this page URL as a popup. Find the child page html contents from below:

<body onunload="window.opener.location=window.opener.location;">
    <form id="form1" runat="server">
    <div>
        <div>
            <table border="0">
                <tr><td>Code:</td><td>
                <asp:TextBox runat="server" ID="txtCode"></asp:TextBox></td></tr>
                <tr><td>Name:</td><td>
                <asp:TextBox runat="server" ID="txtName"></asp:TextBox>
                </td></tr>
                <tr><td>Address:</td><td>
                <asp:TextBox runat="server" ID="txtAddress"></asp:TextBox></td></tr><tr><td>Contact no:</td><td>
                <asp:TextBox runat="server" ID="txtContact"></asp:TextBox></td>
                </tr>
            </table>
        </div>
    <asp:LinkButton runat="server" ID="lnkSave" OnClick="lnkSave_Click">Save & close</asp:LinkButton>
    </div>
    </form>
</body>

Note: The onunload event basically refresh the parent page. Here you can refresh parent page by location or reload by using onunload=”window.opener.location.reload();” Or you can call a javascript function within onunload handler. Initially start with above code sample. After that practice all other ways.

Now we need to write few server side code under popup page save button to add supplier data in session DataTable so whenever we will refresh parent page, the parent page can read the currently saved data from session DataTable:

C# Code:

    protected void lnkSave_Click(object sender, EventArgs e)
    {
        DataTable dtSupplier = (DataTable)Session["dtSupplier"];
        dtSupplier.Rows.Add(1, txtCode.Text, txtName.Text, txtAddress.Text, txtContact.Text);
        Session["dtSupplier"] = dtSupplier;
        //below line register the close block in the page which will run imediately & close the popup.
        ClientScript.RegisterStartupScript(GetType(), "tst", "<script>window.close();</script>");
    }

VB.Net Code:

    Protected Sub lnkSave_Click(sender As Object, e As System.EventArgs)
        Dim dtSupplier As DataTable = CType(Session("dtSupplier"), DataTable)
        dtSupplier.Rows.Add(1, txtCode.Text, txtName.Text, txtAddress.Text, txtContact.Text)
        Session("dtSupplier") = dtSupplier
        'below line register the close block in the page which will run imediately & close the popup.
        ClientScript.RegisterStartupScript(Me.GetType(), "tst", "<script>window.close();</script>")
    End Sub

Now our example is ready. Just run………..

Few considerations:
If you open the popup by window.open() then you also can use:
1. window.opener.location.reload(true); // Make a new request to the server.
2. window.opener.location.reload(false); // Attempt from the cache.

If you use window.showModalDialog and self as the second parameter then use:
window.dialogArguments.location.reload(true); // Put before close
OR
window.dialogArguments.location = window.dialogArguments.location;

Using this way you can change the query parameter of parent window/provide a completely a new URL. Interesting………

Special Note: One another thing, sometime you would like to know the parent address due to security issue or to handle multiple opener for a popup, that time you can use window.opener.location.href to validate the parent window.

Download Code Example C#        Download Code Example VB.Net

Leave a Reply

Your email address will not be published. Required fields are marked *

AlphaOmega Captcha Classica  –  Enter Security Code