Ocultando ou exibindo divs ao pressionar botão

<< Click to Display Table of Contents >>

Navigation:  Miscelânea >

Ocultando ou exibindo divs ao pressionar botão

Previous pageReturn to chapter overviewNext page

Problema

 

Imagine que você fez um formulário de contato.

Ao pressionar botão será enviado um email, mas durante esse processo a página fica "aguardando..."

Como fazer uma div com um label (ou um gif) aparecer E os botões sumirem?

 

Solução

 

Simples: JavaScript é a solução.

Tudo se resume a "divs".

Crie uma div (visivel) para seus botões e uma outra div para sua mensagem de "aguarde".

 

  <div id="div_botao" style="display: inherit">

      <asp:Label ID="lblMain" runat="server" Text="Pressione o botão para processar..."></asp:Label>

      <br />

      <asp:Button ID="btnGravar" runat="server" OnClick="btnGravar_Click" Text="Gravar" OnClientClick="escondeBotao();" />

  </div>

  <div id="div_aguarde" style="display: none">

      <asp:Label ID="lblMsg" runat="server" Text="Um momento..."></asp:Label>

      <asp:Image ID="ImgCarregando" runat="server" ImageUrl="http://www.supermemoria.com.br/img/carregando.gif" />

  </div>

 

 

Script

 

Pode colocar num arquivo js, ou dentro do aspx (no meu caso coloquei logo depois de asp:Content

 

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

      function escondeBotao() {

           document.getElementById('div_botao').style.display = "none";

           document.getElementById('div_aguarde').style.display = "inherit";

       }

  </script>

 

Explicação

 

Quando chamada, essa função escondeBotao() procura o elemento div_botao e coloca invisível. E procura a div_aguarde e coloca visível.

O pulo do gato está em programar essa função JS no OnClientClick do botão, que ocorre no "client" antes de fazer um Post para o server.

 

      <asp:Button ID="btnGravar" runat="server" OnClick="btnGravar_Click" Text="Gravar" OnClientClick="escondeBotao();" />

 

Pronto, ao clicar no botão todo conteúdo do div_aguarde é exibido!

 

Listagem completa

 

Default.aspx

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

  <title></title>

</head>

<body>

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

      function escondeBotao() {

           document.getElementById('div_botao').style.display = "none";

           document.getElementById('div_aguarde').style.display = "inherit";

       }

  </script>

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

  <div id="div_botao" style="display: inherit">

      <asp:Label ID="lblMain" runat="server" Text="Pressione o botão para processar..."></asp:Label>

      <br />

      <asp:Button ID="btnGravar" runat="server" OnClick="btnGravar_Click" Text="Gravar"

          OnClientClick="escondeBotao();" />

  </div>

  <div id="div_aguarde" style="display: none">

      <asp:Label ID="lblMsg" runat="server" Text="Um momento..."></asp:Label>

      <asp:Image ID="ImgCarregando" runat="server" ImageUrl="http://www.supermemoria.com.br/img/carregando.gif" />

  </div>

  </form>

</body>

</html>

 

Default.aspx.cs

 

using System;

 

namespace WebApplication1

{

  public partial class WebForm1 : System.Web.UI.Page

   {

      protected void Page_Load(object sender, EventArgs e)

       {

       }

 

      protected void btnGravar_Click(object sender, EventArgs e)

       {

            // delay de 5 segundos para "processar"

           System.Threading.Thread.Sleep(5000);

           lblMain.Text = "Processado!";

       }

   }

}