quarta-feira, 22 de janeiro de 2014

Tela de Aguarde ou Processando em ASP.NET

Galera tudo bem?

Hoje eu estava melhorando o desing da aplicação na empresa e para ajudar o usuário, coloquei uma tela de “Processando” para que o usuário não fique clicando nas demais funções da tela. Para isso vamos utilizar o ASP.NET AJAX Control Toolkit com dois objetos: UpdateProgress e ModalPopupExtender.

Veja como a tela irá ficar:

(imagem1)

Bom, vamos ao código.

ASPX:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!-- Registrando as DLL´s -->
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"   Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
      <title>Tela de Aguarde ou Processando em ASP.NET </title>
      <!-- Acionamento do JavaScript e CSS-->

      <link href="cssUpdateProgress.css" rel="stylesheet" type="text/css" />
      <script type="text/javascript" language="javascript">
            var ModalProgress = '<%= ModalProgress.ClientID %>';        
      </script>
     
</head>
<body>

      <form id="form1" runat="server">
      <div>
      <!-- Acionamento do JavaScript-->
<script type="text/javascript" src="jsUpdateProgress.js"></script>         
<!-- Script utilizado para leitura dos componentes do Ajax-->
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <!-- Panel com a tela de Processando -->
            <asp:Panel ID="panelUpdateProgress" runat="server" CssClass="updateProgress">
            <!-- Ação utilizada no momento do processamento-->
                  <asp:UpdateProgress ID="UpdateProg1" DisplayAfter="0" runat="server">
                        <ProgressTemplate>
                             <div style="position: relative; top: 30%; text-align: center;">
                                   <img src="loading.gif" style="vertical-align: middle" alt="Processing" />
                                   Processando (www.EdgarEsteves.com.br)
                             </div>
                        </ProgressTemplate>
                  </asp:UpdateProgress>
            </asp:Panel>
            <!--Este componente irá bloquear o fundo da tela -->
            <ajaxToolkit:ModalPopupExtender ID="ModalProgress" runat="server" TargetControlID="panelUpdateProgress"
                 BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress" />
     
      <!-- Dentro deste UpdatePanel, ficará todo o restante do código de nossa tela-->
            <asp:UpdatePanel ID="updatePanel" runat="server">
                  <ContentTemplate>
                        <asp:Button runat=      "server" Text="Click Me" ID="btnSubmit"
                             onclick="btnSubmit_Click" />
                  </ContentTemplate>
            </asp:UpdatePanel>
      </div>
      </form>
</body>
</html>

Criar um arquivo JavaScript com o nome: jsUpdateProgress.js. e o seguinte código:

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);

function beginReq(sender, args) {
      // shows the Popup
      $find(ModalProgress).show();
}

function endReq(sender, args) {
      //  shows the Popup
      $find(ModalProgress).hide();
}

Criar um arquivo CSS com o nome: cssUpdateProgress.css. e o seguinte código:

.modalBackground
{
      background-color: Gray;
      filter: alpha(opacity=50);
      opacity: 0.50;
}



.updateProgress
{
      border-width: 1px;
      border-style: solid;
      background-color: #FFFFFF;
      position: absolute;
      width: 180px;
      height: 65px;
}

Somente o código acima, irá funcionar nossa tela de aguarde, abaixo o código do botão para efeito no processamento:

            protected void btnSubmit_Click(object sender, EventArgs e)
            {
                  System.Threading.Thread.Sleep(4000);
            }

0 comentários:

Postar um comentário