Partial update of parent page via AJAX (ASP.NET 2.0) on close of a child window - conditionally

• Download source code - 5.19 KB

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:

<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()
    {
        //open a new 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);            
        if(entryWindow ==true)
        {
            alert("Watch for CurrTime & ChildWin labels," + 
                  " its going to update as new window saved.");
            //this would trigger the update panels 
            //update as the button is part of the UP
            window.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.");
        }
    }
</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()
{
    //return some value from here based 
    //on which Parent will decide the partial update
    window.returnValue = true;
    window.close();
}
function WindowCancel()
{
    //return some value from here based on which 
    //Parent will decide the partial update
    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");
    //this would trigger the update panels update as the button is part of the UP
    window.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.

protected void btnHiddenForUpdate_ServerClick(object sender, EventArgs e)
{        
    //Update Panels update - repopulate the controls the way needed.
    lblChildWinValue.Text = "ChildWin Value: " + "SOME VALUE";
    lblCurrTime.Text = "CurrTime: " + DateTime.Now.ToString();
    lblChildWinValue.BackColor = Color.Yellow;
    lblCurrTime.BackColor = Color.Yellow;

    //Just to show that this label wont update as outside the update panel
    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.