• Page Web :

<form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server" />

    <asp:UpdatePanel ID="updPnl" runat="server">

        <ContentTemplate>

            <div style="text-align: center;">

                <asp:Button runat="server"

ID="btn1"

Text="click me"

OnClick="btn1_Click" />

                <br />

                <asp:TextBox runat="server"

ID="txt1">

    </asp:TextBox>

                <asp:UpdateProgress ID="updProg"

runat="server">

                <ProgressTemplate>

                   <div style="text-align: center;

background-color: Gray; top: 0px;

bottom: 0px; position: absolute;

                        right: 0px; left: 0px;

-moz-opacity: 0.5; opacity: 0.5;

filter: alpha(opacity=50);">

                   </div>

                   <div style="margin-top: 25%; text-align: center;">

                     <img alt="Loading..." src="images/ajax-loader_blue.gif" />

   <br />

                     <span>LOADING...</span>

                   </div>

                 </ProgressTemplate>

                </asp:UpdateProgress>

            </div>

        </ContentTemplate>

    </asp:UpdatePanel>

    </form>

• Code Behind

(ici la simulation d'une longue attente :)

protected void btn1_Click(object sender, EventArgs e)

{

System.Threading.Thread.Sleep(5000);

txt1.Text = "test";

}

Pour télécharger l'image ajaxLoader : http://ajaxload.info/

• Code Javascript

<script language="javascript" type="text/javascript">

function displayProgress()

{

    var hdn = document.getElementById('<%=hdnStatus.ClientID%>');

    var div = document.getElementById('<%=pnlBackGround.ClientID %>');

    if (div !=null)

    {

        var feedback = document.getElementById('<%=divFeedback.ClientID%>');

        if (hdn.value!=1)

        {

            feedback.innerHTML = "<img src='../Images/ajax-loader.gif'>Please wait...<br />";

            div.style.display = "block";

            setTimeout("displayProgress()", 1000);

            return true;

        }

        else

        {

            div.style.display = "none";

            return true;

        }

    }

    else

    {

        return true;

    }

}

</script>

• Style Css

.popup-div-background

{

    position:absolute;

    top: 0;

    left: 0;

    background-color:#ccc;

    filter:alpha(opacity=90);

    opacity:0.9;  

    height: 100%;

    width: 100%;

    min-height: 100%;

    min-width: 100%

}

.popup-div-front

{

    background-color: #ffffff;

    color: black;

    width: 70%;

    text-align: left;

    vertical-align: middle;

    position: absolute;

    top: 5%;

    left: 15%;

    bottom:5%;

    font-weight:bold;

    padding: 10px 5px 5px 5px;

    font-family:Verdana;

}

• Partie cliente (aspx)

<div>

        <asp:Panel ID="pnlBackGround"  
                        runat="server"  
                        CssClass="popup-div-background" 
                        style="display:none;" >

            <div id="divFeedback" 
                   runat="server" 
                   class="popup-div-front">

               <img src="../Images/ajax-loader.gif" border="0" />

                Please wait...<br />

            </div>

        </asp:Panel>

        <asp:Button ID="btnProcess" 
                         runat="server" 
                         Text="Process" 
                         OnClientClick="displayProgress()" />

      <asp:HiddenField ID="hdnStatus" 
                              runat="server" 
                              Value="0" 
                              EnableViewState=false />

</div>

Pour déclencher l'évnnement vous pouvez utiliser le bouton btnProcess associé au "OnClick"

Pour télécharger une image "AjaxLoader" vous pouvez aller sur ce site : http://ajaxload.info