Skip to content

5. A aplicaçã ção [SimuPaie] – versão 2 – AJAX / ASP.NET

5.1. Introduction

A tecnologia AJAX (Asynchronous JavaScript and XML) reúne um conjunto de tecnologias:

  • JavaScript: uma página HTML exibida em um navegador pode conter código JavaScript. Esse código é executado pelo navegador, caso o usuário não tenha desativado a execução de código JavaScript em seu navegador. Essa tecnologia surgiu logo nos primórdios da web e, desde 2005, vem despertando um renovado interesse graças ao AJAX.
  • DOM: Modelo de Objetos do Documento (Document Object Model). O código JavaScript incorporado em uma página HTML tem acesso ao documento na forma de uma árvore de objetos, o DOM. Cada elemento do documento (um campo de entrada, uma tag <div> com nome, uma tag <select>, etc.) é representado por um nó da árvore. O código JavaScript pode alterar o documento exibido modificando o DOM. Por exemplo, ele pode alterar o texto exibido em um campo de entrada por meio do nó do DOM que representa esse campo.

O AJAX utiliza JavaScript para realizar trocas entre o navegador e o servidor em segundo plano. Para responder a um evento, como o clique em um botão, o navegador executará código JavaScript para enviar uma solicitação HTTP ao servidor. Essa solicitação conterá parâmetros que indicam ao servidor o que ele deve fazer. O servidor executará a ação solicitada. Em resposta, ele enviará ao navegador um fluxo HTTP contendo dados que permitem uma atualização parcial da página atualmente exibida. Essa atualização será realizada por meio do DOM do documento e da execução do código JavaScript incorporado no documento. Os dados retornados pelo servidor podem estar em diferentes formatos: XML, HTML, JSON, texto não formatado, etc.

O diferencial dessa tecnologia reside nessa atualização parcial do documento exibido. Isso significa:

  • menos dados trocados entre o cliente e o servidor e, portanto, uma resposta mais rápida
  • uma interface gráfica mais fluida de usar, pois as ações do usuário não provocam o recarregamento completo da página.

Em uma intranet onde as trocas de dados pela rede são rápidas, o AJAX permite criar aplicativos web com um comportamento semelhante ao das interfaces clássicas do Windows. É possível, de fato, gerenciar eventos como a alteração da seleção em uma lista e atualizar imediatamente e parcialmente a página para refletir essa alteração. O fato de a página não ser totalmente recarregada dá ao usuário a sensação de fluidez que ele tem com os aplicativos do Windows. Para aplicativos da Internet, onde os tempos de resposta podem ser longos, a tecnologia AJAX continua utilizável, mas a sensação de fluidez depende do desempenho da rede.

A principal dificuldade no AJAX é a linguagem JavaScript. Criada logo nos primórdios da web,

  • ele se mostra pouco prático para programação orientada a objetos. Não é, por exemplo, uma linguagem tipada. Nela, não se declara o tipo dos dados manipulados. Isso o aproxima de linguagens como Perl ou PHP.
  • Ele não possui um padrão aceito por todos os navegadores. Cada um deles tem suas próprias extensões “JavaScript” proprietárias, o que faz com que um código JavaScript escrito para o IE possa não funcionar no Mozilla Firefox e vice-versa.
  • É difícil de depurar, já que os navegadores não oferecem ferramentas eficientes para depurar o código JavaScript que executam.

Todos esses problemas do JavaScript fizeram com que ele fosse pouco utilizado antes da chegada do AJAX. Depois que se compreendeu a vantagem de executar código JavaScript em segundo plano, para fazer solicitações HTTP ao servidor web e utilizar a resposta deste para, graças ao DOM, uma atualização parcial do documento exibido, as equipes de desenvolvimento começaram a trabalhar e propuseram frameworks que permitem fazer o AJAX sem que o desenvolvedor precise escrever código JavaScript. Para isso, foram criadas bibliotecas de JavaScript capazes de se adaptar ao navegador do cliente. A inserção de código JavaScript na página HTML enviada ao navegador é feita no lado do servidor, de acordo com técnicas que variam conforme o framework AJAX utilizado. Existem frameworks Ajax tanto para Java, .NET, PHP, Ruby, ... quanto para AJAX, que está integrado ao Visual Web Developer 2008.

5.2. O projeto Visual Web Developer da camada [web-ui-ajax]

A nova versão é obtida por meio da duplicação da versão anterior. Apenas a página [Default.aspx] será modificada.

  • em [1]: usando o Explorador do Windows, duplique a pasta do projeto [pam-v1-adonet] e renomeie-a como [pam-v2-adonet-ajax]. Em seguida, com o Visual Web Developer, abre-se o projeto (Arquivo / Abrir um projeto) dessa nova pasta [2]
  • em [3], renomeando-o para
  • nas propriedades do novo projeto, alteramos o nome do assembly [4], bem como o namespace padrão [5].

Feito isso, nos arquivos [Default.aspx, Default.aspx.cs, Default.aspx.designer.cs, Global.asax, Global.asax.cs], substitui-se o namespace [pam_v1] pelo namespace [pam_v2], a fim de manter a coerência com o namespace padrão. Por exemplo, [Default.aspx] [6] passa a ser:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="pam_v2._Default" %>
...

A página [Default.aspx] será alterada da seguinte forma:

  • adição de componentes Ajax no formulário [Default.aspx] (ver [2] acima).
    • 2A: o componente <asp:ScriptManager> é necessário para qualquer projeto AJAX
    • 2B: o componente <asp:UpdatePanel> serve para delimitar a área a ser atualizada durante uma ação do usuário no POST. Esse componente evita o recarregamento total da página.
    • 2C: o componente <asp:UpdateProgress> serve para exibir um texto ou uma imagem durante a atualização, a fim de avisar o usuário, conforme mostrado abaixo:
  • (continuação)
    • 2D: um tipo Label denominado LabelHeureLoad que exibirá a hora em que o manipulador do evento Load da página é executado.
    • 2E: um tipo Label denominado LabelHeureSalaire, que exibirá a hora em que o manipulador do evento Click é executado no botão [Salaire]. Queremos mostrar que o Ajax não recarrega a página inteira ao clicar no botão [Salaire]. É isso que mostra a captura de tela anterior, na qual é possível ver duas horas diferentes nos dois Labels.

A implementação de Ajax no formulário pode ser feita diretamente no código-fonte de [Default.aspx], adicionando tags de extensão Ajax:


...
<body style="text-align: left" bgcolor="#ffccff">
  <h3>
    Feuille de salaire
    <asp:Label ID="LabelHeureLoad" runat="server" BackColor="#C0C000"></asp:Label></h3>
  <hr />
  <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
    <asp:UpdatePanel runat="server" ID="UpdatePanelPam" UpdateMode="Conditional">
      <ContentTemplate>
        <div>
          <table>
            <tr>
...
            <tr>
              <td>
                <asp:DropDownList ID="ComboBoxEmployes" runat="server">
                </asp:DropDownList></td>
              <td>
                <asp:TextBox ID="TextBoxHeures" runat="server" EnableViewState="False">
                </asp:TextBox></td>
              <td>
                <asp:TextBox ID="TextBoxJours" runat="server" EnableViewState="False">
                </asp:TextBox></td>
              <td>
                <asp:Button ID="ButtonSalaire" runat="server" Text="Salaire" CausesValidation="False" /></td>
                <td>   <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                  <ProgressTemplate>
                    <img src="images/indicator.gif" />
                    <asp:Label ID="Label5" runat="server" BackColor="#FF8000" EnableViewState="False"
                      Text="Calcul en cours. Patientez ...."></asp:Label>
                  </ProgressTemplate>
                </asp:UpdateProgress>
          <asp:Label ID="LabelHeureSalaire" runat="server" BackColor="#C0C000"></asp:Label></td>
            </tr>
            <tr>
...
            </tr>
          </table>
        </div>
        <br />
....
          <table>
            <tr>
              <td>
                Salaire net à payer :
              </td>
              <td align="center" bgcolor="#C0C000" height="20px">
                <asp:Label ID="LabelSN" runat="server" EnableViewState="False"></asp:Label></td>
            </tr>
          </table>
          &nbsp;</asp:Panel>
      </ContentTemplate>
    </asp:UpdatePanel>
  </form>
</body>
</html>
  • linha 8: todo formulário com Ajax deve incluir a tag <asp:ScriptManager>. É essa tag que permite o uso dos novos componentes Ajax:
  • a tag <asp:ScriptManager> pode ser obtida clicando duas vezes no componente [ScriptManager] acima. É preciso verificar se essa tag está contida na tag <form> do código-fonte. O atributo [EnablePartialRendering= "true "] da linha 8 está ausente por padrão. Como o valor “true” é seu valor padrão, ele não é indispensável.
  • linha 9: a tag <asp:UpdatePanel> permite delimitar as áreas da página que devem ser atualizadas durante uma atualização parcial da página. O atributo [UpdateMode="Conditional"] indica que a área só deve ser atualizada em caso de um evento AJAX de um componente da área. O outro valor é [UpdateMode="Always"], que é o valor padrão. Com esse atributo, a área UpdatePanel é atualizada sistematicamente, mesmo que o evento Ajax que ocorreu tenha origem em um componente de outra área UpdatePanel. Em geral, esse comportamento não é desejável.

A tag <asp:UpdatePanel> admite duas tags filhas: <ContentTemplate> e <Triggers>.

  • As tags <asp:ContentTemplate>, nas linhas 10 e 53, delimitam a área da página a ser parcialmente atualizada.
  • linhas 27-33: um componente Ajax <asp:UpdateProgress> que permite exibir um texto durante todo o tempo em que a página está sendo atualizada. Por exemplo, clicar no botão [Salaire] acionará um POST em segundo plano. O navegador não exibe a ampulheta e, assim, o usuário pode ser levado a continuar usando o formulário. A tag <asp:UpdateProgress> permite exibir um texto avisando que uma atualização da página está em andamento. Também é possível exibir uma imagem. Aqui, exibimos uma imagem animada (linha 29), bem como um texto (linhas 30-31):
 
  • linhas 28-32: a tag <ProgressTemplate> delimita o conteúdo que será exibido durante todo o período de atualização da área UpdatePanel, na qual se encontra a tag UpdateProgress.
  • linhas 29-31: a imagem animada e o texto que serão exibidos durante a atualização da área UpdatePanel.
  • linha 5: o rótulo LabelHeureLoad é colocado fora da área com Ajax
  • linha 34: o rótulo LabelHeureSalaire é colocado na área com Ajax

O código da página [Default.aspx.cs] sofre as seguintes alterações:


    protected void Page_Load(object sender, System.EventArgs e)
    {
        // hora de cada carregamento da página
        LabelHeureLoad.Text = DateTime.Now.ToString("hh:mm:ss");
        // processamento da solicitação inicial
        if (!IsPostBack)
        {
....
}
  • linha 4: atualização da hora de carregamento da página 

   protected void ButtonSalaire_Click(object sender, System.EventArgs e)
    {
        // hora do cálculo do salário
        LabelHeureSalaire.Text = DateTime.Now.ToString("hh:mm:ss");
        // verificação dos dados
....
}
  • linha 4: atualização da hora de cálculo do salário

Para finalizar a página [Default.aspx], precisamos incluir a imagem animada referenciada pela linha 4 do código-fonte a seguir da página:


            <td>
              <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                <ProgressTemplate>
                  <img src="images/indicator.gif" />
                  <asp:Label ID="Label5" runat="server" BackColor="#FF8000" EnableViewState="False"
                    Text="Calcul en cours. Patientez ...."></asp:Label>
                </ProgressTemplate>
              </asp:UpdateProgress>
              <asp:Label ID="LabelHeureSalaire" runat="server" BackColor="#C0C000"></asp:Label>
</td>

Com o Explorador do Windows, adicionamos o arquivo [images/indicator.gif] à pasta do projeto [1]:

  • em [2], exibimos todos os arquivos do projeto
  • em [3], a pasta [images]
  • em [4], inclui-se a pasta [images] no projeto
  • em [5], a pasta [images] foi incluída no projeto
  • no [6], os arquivos que não fazem parte do projeto são ocultados
  • em [7], o novo projeto

5.3. Testes da solução Ajax

Ao solicitar a execução do projeto (CTRL-F5), obtém-se a seguinte página:

  • em [1], o tempo de carregamento da página

Faça alguns testes e verifique se o botão [Salaire] não provoca o recarregamento completo da página. Você pode verificar isso pela hora exibida para o processamento do clique no botão [Salaire] [2], que não é a mesma que a hora do carregamento inicial da página [3]:

Repita os testes definindo a propriedade EnablePartialRendering do componente ScriptManager1 como False:

  

Verifique que, nesse caso, o comportamento é o de uma página sem AJAX. Ocorre uma recarga total da página ao clicar no botão [Salaire]. Repita os testes com outro navegador. O teste em vários navegadores tem como objetivo demonstrar que o JavaScript gerado pelos componentes de servidor ASP / AJAX é interpretado corretamente pelos diferentes navegadores.

Para finalizar, vamos destacar a função da tag <asp:UpdateProgress>. No código do procedimento [ButtonSalaire_Click] de [Default.aspx.cs], vamos adicionar uma instrução que interrompe o procedimento por 3 segundos:


using System.Threading;
   ...
protected void ButtonSalaire_Click(object sender, System.EventArgs e)
    {
        // hora do cálculo do salário
        LabelHeureSalaire.Text = DateTime.Now.ToString("hh:mm:ss");
        // espera 
        Thread.Sleep(3000);
        // verificação dos dados
....
}

A linha 8 faz com que o thread que executa o procedimento [ButtonSalaire_Click] aguarde 5 segundos. Feito isso, vamos refazer os testes (após redefinir o atributo EnablePartialRendering do componente ScriptManager1 para True). Desta vez, vemos o texto de [UpdateProgress], bem como a imagem animada durante o cálculo do salário:

Image

5.4. Conclusion

O estudo anterior nos mostrou que era possível implementar AJAX em aplicativos ASP.NET existentes. As extensões AJAX do ASP.NET vão além do que acabamos de ver. O leitor é convidado a consultar o site [http://ajax.asp.net].

https://stahe.github.io
Este tutorial do curso, escrito por Serge Tahé, é disponibilizado ao público sob os termos da Creative Commons Atribuição – Sem uso comercial – Compartilhamento igual 3.0 inalterado.