Pop up a ASP page using javascript and refreash the parent page when close the pop up page

Introduction: In this article I will show how to open a page as pop up using javascript. And when close the pop up page how to refresh the parent page where the pop up page is called. It is simple but  some time it will helpful. Suppose you have a page that contain a grid and a button which pop up a page to add data in the grid. Then you need the mechanism to add data in the grid and refresh the page so that the change reflect the page. Let us see how simple it is.

Step1:  In first step we create a parent page which contains just a button called PoP UP and a text box which show the current time including hour minute and second. The script of the asp page is given below:

<table>
        <tr>
            <td>
                Date:
            </td>
            <td>
                <asp:TextBox ID="txtDate" runat="server" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <asp:Button ID="btnPopup" runat="server" Text="PoP UP" OnClick="btnPopup_Click" />
            </td>
        </tr>
    </table>
From this page when we click the PoP UP button a small page will pop up contains some text and a button called OK. After clicking the OK button the pop up page will hide and the parent page will refresh (the date text box show different value).
Step2: For the pop up page I create a asp page named PopupPage. The script of the page given below:
<div>
        <p>
            Hi! How are you.<br />
            This is a pop up page.
        </p>
    </div>
    <table>
        <tr>
            <td>
                <asp:Button ID="btnOk" runat="server" Text="OK" OnClick="btnOk_Click" />
            </td>
        </tr>
    </table>
Step3: Now we write a function to show the pop up page in parent page code behind file i.e, .cs file. The function looks like follows:
void PopUpPage()
        {
            StringBuilder sb = new StringBuilder();
            sb.Append("<script language='JavaScript'>" + "\r\n");
            sb.Append("window.open('PopupPage.aspx', 'CustomPopUp',");
            sb.Append("'width=300,height=300,addressbar=0,menubar=0, resizable=0,");
            sb.Append("status=0,toolbar=0,titlebar=0,location=0,left=250,top=250');");
            sb.Append("</script>\r\n");

            Type t = this.GetType();
            if (!Page.ClientScript.IsClientScriptBlockRegistered(t, "PopupScript"))
            {
                Page.ClientScript.RegisterClientScriptBlock(t, "PopupScript", sb.ToString());
            }
        }
Now call the function from the PoP UP button's click event. It will show the pop up page. When I run my parent page and click the PoP UP button the page looks like the following figure:

Step4: Now the refresh part. In my parent page date show local current time. I want to refresh the page when i click the OK button of pop up page. To do this i add a line in OK buttons click event which close the pop up and refresh the parent page. Just add the following line in OK buttons click event.

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "RefreshParent", "<script>opener.location=(window.opener.location.href);window.close();</script>");

After that when i click the OK button the pop up page close and date refresh means the parent page refresh. Which looks like the following figure.

 

Conclusion: This is simple and easy but some time it will be very helpful. If any one will get benefit from it my work will be success. For any query about the article please send me a mail.

Shimul Mahmud
azkhairuzzaman@gmail.com