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.
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:
<form id="form1" runat="server">
<asp:ScriptManager ID="smParent" runat="server" />
<asp:UpdatePanel ID="upParent" runat="server">
<asp:Label ID="lblCurrTime" runat="server" Text="CurrTime:">
</asp:Label> <br />
<asp:Label ID="lblChildWinValue" runat="server"
Text="ChildWin Value:"></asp:Label><br />
Click to open the Child Window</a><br />
<input type="button" id="btnHiddenForUpdate"
<asp:Panel ID="pnlFullPostback" runat="server">
<asp:Label ID="lblPageLoadTime" runat="server"
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:
var sFeatures="dialogHeight: 200px;";
sFeatures += "dialogWidth: 400px;";
sFeatures += "center: yes;";
sFeatures += "edge: sunken;";
sFeatures += "scroll: no;";
sFeatures += "status: yes;";
sFeatures += "resizeable: no;";
var url = 'ChildForm.aspx?SomeValue=12345';
entryWindow=window.showModalDialog(url, 'ChildForm', sFeatures);
alert("Watch for CurrTime & ChildWin labels," +
" its going to update as new window saved.");
alert("Nothing on the page will change " +
"as the new child window was cancelled.");
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.
window.returnValue = true;
window.returnValue = false;
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
alert("Watch for CurrTime & ChildWin labels, " +
"its going to update since the new child window saved something");
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.
protected void btnHiddenForUpdate_ServerClick(object sender, EventArgs e)
lblChildWinValue.Text = "ChildWin Value: " + "SOME VALUE";
lblCurrTime.Text = "CurrTime: " + DateTime.Now.ToString();
lblChildWinValue.BackColor = Color.Yellow;
lblCurrTime.BackColor = Color.Yellow;
lblPageLoadTime.Text = "PageLoadTime: " + DateTime.Now.ToString();
lblPageLoadTime.BackColor = Color.Yellow;
UpdatePanel, we achieved partial update of a parent page only when a certain criteria is fulfilled.
Points of interest
The basic trick is to get around with the dummy hidden button in the
UpdatePanel which triggers the update. The performance of the code looks good.
From Bangalore, India.
My blog: http://smewara.wordpress.com/