Monday 23 February 2015

Show waiting symbol on page postback

Here is a quick code for displaying waiting symbol, whenever a button click takes a long time, in .aspx pages.

Create css entries as shown below:

<style type="text/css">
        .modal
        {
            position: fixed;
            z-index: 999;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            background-color: white;
            filter: alpha(opacity=60);
            opacity: .6;
            -moz-opacity: 0.8;
        }
        .center
        {
            z-index: 1000;
            margin: 300px auto;
            padding: 10px;
            width: 65px;
            overflow: auto;
            background-color: white;
            border-radius: 10px;
            filter: alpha(opacity=60);
            opacity: .6;
            -moz-opacity: 1;
        }
        .center img
        {
            position: absolute;
            filter: alpha(opacity=100);
            opacity: 1;
            top: 50%;
            left: 50%;
            margin: -27px 0px 0px -75px;
        }
     
    </style>

Place all your controls in "UpdatePanel" section. In "UpdateProgress" section, mention the image\div which you want to show as a waiting symbol (in this example, we are using image as waiting symbol)

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
    <div class="modal">
        <div class="center">
            <img alt="loading..." src="img.gif" />
        </div>
    </div>
</ProgressTemplate>
</asp:UpdateProgress>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
// place all the controls which should show waiting symbols on event postback
    </ContentTemplate>
</asp:UpdatePanel>