ModalPopup and UpdatePanel - how to handle the partial postback?

Last post 09-12-2007 12:01 PM by projectstream. 5 replies.

Sort Posts:

  • ModalPopup and UpdatePanel - how to handle the partial postback?

    08-31-2007, 4:38 PM
    • Member
      274 point Member
    • soccerdad
    • Member since 12-12-2005, 7:05 PM
    • Posts 69

    My app has a number of ways that a (full) postback can occur while navigating the pages of something like a wizard. I want a 'Please wait...' ModalPopup to happen no matter how the postback is triggered. So I've got an asp:Panel, a ModalPopupExtender, and some very simple script in my master page. I'm using RegisterOnSubmitStatement to hook all postbacks, and the script function that's called there just calls "show()" on the ModalPopupExtender. The modal popup appears and the background is grayed out. When the new page is rendered, everything from the previous page is gone; so the page looks refreshed and the modal popup has "disappeared". This is working remarkably well and took very little time to implement.

    The one problem I'm having is that there are a few pages on the site where an UpdatePanel is used to allow a partial rendering based on the change in a checkbox or a dropdownlist. Because I'm hooking *every* postback, the modal popup appears in this case. And because it's not a full rendering, the modal popup stays shown after the partial rendering completes, which of course renders the page useless.

    I see two ways of correcting this, both of which are probably fairly simple. I'm just new enough to the asp.net ajax stuff that I haven't stumbled across the right magic yet. ;)

    a) In my OnSubmit function (where I call show() on the modalpopupextender), if I can detect that the postback is going to be a partial postback, then I can just skip showing the modal popup altogether.

    b) Alternatively, if I can "hook" the completion of the partial postback, I can call "hide()" on the modalpopupextender to make it disappear.

    I think b) would be advantageous in the event that the partial postback is a little slow. But it really should never be, so I slightly prefer a).

    Any pointers on how to accomplish either or both of these?

    Thanks much,

    Donnie


  • Re: ModalPopup and UpdatePanel - how to handle the partial postback?

    09-04-2007, 6:38 AM
    Answer

    Hi Soccerdad,

    soccerdad:

    a) In my OnSubmit function (where I call show() on the modalpopupextender), if I can detect that the postback is going to be a partial postback, then I can just skip showing the modal popup altogether.

    Here is the sample to detect the post type when onsubmit event occured.

     <form id="form1" runat="server" onsubmit="return onSubmitCheck()">
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                    <asp:Button ID="Button1" runat="server" Text="Button" />
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:Button ID="Button2" runat="server" Text="Button2" />
            <script type="text/javascript" language="javascript">
               var prm = Sys.WebForms.PageRequestManager.getInstance();
                function onSubmitCheck(){
                  if(!prm._postBackSettings.async){
                    alert('It is a synchronous post!');
                  }else{
                    alert('It is a synchronous post!');
                  }
                  return true; 
                }
            </script>
            
        </form>
     
    soccerdad:

    b) Alternatively, if I can "hook" the completion of the partial postback, I can call "hide()" on the modalpopupextender to make it disappear.

    Please add the following code to your page. Function EndRequestHandler will be called when the partial refresh finishs. 

    <script type="text/javascript" language="javascript">
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
            function EndRequestHandler(sender, args){
              //hide the ModalPopupExtender
            }
        </script>

    I hope this help.

    Best regards,

    Jonathan

    Jonathan Shen
    Microsoft Online Community Support
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
  • Re: ModalPopup and UpdatePanel - how to handle the partial postback?

    09-04-2007, 3:23 PM
    • Member
      274 point Member
    • soccerdad
    • Member since 12-12-2005, 7:05 PM
    • Posts 69

    Thanks for the reply, Jonathan. It definitely fixed my issue - I used the first method, and am now not displaying the modal popup for a partial postback.

    Unfortunately, that led me to find another issue. My submit hook function is called after validators have been run (the alert dialog appears) but even if the validation has failed. So the modal popup grays out the window and things are stuck like that. I've used what I think is a hack to determine if validation succeeded or not before showing the modal popup. I'm not sure if there's a "best practice" way to detect this under the asp.net ajax stuff, or if this is more of a general asp.net issue.

    Anyway, thanks for the pointers.

    Donnie


     

  • Re: ModalPopup and UpdatePanel - how to handle the partial postback?

    09-04-2007, 10:28 PM

     Hi Soccerdad,

    If you use Javascript to validate the inputs, it is easy. You just make the validate function return true if the content of all the input is valid, otherwise return false.  So do the onSubmit function.

    If you use validators, I think the "best practice" is using the second solution.

    I hope this help.

    Best regards,

    Jonathan

    Jonathan Shen
    Microsoft Online Community Support
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
  • Re: ModalPopup and UpdatePanel - how to handle the partial postback?

    09-05-2007, 1:31 PM
    Answer
    • Member
      274 point Member
    • soccerdad
    • Member since 12-12-2005, 7:05 PM
    • Posts 69

    I got it working the "standard" way I think. I'm using the built-in asp.net validators. On pages which have those, a "Page_IsValid" global variable is set after the validators have been run. So I just check for the existence and value of that variable in my onsubmit hook function and react accordingly.

    I found a reference to the use of this variable via a google search, and it seemed to be a documented and supported variable that I can use for this purpose, so I'm happy with the solution.

    Thanks again

    Donnie

     

  • Re: ModalPopup and UpdatePanel - how to handle the partial postback?

    09-12-2007, 12:01 PM
    • Member
      6 point Member
    • projectstream
    • Member since 04-30-2007, 4:36 AM
    • Posts 3

    Hi

     Don't forget to add ValidationGroup attributes to each of the validators and to the button/link control that causes the page to postback.  Tying all the related validators and the firing control with the same ValidationGroup name will stop those validators from interfering with any other controls that cause your page to postback.


     

Page 1 of 1 (6 items)