Google

Thursday, October 20, 2011

ASP.NET - UpdateProgress with ModalPopupExtender

Watch this example on Youtube: 
    


Add Update Progress, Modal Popup Extender and Panel with image and label

    whole code looks like:

 
    <div class="ControlsCenter">
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0" AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
            </ProgressTemplate>
        </asp:UpdateProgress>
        <asp:ModalPopupExtender ID="modalExtender" runat="server" TargetControlID="UpdateProgress1"
            PopupControlID="Panel1" DropShadow="true" BackgroundCssClass="modalBackground">
        </asp:ModalPopupExtender>
        <asp:Panel ID="Panel1" runat="server" CssClass="modalExtender">
            <img alt="Processing" src="../Images/working.gif" />
            <br />
            <asp:Label ID="lblProcessing" runat="server" Text="Processing..." CssClass="TitleBar"></asp:Label>
        </asp:Panel>
    </div>


     Modal is executed when Update Progress is called and displays controls from Panel therefore:
     TargetControlID="UpdateProgress1"
     PopupControlID="Panel1"


    class="ControlsCenter" will center all controls
    .ControlsCenter
    {
        margin-left: auto;
        margin-right: auto;
        width: 50em;
        text-align:center;
    }


    BackgroundCssClass="modalBackground" will shadow whole screen
    .modalBackground
    {
        background-color: Gray;
        filter: alpha(opacity=50);
        opacity: 0.50;
    } 


    CssClass="modalExtender" will just centralize all controls inside
   .modalExtender
    {
        border-width: 1px;
        border-style: solid;
        background-color: #FFFFFF;
        position: absolute;
        text-align:center;
    }


    add the following javascript code just after form tag
        </form>

    <script type="text/javascript">
        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(showPopup);
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(hidePopup);   

        function showPopup(sender, args){
         var ModalControl ='<%= modalExtender.ClientID %>';  
            $find(ModalControl).show();       
        }

        function hidePopup(sender, args) {
            var ModalControl ='<%= modalExtender.ClientID %>';
            $find(ModalControl).hide();
        }
    </script>

3 comments:

  1. it is work fine in Google Chrome, Mozilla Firefox but does not work well in IE8,IE9

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. it is working fine in IE9 too

    ReplyDelete