Tutorial Ajax Modal Update Progress para UpdatePanel e WebMethods

Tutorial de Ajax Modal Update Progress para páginas com UpdatePanel e WebMethods.

O controle UpdateProgress que faz parte do Ajax tem algumas desvantagens: Ele fica estático em um ponto da tela, que dependendo do tamanho da página pode acabar ficando invisível para o usuário. Outro ponto é que o mesmo permite que o usuário clique em outros controles enquanto é feito o postback. Também o UpdateProgress não funciona com WebMethods.
Po isso, resolvi pesquisar e criar uma solução única e que fosse Modal, ou seja, o usuário não consegue clicar em outros controles enquanto o postback é feito. Para isso fiz uma combinação de ModalPopup do AjaxControlTookit com os métodos do PageRequestManager.

Links: http://ajax.asp.net

Código inicial, para ambos os tipos de página:

1 - Inserir os componentes necessários ao ModalPopup, que irá ser exibido no postback, no final da página dentro da tag Form.

        <asp:Button ID="Button1" runat="server" Text="Button" />
        <cc1:ModalPopupExtender ID="popAguarde" runat="server"
              TargetControlID="Button1"
                PopupControlID="pnAguarde" BackgroundCssClass="modalBackground"
                BehaviorID="popAguarde" />
        <asp:Panel ID="pnAguarde" runat="server" Height="27px" Width="20px">
            <img alt="Aguarde, carregando..." src="images/ajax-loader.gif" height="32" /></asp:Panel>

- Não esqueça do registro do AjaxControlToolkit se já não tiver.
       
        <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

2 - Adicione o css responsável por bloquear os controles na seção head do html.

<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

- Conteúdo de StyleSheet.css

.modalBackground
{
 background-color: whitesmoke;
 filter: alpha(opacity=70);
 opacity: 0.7;
}

.modalPopup {
 background-color:#ffffdd;
 border-width:3px;
 border-style:solid;
 border-color:Gray;
 padding:3px;
 width:250px;
}

3 - Para páginas com UpdatePanel (sem o uso de UpdateProgress)

3.1 - Adicionar script com os handles BeginRequest e EndRequest sempre após o ScriptManager.

    <script id="Pop" language="javascript" type="text/javascript">
            <!--

            Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler)

            function BeginRequestHandler(sender, args)
            {
            $find("popAguarde").show();
            }

            function EndRequestHandler(sender, args)
            {
            $find("popAguarde").hide();
            }

            // -->
     </script>

- Remova o UpdateProgress caso tenha colocado.

4 - Para páginas que usam WebMethods

3.2 - Adicione no script com os métodos que executam o WebMethod os métodos Show e Hide do ModalPopup.

- Onde é chamado o WebMethod: $find("popAguarde").show();

- Onde é retornado o WebMethod: $find("popAguarde").hide();

- Exemplo completo:

<script id="Pop" type="text/javascript">
<!--
function cApagarAgenda(ID)
{
    $find("popAguarde").show();
    PageMethods.sApagarAgenda(ID, onCompleteApagarAgenda);
}
function onCompleteApagarAgenda(result)
{
    $find("popAguarde").hide();
    alert(result);
}

// -->
</script>

Ricardo Andreatto
http://www.favoritosonline.com.br