Click here to Skip to main content
Click here to Skip to main content
Go to top

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

, 23 Sep 2008
Rate this:
Please Sign up or sign in to vote.
Partial update of parent page based on a certain value passed from the child window via AJAX (using UpdatePanel).

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Sandeep Mewara
Software Developer (Senior)
India India
Current location: Bangalore, India.
Follow on   Twitter

Comments and Discussions

 
QuestionReturn Value from showmodaldialog using jquery PinmemberBaroor21-Apr-14 23:47 
GeneralMy vote of 5 Pinmembersandeepkumarvemula15-Jan-13 0:28 
GeneralMy vote of 4 PinmemberSameers.ME13-Jul-11 0:24 
GeneralUpdate Parent window in both Condition (save/Cancel) in ASCX control Pinmembersatyam@cxi20-Jul-09 23:37 
Hi,
 
Thank you for this helpful article Smile | :)
I tried to implement the same in my application but on every event (save/cancel) for child window parent window got refreshed.
 
Note: ascx control (that need to be refresh) is in parent aspx page.
 
Thanks & Regards
Satyam
AnswerRe: Update Parent window in both Condition (save/Cancel) in ASCX control PinmemberSandeep Mewara7-Jan-10 22:25 
GeneralFirefox problem PinmemberMihail Smacinih16-Jun-09 2:57 
AnswerRe: Firefox problem PinmemberSandeep Mewara16-Jun-09 19:38 
AnswerRe: Firefox problem PinmemberSandeep Mewara16-Jun-09 19:58 
GeneralRe: Firefox problem PinmemberMihail Smacinih17-Jun-09 5:38 
QuestionUpdate Parent Window without Closing Child Window Pinmembermiss_neha_mishra4-Jun-09 21:50 
AnswerRe: Update Parent Window without Closing Child Window PinmemberSandeep Mewara8-Jun-09 3:19 
GeneralProblem in ascx controls PinmemberRavindraJumrani1-Apr-09 5:13 
GeneralRe: Problem in ascx controls PinmemberRavindraJumrani1-Apr-09 7:04 
QuestionNice but what about direct CallBack execution from JS ? PinmemberRally Chicken30-Sep-08 20:52 
AnswerRe: Nice but what about direct CallBack execution from JS ? PinmemberSandeep Mewara1-Oct-08 21:41 
GeneralVery nice! PinmemberMichael Dolittle30-Sep-08 7:30 
AnswerRe: Very nice! PinmemberSandeep Mewara1-Oct-08 21:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 24 Sep 2008
Article Copyright 2008 by Sandeep Mewara
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid