Pages

Thursday, July 14, 2011

Refresh parent page from child window using javascript in asp.net web application

Much often we open child windows from parent web page. In the child page we perform some activities, and later close the window. At the very time we may need to refresh the parent page so that changes made in the child window be reflected in the parent window. We can easily accomplish this using javascript in asp.net web page. Let me show the way using code snippets. If it is your iframe page, you still can refresh the parent page partially from page in iframe (because this will avoid reloading the iframe itself), which I have discussed in another post. And right before following, I would like to inform that there is a post regarding Frequent question on parent and child page refresh, reload, function call in asp-net using javascript that discusses, in aggregate, about some more approaches of parent and child page operations.

Parent asp.net web page
Open child window
This is the parent page. Clicking the link will open the child page Child.aspx in a new window. If you wish you can Open the new window in asp.net web page in different ways, which I have already discussed in a previous post.

Child asp.net web page

This is the child page.

protected void btnOk_Click(object sender, EventArgs e)
    { 
        //Implement Your logic here.....
        //..............................
        //now refresh parent page and close this window
        string script = "this.window.opener.location=this.window.opener.location;this.window.close();";
        if (!ClientScript.IsClientScriptBlockRegistered("REFRESH_PARENT"))
            ClientScript.RegisterClientScriptBlock(typeof(string), "REFRESH_PARENT", script, true);        
    }
In the child page, I have just put a button. When the button is clicked, the page logic will be implemented (which I have indicated by the comment lines in the event handler of the button in the asp.net child page).

The asp.net plus javascript logic
I have just created the javascript stuff that refreshes the parent page of this child page; see the lines:
this.window.opener.location=this.window.opener.location;this.window.close();
This line replaces the url of the parent page with its own url - that causes the parent page to reload. And yes, I have registered the javascript code block with ClientScript so that it is executed when the postback life cycle of this child page completes.

Happy programming!
kick it on DotNetKicks.com

12 comments:

  1. OMG! what a relief..thank you so much for this very helpful post...this is so easy to follow and the perfect solution ive been looking for...
    you're a GENIUS!!!!! :)

    -maria-

    ReplyDelete
  2. The post is too good. I was waiting for this code since long.

    -SBLal

    ReplyDelete
  3. WOW!! Thank you very much

    ReplyDelete
  4. thanq so much......it saved my tym..!!the post is too good n well xplained..

    ReplyDelete
  5. the post is toooo good, saved so much time

    ReplyDelete
  6. what if i have to just refresh a control e.g gridview on parent page?

    ReplyDelete
  7. To refresh a gridview, you can put the gridview within an update panel. You can easily refresh the gridview control only by partially updating the updatepanel.

    ReplyDelete
  8. thanks you sir!

    ReplyDelete
  9. SUPERB!!! Exactly what I was looking for.
    Thanks a lot.

    ReplyDelete
  10. Excellent and thank you so much... I was looking for this for quite some time. You're great!

    ReplyDelete
  11. Not working in IE8...plz help?

    ReplyDelete

Hope you liked this post. You can leave your message or you can put your valuable suggestions on this post here. Thanks for the sharing and cooperation!