none
Atualização de uma página sem dar postback RRS feed

  • Pergunta

  • Boa Tarde,

    Tenho uma aplicação de automação e preciso atualizar uma página minha de acordo com os dados que recebo do banco.

    Quero apenas atualizar minha página sem dar o postback, ou sem apertar o F5, quero atualizar minha página sem mexer nela.

    Assim como as páginas de e-mails, que atualizam sozinhas a cada email que chega.

    Como posso fazer isso? Me ajudem, por favor...

     

    Muito obrigado !

    Até

    segunda-feira, 22 de agosto de 2011 17:10

Respostas

  • O UpdatePanel combinado com o controle Timer. O Timer não é do UpdatePanel, é um outro controle.

    cara com jquery é um pouco mais complicado, apesar de ser simples (rsrs).  Se sua intenção for só vizualização de dados (grid,detalhes), como é o caso dos emails, jquery é altamente eficiente. E creio que vc não precisa atualizar a pagina inteira.

    Pra mais detalhes sobre jquery entra no site deles "www.jquery.com" e da uma olhada nos metodos e outras coisas bem interessantes. Hoje em dia, programador web não consegue mais viver sem uma biblioteca dessas.

    Espero ter ajudado. Abraço!

    segunda-feira, 22 de agosto de 2011 18:04
  • sim,

    é só vc colocar uma função ajax dentro da função Write. Segue um exemplo abaixo da função ajax do jquery:

    $.ajax({
            type: "GET",
            url: 'MinhaPagina.aspx', // requisita a pagina

            cache: false,
            data: { id: 0 }, // Parametros do GET (QueryString)
            success: function (data) {
               $("#Id_da_minha_div").html(data); // aqui, a div que vc colocar receberá o html retornado
            },
            error: function (xhr, er, errorThrown) {
                alert(xhr.responseText); // alerta o erro se ocorrer
            }
        });

    Nesse metodo vc pode colocar a pagina que for no "url" que ele trará. O parametro data serve para vc passar alguma QueryString se quiser. No "sucess" vc faz o que quer com o resultado. Nesse caso o retorno é puro HTML, então basta jogar o html resultante na sua div.

    só lembrando que pra usar jquery vc deve fazer referencia ao .js do jquery.

     

    Abraço!

    terça-feira, 23 de agosto de 2011 14:23
  • hum, testa assim:

     

    $(document).ready({

        $.ajax({
    type: "GET",
    url: 'Default.aspx', // requisita a pagina

    cache: false,
    data: { id: 0 }, // Parametros do GET (QueryString)
    success: function (data) {
    $("#showimage").html(data); // aqui, a div que vc colocar receberá o html retornado
    alert('deucerto');
    },
    error: function (xhr, er, errorThrown) {
    alert(xhr.responseText); // alerta o erro se ocorrer
    }
    });

    });

     

    a função acima "$(document).ready(function(){});" é executada quando todo o documento é inicializado. Testa assim e veja se a função ajax requisita sua pagina. Outra coisa, como vc esta trabalhando com script fica dificl vc saber os erros que acontecem e pq nao esta dando certo sem uma ferramenta de auxilio. Baixa o "FireBug" do Moziila pra vc testar quando tiver utilizando script. Ele vai te ajudar MUITO.

    terça-feira, 23 de agosto de 2011 17:22
  • ok,

    então faz assim:

    no aspx:

    <div runat="server" id="teste">

    é so colocar o atributo runat = server. Pra vc poder manipular no servidor.

    depois no .cs

    teste.Attributes["style"] = "background-color:Red;width:200px;height:200px;";

     

    Abraço!

    quarta-feira, 24 de agosto de 2011 15:19

Todas as Respostas

  • A página não pode piscar, quero atualizá-la dinamicamente, o usuário não pode olhar a tela piscando...
    segunda-feira, 22 de agosto de 2011 17:47
  • vc pode fazer isso utilizando Ajax e UpdatePanel. Ja viu sobre isso?? Se o problema for dar refresh na pagina de tempos em tempos o UpdatePanel com um controle Timer pode resolver seu problema

    O UpdatePanel da um PostBack, porem camulflado. A tela não piscará dando aquela sensação de lentidão. Ele só ajuda na experiência do usuário. Se é o que vc  ta atras, essa é uma boa opção.

     

    Espero ter ajudado. Abraço!

    segunda-feira, 22 de agosto de 2011 17:49
  • UpdatePanel tem um controle Timer dentro dele? Como faço?

     

    E com Jquery, como eu faria? Desconheço um pouco sobre tal.

    segunda-feira, 22 de agosto de 2011 17:51
  • O UpdatePanel combinado com o controle Timer. O Timer não é do UpdatePanel, é um outro controle.

    cara com jquery é um pouco mais complicado, apesar de ser simples (rsrs).  Se sua intenção for só vizualização de dados (grid,detalhes), como é o caso dos emails, jquery é altamente eficiente. E creio que vc não precisa atualizar a pagina inteira.

    Pra mais detalhes sobre jquery entra no site deles "www.jquery.com" e da uma olhada nos metodos e outras coisas bem interessantes. Hoje em dia, programador web não consegue mais viver sem uma biblioteca dessas.

    Espero ter ajudado. Abraço!

    segunda-feira, 22 de agosto de 2011 18:04
  • Como eu faria por Jquery? Que propriedade eu usaria?

    Valeeu !

     

    terça-feira, 23 de agosto de 2011 10:56
  • Tem um metodo chamado Ajax. Procura por ele. Tem várias formas de se chamar esse metodo. No site dele tem tudo explicado.

    Abraço!

    terça-feira, 23 de agosto de 2011 12:09
  • Eu estou fazendo assim:

      <script type="text/javascript">  
        function Load()
        {
          setTimeout( "refresh()", 1000);
        }
        function refresh()
        {
          window.location.href = window.location;
        }
      </script>
    


    Está funcionando, atualiza sozinho, porém, está dando aquelas piscadas na tela, não quero isso.

    Tem como tirar?

     

    Obrigado !

    terça-feira, 23 de agosto de 2011 13:16
  • Cara, vc deve explicar melhor o que deseja atualizar. Se voce deseja atualizar somente porção da pagina aconselho Ajax, que é bem mais rapido e evita o pisca.  Se o refresh tem de ser na pagina toda mesmo, tipo como o site da Globo faz, desse jeito nao ta ruim. Se pagina apresentar mt conteudo e mt imagem aconselho fazer dessa forma mesmo.   
    terça-feira, 23 de agosto de 2011 13:29
  • Achei isso nos fóruns, a sintaxe está correta?
          var tempo_seg = 1 // Tempo em segundos
          var tempo_ms = tempo_seg * 1000 // Tempo em milésimos de segundo
          function Atualiza() {
          goAjax("Default.aspx")
          setTimeout("Atualiza()", tempo_ms)
          }
          function goAjax(url) {
          xmlhttp = new XMLHttpRequest()
          xmlhttp.open("GET", url, true)
          xmlhttp.onreadystatechange = function() {
          if (xmlhttp.readyState==4) {
          retorno = xmlhttp.responseText
          divisao = document.getElementById("showimage")
          divisao.innerHTML = retorno
          }
          }
            xmlhttp.send(null)
          }
    

    terça-feira, 23 de agosto de 2011 13:32
  • Gostaria de atualizar um DIV só, na verdade, a página toda seria bom também, mas sem dar esse refresh =/ to apanhando !
    terça-feira, 23 de agosto de 2011 13:42
  • Esse código do Ajax que postei, está dando erro na minha URL =/
    terça-feira, 23 de agosto de 2011 13:46
  • Olá amigo,

    Veja se isso te ajuda!

    Updatepanel - http://www.macoratti.net/07/07/ajax_upp.htm

    Abraços,

     

    Daniel Afonso

    terça-feira, 23 de agosto de 2011 14:01
  • Eu consegui !

     

    Fiz da seguinte forma amigos:

     

         window.onload = function()
         { 
          window.setInterval( write, 2000 ); 
         } 
         var i = 1; 
         function write()
         { 
           document.getElementById('showimage').innerHTML += 'Oi! '+i+'<br />'; 
           i++; 
         } 
    

     

    Essa function Write era só pra ver se funciona, e funciona mesmo, ficou perfeito, a cada 2 segundos ele escreve na página.

    Agora teria como eu usar esse função atrelada com o banco de dados? Pois precisarei pegar alguns dados do banco e jogar na tela, assim que eles forem atualizados...

     

    terça-feira, 23 de agosto de 2011 14:12
  • sim,

    é só vc colocar uma função ajax dentro da função Write. Segue um exemplo abaixo da função ajax do jquery:

    $.ajax({
            type: "GET",
            url: 'MinhaPagina.aspx', // requisita a pagina

            cache: false,
            data: { id: 0 }, // Parametros do GET (QueryString)
            success: function (data) {
               $("#Id_da_minha_div").html(data); // aqui, a div que vc colocar receberá o html retornado
            },
            error: function (xhr, er, errorThrown) {
                alert(xhr.responseText); // alerta o erro se ocorrer
            }
        });

    Nesse metodo vc pode colocar a pagina que for no "url" que ele trará. O parametro data serve para vc passar alguma QueryString se quiser. No "sucess" vc faz o que quer com o resultado. Nesse caso o retorno é puro HTML, então basta jogar o html resultante na sua div.

    só lembrando que pra usar jquery vc deve fazer referencia ao .js do jquery.

     

    Abraço!

    terça-feira, 23 de agosto de 2011 14:23
  • na url vc tambem pode colocar a url de um serviço como um WebService ou WCF que retorne alguns dados do Banco.
    terça-feira, 23 de agosto de 2011 14:24
  • Não funcionou esse Ajax dentro da minha função Write =/

     

    Ele duplicou o Div e carregou o cabeçalho, muito estranho...

    terça-feira, 23 de agosto de 2011 14:31
  • poste aí como vc colocou
    terça-feira, 23 de agosto de 2011 14:48
  • Eu joguei assim:

     

     <script type="text/javascript">  
         window.onload = function()
         { 
          window.setInterval( write, 1000 ); 
         } 
         var i = 1; 
         function write()
         { 
           document.getElementById('showimage').innerHTML += 'Oi! '+i+'<br />'; 
           i++; 
    
    //        $.ajax({
    //            type: "GET", 
    //            url: 'Default.aspx', // requisita a pagina
    
    //            cache: false,
    //            data: { id: 0 }, // Parametros do GET (QueryString)
    //            success: function (data) {
    //              $("#showimage").html(data); // aqui, a div que vc colocar receberá o html retornado
    //            },
    //            error: function (xhr, er, errorThrown) {
    //              alert(xhr.responseText); // alerta o erro se ocorrer
    //            }
    //          });
    
         } 
    
    
      </script><br/>
    
    ps: Está comentado !
    terça-feira, 23 de agosto de 2011 15:59
  • Só mais uma coisa, essa função minha, está realmente atualizando a página?

     

    Ou está só escrevendo coisas?

    terça-feira, 23 de agosto de 2011 16:01
  • Está totalmente errado o que eu coloquei?
    terça-feira, 23 de agosto de 2011 17:13
  • hum, testa assim:

     

    $(document).ready({

        $.ajax({
    type: "GET",
    url: 'Default.aspx', // requisita a pagina

    cache: false,
    data: { id: 0 }, // Parametros do GET (QueryString)
    success: function (data) {
    $("#showimage").html(data); // aqui, a div que vc colocar receberá o html retornado
    alert('deucerto');
    },
    error: function (xhr, er, errorThrown) {
    alert(xhr.responseText); // alerta o erro se ocorrer
    }
    });

    });

     

    a função acima "$(document).ready(function(){});" é executada quando todo o documento é inicializado. Testa assim e veja se a função ajax requisita sua pagina. Outra coisa, como vc esta trabalhando com script fica dificl vc saber os erros que acontecem e pq nao esta dando certo sem uma ferramenta de auxilio. Baixa o "FireBug" do Moziila pra vc testar quando tiver utilizando script. Ele vai te ajudar MUITO.

    terça-feira, 23 de agosto de 2011 17:22
  • Não acontece nada =/
    terça-feira, 23 de agosto de 2011 17:28
  • vc fez referencia ao .js do jquery??
    terça-feira, 23 de agosto de 2011 17:44
  • Fiz sim, mas já resolvi o problema utilizando UpdatePanel com a propriedade Timer.

     

    Porém, agora estou com outro problema, vejam se podem me ajudar, pelo que parece é muito simples:

    <asp:Timer runat="server" ID="Timer" Interval="1000" OnTick="Atualizar">
      </asp:Timer>
    

     

    public void Atualizar(object sender, EventArgs e)
      {
        
           lblPuffer.BackColor = System.Drawing.ColorTranslator.FromHtml("Red");
        
      }
    

     

    Tenho esse método Atualizar, dentro do meu Timer.

    Quero que a minha label troque o BackColor a cada atualizada, a cada segundo.

    Como posso fazer isso?

    Dessa forma que estou fazendo, ela troca de cor após 1 segundo e já era, não troca mais.

     

    Como posso fazer pra cor ficar trocando a cada atualizada?

    Obrigado !

     

     

    terça-feira, 23 de agosto de 2011 18:02
  • Acredito que ele esteja trocando a cor corretamente, o problema é que após a primeira torca, ele troca vermelho por vermelho. ;)

    Essa troca de cores será aleatória? Não dependerá de uma regra de negócio?

    Abraços,

     

    Daniel Afonso

    terça-feira, 23 de agosto de 2011 18:37
  • Quero mudar a cor de uma DIV, como consigo alterar a cor, através do .CS(Code) da página?

     

    Me ajudem, por favor.

     

    Obrigado !

    quarta-feira, 24 de agosto de 2011 13:02
  • para alterar no c#, vc deve colocar um controle asp:Panel ao inves da div pra vc poder manipul-alo pelo servidor. O panel tem mesmo comportamento da div. Aí no .cs apenas altere a cor de background dele.

    Abraço!

    quarta-feira, 24 de agosto de 2011 13:49
  • Mas precisa usar uma DIV mesmo, e sei que tem como mudar a cor através do .cs, só não sei como =/

     

    Valeeeu

    quarta-feira, 24 de agosto de 2011 13:56
  • ok,

    então faz assim:

    no aspx:

    <div runat="server" id="teste">

    é so colocar o atributo runat = server. Pra vc poder manipular no servidor.

    depois no .cs

    teste.Attributes["style"] = "background-color:Red;width:200px;height:200px;";

     

    Abraço!

    quarta-feira, 24 de agosto de 2011 15:19