Ajax Loader com Bloqueio da Tela
Olá pessoal! Nos posts anteriores, vimos como trabalhar com Banco de dados no C# utilizando uma classe que facilita e muito as operações com BD, principalmente as básicas (inserção, deleção, atualização e seleção). Agora, nesse post, vou dar uma dica de como dar um "tapa" no front-end de uma aplicação ASP.NET, ou seja, na interface com o usuário.
Você já deve ter visto por aí em alguns sites que quando executam uma operação, fica em algum lugar um indicador de processamento, algo como uma telinha escrito "Carregando" na página. Isto é feito utilizando-se AJAX, e serve basicamente para não "matar" o usuário de tédio enquanto o browser realiza alguma comunicação com o servidor assincronamente.
Se você já teve a oportunidade de trabalhar com o ASP.NET Ajax Extensions, deve ter visto um componente chamado UpdateProgress, não é? Ele serve justamente para fazer o que eu disse acima, ou seja, apresentar uma mensagem para o usuário enquanto um postback assíncrono é executado. Ele aparece quando a requisição é iniciada (quando clicamos em um botão, por exemplo) e some quando a página é atualizada.
Mas ele tem um incoveniente: Quando o postback é executado, o usuário tem total acesso aos outros elementos da página, dependendo de como você fez o conteúdo do UpdateProgress. Ou seja, enquanto uma requisição é processada, se o usuário clicar em qualquer outro botão, a requisição é cancelada e isso pode ter outros efeitos desagradáveis também. Vou mostrar uma maneira de como "travar" o acesso a página enquanto um postback é executado.
Para isso, vamos utilizar o excelente JQuery e o plugin jqModal.
Nossa ação vai consistir em fazer uma janela modal aparecer quando for solicitado um postback assíncrono da página; o overlay definido na janela modal irá bloquear o acesso aos elementos da página enquanto a requisição é processada. Também iremos incluir uma maneira do usuário cancelar o processamento, caso seja muuuuuuuuito longo (uma consulta demorada e com um filtro não bem delimitado por engano, por exemplo).
Para os exemplos, estarei utilizando o Visual Studio 2005.
Primeiro, crie um novo website habilitado para AJAX, e coloque o seguinte código no arquivo .aspx:
1: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
3: <html xmlns="http://www.w3.org/1999/xhtml">
4: <head runat="server">
5: <title>Exemplo de Ajax Loader Modal</title>
6: <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>1:2: <script type="text/javascript" src="jqModal.js">1: </script>2: <link rel="stylesheet" href="jqModal.css" />3: <style type="text/css">4: .AjaxLoader5: {6: width:200px;7: height:200px;8: top:50%;9: left:50%;10: margin-left:-100px;11: margin-top:-100px;12: background-color:#0000FF;13: z-index:4000;14: text-align:center;15: position:absolute;16: }17: </style>18: </head>19: <body>20: <form id="form1" runat="server">21: <asp:ScriptManager ID="ScriptManager1" runat="server" />22: <asp:UpdatePanel runat="server" ID="UpdatePanel1">23: <ContentTemplate>24: <div>25: <asp:Button runat="server" ID="btnClickMe" Text="Clique-me :-)" OnClick="btnClickMe_Click" />26: </div>27: </ContentTemplate>28: </asp:UpdatePanel>29: <asp:UpdateProgress runat="server" ID="UpdateProgress1">30: <ProgressTemplate>31: <div id="dvAjaxLoader" class="AjaxLoader">32: <img src="ajax-loader.gif" alt="Carregando..." />33: <span style="color:White;font-family:Verdana;font-weight:bold;">Carregando...</span><br />34: <div style="width:100%;text-align:center;">35: <input type="button" id="btnCancelar" value="Cancelar Requisição" onclick="cancelPostback();" />36: </div>37: </div>38: </ProgressTemplate>39: </asp:UpdateProgress>40: <div id="dvModalLoader" style="width:0px;height:0px;left:-8000px;" class="jqmWindow">41: </div>42: <script type="text/javascript">43: //Inicializa o Modal44: var $dvModalLoader = $('#dvModalLoader').jqm({modal:true,toTop:true,trigger:false});45: //Adiciona os eventos para exibir/ocultar modal enquanto o postback assíncrono é executado.46: Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);47: Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);48: function beginRequest(sender,args)49: {50: $dvModalLoader.jqmShow();51: }52: function endRequest(sender,args)53: {54: $dvModalLoader.jqmHide();55: }56: function cancelPostback()57: {58: Sys.WebForms.PageRequestManager.getInstance().abortPostBack();59: return false;60: }</script>
7: </form>
8: </body>
9: </html>
Coloque também o seguinte no code-behind:
1: protected void btnClickMe_Click(object sender, EventArgs e)
2: {
3: Thread.Sleep(5000);
4: }
Com isso, construímos uma página que dentro de um UpdatePanel temos um botão, que ao ser clicado executará alguma coisa no servidor. Como não temos nada, coloquei apenas um delay, que é o suficiente para demonstrar o efeito do bloqueio da página.
Também colocamos um UpdateProgress, onde iremos construir a caixa que irá aparecer para o usuário ficar aguardando pelo carregamento da página. Nela tem uma figura, construída pelo site http://www.ajaxload.info/, um label e um botão, que ao ser clicado irá cancelar o postback. Um cuidado que devemos ter é colocar o atributo z-index do loader SEMPRE acima dos outros elementos da página, inclusive das janelas modais.
Além disso, temos um div que foi nomeado de "dvModalLoader", cuja classe CSS é "jqmWindow" (definida no arquivo jqModal.css) que define as características da janela modal para o plugin jqModal. Note que a largura e altura foram definidas para "0px" e posicionada com left em "-8000". A única coisa que iremos utilizar deste div é o overlay que o jqModal coloca para exibir a janela modal, e através dele bloquear o conteúdo atrás dele.
A mágica toda será executada através de JavaScript, então vamos a ele:
1: //Inicializa o Modal
2: var $dvModalLoader = $('#dvModalLoader').jqm({modal:true,toTop:true,trigger:false});
A linha acima inicializa o plugin jqModal, informando que o div dvModalLoader é uma janela modal. Através da variável $dvModalLoader é possível controlar a exibição da janela com os métodos jqmShow() e jqmHide() para exibir e ocultar, respectivamente.
Uma vez exibido a janela modal, os componentes que estão atrás dele não poderão ser clicados; somente poderemos usá-los após fechar a janela modal, o que pode ser feito com um botão dentro dela, chamando o método jqmHide().
O fluxo do botão "Clique-me :-)" fica assim: o botão é clicado, abre-se a janela modal, o UpdateProgress é exibido, é feito um processamento no servidor e após o processamento a página é atualizada e volta ao estado normal.
Para que essa janela modal apareça sempre ao efetuar uma chamada assíncrona ao servidor, juntamente com o UpdateProgress, iremos sobreescrever dois eventos da biblioteca AJAX, os eventos beginRequest e endRequest, que disparam quando uma chamada assíncrona é iniciada e finalizada, respectivamente.
1: //Adiciona os eventos para exibir/ocultar modal enquanto o postback assíncrono é executado.
2: Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
3: Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);
4: function beginRequest(sender,args)
5: {
6: $dvModalLoader.jqmShow();
7: }
8: function endRequest(sender,args)
9: {
10: $dvModalLoader.jqmHide();
11: }
12: function cancelPostback()
13: {
14: Sys.WebForms.PageRequestManager.getInstance().abortPostBack();
15: return false;
16: }
No evento beginRequest, daremos o comando de exbição do dvModalLoader. Ao se iniciar um postback, o dvModalLoader é exibido e em seguida o UpdateProgress. Ao terminar a requisição ao servidor e a página for atualizada, é disparado o evento endRequest, ocultando o dvModal.
Construímos, no div que contém o Ajax Loader, um botão de cancelamento. No script acima, temos a função cancelPostback, que é a responsável por finalizar a requisição, disparando um endRequest e liberando a página para o usuário.
Como eu não tenho um local para hospedar o exemplo, vejam um vídeo com o efeito funcionando:
Os arquivos utilizados como exemplo do post estão na Página de Suporte do NeoMatrix Tech no link abaixo :-)
Exemplo de bloqueio de tela nas requisições ASP.NET AJAX usando jQuery (29 KiB)
Um abraço a todos!
Posts Relacionados:
4 comentários:
aonde fica essa pagina de suporte por favor!
@Anônimo.
Ops... falha minha :-)
Devido a várias mudanças de template depois que este post foi publicado, esqueci deste detalhe.
Segue a página de suporte:
http://br.geocities.com/leonel_fraga/neomatrixtech/download_neomatrixtech.html
Em breve, como o Geocities irá sair do ar, vou reeditar os posts que contém link para esta página (ou mencionam), e colocar os respectivos arquivos para download diretamente no post, igual nas postagens atuais.
Um abraço e valeu pelo aviso :-)
Prezado Leonel,
Sou iniciante em jquery e estou implementando o exemplo acima. Está funcionando perfeitamente.
Gostaria de aprender a incluir no exemplo a abertura de uma página aspx, em substituição à imagem. Onde tenho que modificar o código.
Poderia me ajudar... outra coisa seria como fazer a página por trás no stylo transparente.
Grato. adim.almeida@globo.com
hum... vc poderá colocar um iframe dentro do modal, ou então, quando for chamar o javascript que declara o modal, passar um parâmetro "ajax" com o nome da página aspx que vc quer abrir.
Quanto a página de trás transparente, vc fala do overlay ou da própria página de conteúdo? Se for o overlay, lá no jqModal.css tem onde formatá-lo.
[]'s!
Postar um comentário