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 apresentada num navegador pode incluir código JavaScript. Este código é executado pelo navegador se o utilizador não tiver desativado a execução de código JavaScript no seu navegador. Esta tecnologia surgiu logo nos primórdios da Web e, desde 2005, tem suscitado um renovado interesse graças ao AJAX.
  • DOM: Modelo de Objetos do Documento (Document Object Model). O código JavaScript incorporado numa página HTML tem acesso ao documento sob a forma de uma árvore de objetos, o DOM. Cada elemento do documento (um campo de introdução de dados, uma baliza <div> com nome, uma baliza <select>, etc.) é representado por um nó da árvore. O código JavaScript pode alterar o documento apresentado, modificando o DOM. Por exemplo, pode alterar o texto apresentado num campo de introdução de dados através do nó do DOM que representa esse campo.

O AJAX utiliza JavaScript para efetuar comunicações navegador/servidor em segundo plano. Para responder a um evento, como o clique num botão, o navegador executará código JavaScript para enviar um pedido HTTP ao servidor. Este pedido conterá parâmetros que indicam ao servidor o que deve fazer. O servidor executará a ação solicitada. Em resposta, o servidor enviará ao navegador um fluxo HTTP contendo dados que permitem uma atualização parcial da página atualmente exibida. Esta atualização será realizada através do DOM do documento e da execução do código JavaScript incorporado no documento. Os dados devolvidos pelo servidor podem assumir diferentes formatos: XML, HTML, JSON, texto não formatado, ...

A vantagem desta tecnologia reside nesta atualização parcial do documento apresentado. Isto significa:

  • menos dados trocados entre o cliente e o servidor e, consequentemente, uma resposta mais rápida
  • uma interface gráfica mais fluida de utilizar, uma vez que as ações do utilizador não provocam o recarregamento completo da página.

Numa intranet onde as comunicações de rede são rápidas, o AJAX permite criar aplicações web com um comportamento semelhante ao das interfaces clássicas do Windows. É possível, de facto, gerir eventos como a alteração da seleção numa lista e atualizar imediatamente e parcialmente a página para refletir essa alteração. O facto de a página não ser totalmente recarregada dá ao utilizador a sensação de fluidez que tem com as aplicações do Windows. No caso das aplicações da Internet, onde os tempos de resposta podem ser longos, a tecnologia AJAX continua a ser 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,

  • revela-se pouco prático para a programação orientada para objetos. Não é, por exemplo, uma linguagem tipada. Não se declara o tipo dos dados manipulados. Assemelha-se, neste aspeto, a linguagens como o Perl ou o PHP.
  • Não possui um padrão aceite por todos os navegadores. Cada um deles tem as suas 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, uma vez que os navegadores não oferecem ferramentas eficazes para depurar o código JavaScript que executam.

Todos estes problemas do JavaScript fizeram com que fosse pouco utilizado antes da chegada do AJAX. Assim que se compreendeu a vantagem de executar código JavaScript em segundo plano, para efetuar pedidos HTTP ao servidor web e utilizar a resposta deste para, graças ao DOM, uma atualização parcial do documento apresentado, as equipas de desenvolvimento puseram mãos à obra e propuseram frameworks que permitem realizar o AJAX sem que o programador tenha de escrever código JavaScript. Para tal, foram criadas bibliotecas JavaScript capazes de se adaptar ao navegador do cliente. A inserção de código JavaScript na página HTML enviada ao navegador é feita do lado do servidor, de acordo com técnicas que variam consoante o framework AJAX utilizado. Existem frameworks Ajax tanto para Java, .NET, PHP, Ruby, ... como para AJAX, que está integrado no Visual Web Developer 2008.

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

A nova versão é obtida através da duplicação da versão anterior. Apenas a página [Default.aspx] será alterada.

  • em [1]: com o Explorador do Windows, duplica-se a pasta do projeto [pam-v1-adonet] e atribui-se-lhe o nome [pam-v2-adonet-ajax]. Em seguida, com o Visual Web Developer, abre-se o projeto (Ficheiro / Abrir um projeto) desta nova pasta [2]
  • em [3], e atribui-lhe um novo nome
  • nas propriedades do novo projeto, alteramos o nome do assembly [4], bem como o espaço de nomes predefinido [5].

Feito isto, nos ficheiros [Default.aspx, Default.aspx.cs, Default.aspx.designer.cs, Global.asax, Global.asax.cs], substitui-se o espaço de nomes [pam_v1] pelo espaço de nomes [pam_v2], de modo a manter a coerência com o espaço de nomes predefinido. 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 atualizar quando o utilizador efetua um POST. Este componente evita o recarregamento total da página.
    • 2C: o componente <asp:UpdateProgress> serve para apresentar um texto ou uma imagem durante o período da atualização, a fim de avisar o utilizador, conforme ilustrado abaixo:
  • (continuação)
    • 2D: um tipo Label denominado LabelHeureLoad que irá apresentar a hora em que o gestor do evento Load da página é executado.
    • 2E: um tipo Label denominado LabelHeureSalaire que irá apresentar a hora em que o gestor do evento Click é executado no botão [Salaire]. Pretendemos demonstrar que o Ajax não recarrega toda a página ao clicar no botão [Salaire]. É isso que mostra a captura de ecrã anterior, onde se podem ver duas horas diferentes nos dois Labels.

A implementação anterior do Ajax no formulário pode ser feita diretamente no código-fonte de [Default.aspx], através da adição de tags de extensões 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: qualquer formulário com Ajax deve incluir a baliza <asp:ScriptManager>. É esta baliza que permite a utilização dos novos componentes Ajax:
  • a baliza <asp:ScriptManager> pode ser obtida clicando duas vezes no componente [ScriptManager] acima. É necessário certificar-se de que esta baliza está incluída na baliza <form> do código-fonte. O atributo [EnablePartialRendering= "true "] da linha 8 está ausente por predefinição. Sendo «true» o seu valor por predefinição, não é indispensável.
  • linha 9: a baliza <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 mediante um evento AJAX de um componente da área. O outro valor é [UpdateMode="Always"] e é o valor por defeito. Com este atributo, a área UpdatePanel é atualizada sistematicamente, mesmo que o evento Ajax que ocorreu provenha de um componente de outra área UpdatePanel. Em geral, este comportamento não é desejável.

A baliza <asp:UpdatePanel> admite duas balizas 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á a ser atualizada. Por exemplo, clicar no botão [Salaire] irá desencadear um POST em segundo plano. O navegador não exibe então o símbolo da ampulheta e o utilizador pode, assim, sentir-se tentado a continuar a utilizar o formulário. A baliza <asp:UpdateProgress> permite exibir um texto a avisar que está a decorrer uma atualização da página. Também é possível exibir uma imagem. Aqui, exibe-se uma imagem animada (linha 29), bem como um texto (linhas 30-31):
 
  • linhas 28-32: a baliza <ProgressTemplate> delimita o conteúdo que será apresentado durante todo o período de atualização da zona UpdatePanel, na qual se encontra a baliza UpdateProgress.
  • linhas 29-31: a imagem animada e o texto que serão exibidos durante a atualização da zona 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 do pedido 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");
        // verificam-se os dados
....
}
  • linha 4: atualização da hora de cálculo do salário

Para concluir a página [Default.aspx], temos de incluir a imagem animada referenciada pela linha 4 do código-fonte seguinte 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 ficheiro [images/indicator.gif] à pasta do projeto [1]:

  • em [2], exibimos todos os ficheiros do projeto
  • no [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], ocultam-se os ficheiros que não fazem parte do projeto
  • em [7], o novo projeto

5.3. Testes da solução Ajax

Quando se solicita 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. Pode verificar isso através da 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 para False:

  

Verificar que, nessa altura, se observa o comportamento de uma página sem AJAX. Ocorre uma recarga total da página ao clicar no botão [Salaire]. Repetir 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.

Por fim, vamos destacar o papel da baliza <asp:UpdateProgress>. No código do procedimento [ButtonSalaire_Click] de [Default.aspx.cs], vamos adicionar uma instrução que interrompe o procedimento durante 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");
        // em 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 isto, vamos repetir os testes (depois de ter reposto 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 mostrou-nos que era possível implementar AJAX em aplicações ASP.NET existentes. As extensões AJAX do ASP.NET vão mais além do que acabámos de ver. Convidamos o leitor a consultar o site [http://ajax.asp.net].

https://stahe.github.io
Este curso-tutorial escrito por Serge Tahé é disponibilizado ao público de acordo com os termos da Licença Creative Commons Atribuição – Sem uso comercial – Partilha nas mesmas condições 3.0 não adaptada.