|
<< Click to Display Table of Contents >> Ocultando ou exibindo divs ao pressionar botão |
  
|
|
<< Click to Display Table of Contents >> Ocultando ou exibindo divs ao pressionar botão |
|
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!";
}
}
}