Artigos .NET Desvendando ASP.NET Postback

Compreender a arquitetura dos ciclos de vida de uma aplicação é muito importante para o programador de sistemas, pois quando este possui o domínio e entende bem como o fluxo do processo funciona, fica mais fácil de entender como e onde implementar novas funcionalidades, ou seja saber o tempo exato de realizar uma chamada ao evento quando necessário.

Infelizmente no mercado de trabalho é muito comum encontrar programadores que apenas sabem que determinado trecho de código funciona de uma forma, mas não estão interessado em saber o ciclo de vida completo da aplicação.

O PostBack é uma ação que ocorre em uma página enviando dados para o servidor, onde o mesmo é encarregado de fazer o processamento e validações do conteúdo e em seguida retorna o resultado ao navegador do cliente. Esta é uma definição básica do que o PostBack vem a ser.

Neste artigo utilizaremos o PostBack nos WebServerControls mais comums como: DropDownList,RadioButtonList e por fim mostraremos o exemplo mais comum utilizando o controle Button. Quando referenciamos o PostBack nos controles, estamos permitindo no momento em que o evento for lançado que a aplicação busque alguma informação no servidor e retorne algo para o cliente. Portanto faz se necessário verificar se aplicar o PostBack em um determinado controle é válido, pois isto gera um certo custo para o cliente, tornando a página mais lenta. Por exemplo: Imagine um formulário extenso com várias campos obrigatórios, sendo que a maioria desses campos possuem uma chamada automática ao servidor, isso acarreta uma péssima experiencia para o usuário.

Os Exemplos a seguir são de baixa complexidade, a idéia é deixar claro como o funcionamento básico do PostBack acontece.

Nota. Atribuir o PostBack aos controles asp.net, é muito comum no dia a dia do programador, no entanto é preciso analisar se aquele tratamento não poderia estar em um outro PostBack. Um exemplo simples seria em um formulário, ao invés de se realizar uma crítica à um determinado campo no momento que o campo recebeu o valor, realizar uma critica no momento em que todas as informações forem submetidas ao servidor. Isto é relativo e fica apenas como uma dica de como tratar alguns tipos de informações.

Considerando o nosso webform como “postback.aspx”, temos o seguinte código:


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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<h1>POSTBACK UTILIZANDO ASP.NET C/C#</h1>
</head>
<body>
<form id="form1" runat="server">
<div>


</div>
</form>
</body>
</html>
Listagem 1. PostBack.aspx

Esta é uma página .aspx recentemente criada, perceba que na tag é apresentado um atributo runat com o valor server, o mesmo acontece na tag . Isso quer dizer que este formulário será submetido ao servidor, todo controle asp.net deve possui este atributo, caso contrário não será renderizado pelo servidor.

Outro ponto importante é a diretiva Page, ela contém um atributo CodeBehind, e o seu valor é um arquivo de tipo aspx.cs criado automáticamente quando criamos um webform. Utlizando o botão direito do mouse na pagina PostBack.aspx selecione a opção View Code para ter acesso a o CodeBehind.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication1
{
public partial class PostBack : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }


}
}
Listagem 2. PostBack.aspx.cs

Esta classe possui um evento de nome bem intuitivo (Page_Load) que acontecerá sempre quando a página FileUpload.aspx for executada, ou seja é neste momento que os Event Handlers de inicialização serão utilizados, por fim a página .aspx executa o evento Page.PreRender, assim renderizando toda a página asp.net para o HTML Equivalente.

Nota: O evento Page.PreRender acontece indiferente de declarado na página, caso seja necessário realizar algum tratamento é possível escrever o evento na página. EventHandlers são rotinas que acontecem dentro dos eventos, como fluxos de decisão,iteração,métodos e etc...

Onde fica o Javascript?

A linguagem de programação Javascript, tem um papel fundamental no PostBack em páginas asp.net, afinal de contas quando um determinado controle possui a propriedade AutoPostBack definida como true, o Javascript se encarrega de enviar as informações para o servidor.

O Asp.net adiciona dois campos input com o tipo Hidden, a finalidade destes são enviar as informações para o servidor. Até o momento que nenhum processamento acontecer essas varíaveis não possuirão valor algum.


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>
  </title>
  <h1>POSTBACK UTILIZANDO ASP.NET C/C#</h1>
</head>
<body>
  <form method="post" action="PostBack.aspx" id="form1">
     <div class="aspNetHidden">
        <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 
        value="HOsNgx5vjSoQ50wn2MLECG4vwILrNt0I8rwInDrL+WPH2R
        xidrkh+DRfGWgSg3bUmKymxD/
        V3r7s3sR2cmPh8Mi5DECI329DlnEYwTint4Y=" />
     </div>
     <div class="aspNetHidden">
        <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" 
        value="ppoOcdeEw9FTMX9NsOkRpwukpNDErX1MnJFvQFyrtv1+GaVJErJMVdlDLue3LcOiJ
        dhqrUA8c5CAl1BQg+A4rQTm64+NRSdCa/31Ok4o3vAOqMbeoJlagUTZ2KA6tRjk3Neaw5
        EyLezslJJOzLbU7w==" />
     </div>
     <div>
        Frase do dia:
        <input name="TextBox1" type="text" id="TextBox1" />
        <input type="submit" name="ctl02" value="Enviar" />
     </div>
  </form>
</body>
</html>
Listagem 3. HTML renderizado

No exemplo acima, a página PostBack.aspx apresenta um botão e um textbox. Quando alguma informação for enviada ao servidor, neste caso quando o botão for acionado os campos de tipo Hidden terão os seus valores alterados. Esses valores são enviados ao servidor através de uma funcão chamada __doPostBack.

Após conhecido como os eventos PostBack acontecem em páginas asp.net, na seção logo abaixo será apresentado um exemplo simples, apresentando os controles que possuem a propriedade AutoPostBack=True.

Exemplo de Postback

Layout da página PostBack.Aspx
Figura 1. Layout da página PostBack.Aspx

O código acima possui cinco WebServerControls, para cada controle possui um evento que é disparado quando qualquer ação for realizada em um determinado controle. De acordo com a imagem o evento Page_Load ja foi executado e o mesmo exibe uma mensagem de boas vindas para o visitante de nosso site.

Um outro evento bastante importante é o Clique do botão, que será encarregado de coletar todas as informações contidas na tela e apresenta-las de forma resumida para o usuário final.

Nota: No momento de salvar o arquivo importado no servidor, verificar se o seu usuário possui permissões de escrever dados no disco, caso contrário será lançada uma exceção.

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<h1>POSTBACK UTILIZANDO ASP.NET C/C#</h1>
</head>
<body>
<form id="form1" runat="server">
    <div>
        <asp:Label ID="lblBoasVindas" ForeColor="Blue" 
        runat="server" /><br />
        <br />

        Nome:  
        <asp:TextBox ID="txtNome" OnTextChanged="txtNome_TextChanged" 
        AutoPostBack="true" runat="server" /><br />
        <asp:Label ID="lblNomeResultado" runat="server" />
        <br />
        Sexo:  
        <asp:DropDownList ID="drpSexo" AutoPostBack="true" 
        OnSelectedIndexChanged="drpSexo_SelectedIndexChanged" runat="server">
            <asp:ListItem Text="M" />
            <asp:ListItem Text="F" />
        </asp:DropDownList><br />
        <asp:Label ID="lblDropDownSexoResultado" 
        runat="server" /><br />

        Linguagens de programação:
        <asp:RadioButtonList ID="rblLinguagem" AutoPostBack="true" 
        OnSelectedIndexChanged="rblLinguagem_SelectedIndexChanged" 
        runat="server">
            <asp:ListItem Text="Java" />
            <asp:ListItem Text="C#" />
        </asp:RadioButtonList><asp:Label 
        ID="lblLinguagensResultado" runat="server" />

        <br />
        Frase do dia:
        <asp:TextBox ID="txtFrase" OnTextChanged="txtFrase_TextChanged" 
        AutoPostBack="true" runat="server"></asp:TextBox>
        <br />
        <asp:Label ID="lblFraseResultado" runat="server" />
        <br />
        <asp:Button ID="btnClick" Text="Enviar" OnClick="btn_Click" 
        runat="server" /><br />
         <asp:Label ID="lblButton" runat="server" />
        <br />

    </div>
</form>
</body>
</html>
Listagem 4. PostBack.aspx completa

Todos os WebControls precisam ter tanto o atributo runat com o valor igual a server, quanto a propriedade AutoPostBack definida como true, caso a propriedade não seja alterada, o seu valor padrão será sempre false, ou seja este postback só irá ser processado quando o formulário inteiro enviar informações para o servidor. 


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication1
{
public partial class PostBack : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

        lblBoasVindas.Text = "Bem vindo ao meu site";
        lblBoasVindas.Font.Bold = true;
        lblBoasVindas.Height = 20;

    }

    protected void btn_Click(object sender, EventArgs e)
    {

        lblButton.Text = "<b>btn_Click:</b> o visitante " 
        + txtNome.Text + " de sexo " + drpSexo.SelectedItem.Value 
        + " prefere a linguagem de programação " 
        + rblLinguagem.SelectedItem.Value
            + "</br> a frase do dia de hoje é : <b>" 
            + txtFrase.Text + "</b>";

    }

    protected void txtNome_TextChanged(object sender, EventArgs e)
    {
        lblNomeResultado.Text = "<B>txtNome_TextChanged:</B> " 
        + txtNome.Text;
    }

    protected void drpSexo_SelectedIndexChanged(object sender, EventArgs e)
    {
        lblDropDownSexoResultado.Text = 
        "<B>drpSexo_SelectedIndexChanged:</B> " + drpSexo.SelectedItem.Value;
    }

    protected void rblLinguagem_SelectedIndexChanged(object sender, EventArgs e)
    {
        lblLinguagensResultado.Text = 
        "<B>rblLinguagem_SelectedIndexChanged:</B> " 
        + rblLinguagem.SelectedItem.Value;
    }

    protected void txtFrase_TextChanged(object sender, EventArgs e)
    {
        lblFraseResultado.Text = 
        "<B>txtFrase_TextChanged:</B> " + txtFrase.Text;
    }


}
}
Listagem 5. PostBack.aspx.cs completa

Os eventos definidos na pagina PostBack.aspx são todos implementados no CodeBehind, caso alguns destes métodos não sejam implementados uma exceção será lançada.

Execução da aplicação
Figura 2. Execução da aplicação

Os eventos foram disparados com sucesso, dessa forma podemos observar além do nome do evento o resultado do event handler no código, simples não?

Conclusão

Neste artigo exploramos como o ciclo de vida de uma página asp.net acontece, aprendemos como definir os WebServerControls com a propriedade AutoPostBack e vimos a aplicabilidade das teorias em um exemplo prático.