Introduction

At times, we are in situations where we need to open a child window, do some work on it, and then close it. Now, based on what was done on the child window, we may need to refresh the parent page or not. Now, not just refresh, a partial refresh! I have tried to demonstrate how we can pass on a value to a child, do something out there, and on saving it, we partially update the parent page. If nothing was done on the child window or the operation was canceled, then there would be no update of the parent page. This whole operation gives a good feel to the user, and the performance of the page would look a lot improved.

Background

We had a requirement in our project where we needed to update the parent page partially based on a particular value returned from the child window. Earlier, we were able to update the parent page, but all the time! Finally, after getting around the way described below, we were able to achieve partial update of the parent page only when required.

Using the code

For demonstration's sake, I had placed few Labels on the parent page. Couple of them inside the UpdatePanel and one outside it - just to keep an eye on the page getting partially updated whenever any update is done. The parent page ASPX looks like:

<formid="form1"runat="server"><asp:ScriptManagerID="smParent"runat="server"/><divid="divUpdatePanel"><asp:UpdatePanelID="upParent"runat="server"><ContentTemplate><asp:LabelID="lblCurrTime"runat="server"Text="CurrTime:"></asp:Label><br/><asp:LabelID="lblChildWinValue"runat="server"Text="ChildWin Value:"></asp:Label><br/><br/><ahref="javascript:OpenChildWindow();">
Click to open the Child Window</a><br/><inputtype="button"id="btnHiddenForUpdate"runat="server"style="display:none"onserverclick="btnHiddenForUpdate_ServerClick"/><br/></ContentTemplate></asp:UpdatePanel></div><divid="divNormalUpdatePanel"><asp:PanelID="pnlFullPostback"runat="server"><asp:LabelID="lblPageLoadTime"runat="server"Text="PageLoadTime:"></asp:Label></asp:Panel></div></form>

We can open a child window using any control. I used an "<a href" link in this project. A modal dialog is opened with a dummy value passed as a querystring (if required). In the script below, the returned value is caught, and the partial update fired based on the value returned. Here is the script to open the dialog window:

Once we are in the new child window, we can perform the desired operation here. Once the operation is complete, we can save it and move ahead, or if we need to cancel, we can go for the Cancel button. In the sample project, a boolean value "true" was passed on save and continue of the form, whereas a "false" was passed on cancellation.

Based on the value returned from the child window, the parent window decides whether or not to activate a dummy-button placed in the UpdatePanel to fire the partial update. We had kept the "display" style of the button to "hidden" such that the UI is not affected, but we use it in order to trigger the UpdatePanel as and when required. Button click is fired in the JavaScript which does the job.

if(entryWindow ==true)
{
alert("Watch for CurrTime & ChildWin labels, " +
"its going to update since the new child window saved something");
//this would trigger the update panels update as the button is part of the UPwindow.document.getElementById('btnHiddenForUpdate').click();
}
else
{
//No change will happen to the parent page as child page did nothing
alert("Nothing on the page will change " +
"as the new child window was cancelled");
}

Now, the update can be handled on the server side in a way that suits the developer. In the sample example, I update the controls in the hidden button server-side event method.

The code is great, but it still need some improvements, as it doesn't work for manythings. Like I used to render a control with telerik panel, and it didn't rendered the styles. If using telerik's script manager, it doesn't work at all.

That's because showModalDialog is an IE-only call.
There are few alternatives. Like,
1. Mozilla based browsers support adding modal=yes to the third argument in a window.open and that will keep the opened window in front of the parent (though allowing access to base page)
2. There are powerful extensions of firefox like "Greasemonkey", that lets you inject your own JavaScript into any web page.

First of all I would like to thank you for such an helpful article. It’s very easy to understand and implement.
I have a small query regarding the above given code.

I have the same scenario in one of my application with a minor difference.
I want to update my Parent window without closing the Child window. In my child window I have a DataGrid with Edit/Update/Delete Buttons. I want to update a DataGrid in Parent window (which is in a UpdatePanel) on Edit/Update/Delete of record in Child window.

Can you please guide me some way by which i can do this without closing Child window so that my user can Edit/Update/Delete multiple record at one time and all the changes will be reflected as soon as a record is modified in Child window.

After reading what you want, this is one of the methods that came to my mind:
Since it is a ShowModelDialog, window.opener wouldn't work here directly.

In order to access the Parent Window and its controls, you can do something like this:In ParentForm.aspx:
Change the ShowDialog line from
//entryWindow=window.showModalDialog(url, 'ChildForm', sFeatures);

Now, parentWindow is an object that can access all the methods and controls of that page.
Where-ever (logical place event based or based on your requirement), you can just write:parentWindow.DisplayUpdatedData();

Hi, Thanks for very good example, i am trying to implement the same thing but in ascx controls, though it is working fine but on clicking of submit it is closing the current modal dialog box, but opening another (maximize) window, which i have to close manually, is there any remedy for that.

Can you elaborate more on callbacks?

P.s. My both ascx (parent and child) are in their respective aspx files.