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 Label
s 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" />
<div id="divUpdatePanel">
<asp:UpdatePanel ID="upParent" runat="server">
<ContentTemplate>
<asp:Label ID="lblCurrTime" runat="server" Text="CurrTime:">
</asp:Label> <br />
<asp:Label ID="lblChildWinValue" runat="server"
Text="ChildWin Value:"></asp:Label><br />
<br /><a href="javascript:OpenChildWindow();">
Click to open the Child Window</a><br />
<input type="button" id="btnHiddenForUpdate"
runat="server" style="display:none"
onserverclick="btnHiddenForUpdate_ServerClick" />
<br />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="divNormalUpdatePanel">
<asp:Panel ID="pnlFullPostback" runat="server">
<asp:Label ID="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:
<script type="text/javascript">
function OpenChildWindow()
{
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);
if(entryWindow ==true)
{
alert("Watch for CurrTime & ChildWin labels," +
" its going to update as new window saved.");
window.document.getElementById('btnHiddenForUpdate').click();
}
else
{
alert("Nothing on the page will change " +
"as the new child window was cancelled.");
}
}
</script>
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.
<script type="text/javascript">
function WindowClose()
{
window.returnValue = true;
window.close();
}
function WindowCancel()
{
window.returnValue = false;
window.close();
}
</script>
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");
window.document.getElementById('btnHiddenForUpdate').click();
}
else
{
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;
}
Thus, using JavaScript and the ASP.NET2.0 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.