Início > Ajax > Para que servem os “AJAX Server Controls” ?

Para que servem os “AJAX Server Controls” ?

Para que servem os “AJAX Server Controls” ?

Os WebSites mais modernos fornecem ao usuário uma interface que se aproxima de uma aplicação desktop, passando a sensação de que o processamento está ocorrendo no navegador da pessoa que está acessando o site, para que seja possível usufruir dessas características é necessário utilizar AJAX em seu WebSite.

                O ASP.NET inclui alguns componentes que habilitam as características do AJAX de modo a facilitar a sua implementação por parte do desenvolvedor  dentre eles:

ü  Microsoft AJAX Library: conjunto de arquivos javascript para serem usados do lado cliente da aplicação.

ü  ASP.NET AJAX Server Controls: habilitam em uma página a atualização parcial de seu conteúdo, habilitando a comunicação com o servidor sem que o usuário “perceba”.

ü  jQuery: É uma biblioteca “Open Source” http://jquery.com para escrever código do lado cliente da aplicação.

ü  AJAX Control Toolkit: Conjunto de controle criados pela comunidade para serem utilizados em páginas ASP.NET, maiores informações em http://www.asp.net/ajax/

Para utilizar os “AJAX Server Controls” em uma página ASP.NET e prover atualizações parciais da página, tornando a interface mais amigável e dando a sensação ao visitante do site que a página não “piscou” é necessário conhecer basicamente os seguintes controles:

1.       ScriptManager : que gerencia todas as requisições feitas pela página, cada página pode possuir apenas um script manager, ele é obrigatório para que os demais controles do ajax funcionem.

clip_image002[4]

Figure 1 – Controle Script Manager

2.       Update Panel: área de atualização da página, ou seja, nela devemos colocar os controles os quais devem ser atualizados sem que o “postback” seja visível para o usuário que está acessando a página. É importante lembrar que mesmo que o usuário não perceba o “postback” esse evento ocorre, porém de forma assíncrona, por “debaixo dos panos”.

O “Update Panel” nada mais é do que um “container” para um ou mais controles que deverão ser atualizados quando ocorre o postback. Em uma página ASP.NET podemos ter mais que um “Update Panel” agrupando seções diferentes da minha página, conforme visto na figura 2.

clip_image004[4]

Figure 2 – Como configurar o Update Panel

 

Ao utilizar um “Update Panel” é necessário configurar uma importante propriedade chamada de UpdateMode, essa pode assumir dois valores:

ü  Always: os controles sempre serão atualizados em qualquer “postback” que ocorra na página.

ü  Condicional: os controles serão atualizados somente se houver a chamada explícita ao método “Update” do lado servidor ou disparo de alguma “trigger”. Uma outra possibilidade é quando são utilizados “Update Panels” aninhados, sendo assim se o “Update Panel” pai for atualizado seus filhos também serão.

clip_image006[4]

Figure 3 – Propriedade Update Mode

Outro elemento desse controle são as “Triggers”, são elas que irão disparar a atualização dos controles incluídos dentro do “Update Panel”, geralmente um botão que ao ser clicado executa algum procedimento do lado servidor e atualiza os controles existentes no “Update Panel”. Essa atualização pode ser feita de modo síncrono usando o “PostBackTrigger” ou assíncrono com o “AsyncPostBackTrigger”, conforme ilustrado na figura 4.

clip_image008[4]

Figure 4 – Definição dos Gatilhos  de Atualização

 

3.       Update Progress é um controle utilizado para mostrar ao usuário uma mensagem durante o processando de uma chamada assíncrona, geralmente uma imagem ou texto mostrando “Aguarde Carregando”.

O “Update Progress” pode ser associado a um único “Update Panel”, quando definimos a propriedade “AssociatedUpdatePanelID”, ou caso contrário ele servirá para qualquer chamada de qualquer Update Panel. Uma dica é adicionar esse controle à “Master Page” do site de modo que qualquer “Update Panel” de qualquer página utilize esse Update Progress.

clip_image010[4]

Figure 5 – Configuração do Update Progress

 

Projeto de Exemplo

Como exemplo, será criada uma página que exibe um grid com os nomes dos alunos de uma escola, nessa tela é possível mudar o título do grid e pesquisar pelo nome dos alunos de forma “Assíncrona”.

clip_image012[4]

Figure 6- Página de Exemplo

Para criar os botões e controles de filtro será utilizado o código mostrado na figura 7.

clip_image014[4]

Figure 7- Controles da Página

Será necessário utilizar dois “Update Panel” um para conter o grid e outro para o label do título. Nas figuras 8 e 9 é possível verificar os elementos necessário para implementar esses dois “Update Panel”.

clip_image016[4]

Figure 8- Update Panel para o Título

clip_image018[4]

Figure 9 – Update Panel para o Grid

Os botões de “Alterar” e “Pesquisar” são os “Gatilhos” que disparam as atualizações do label e do Grid respectivamente, essa amarração é feita através do elemento “Triggers” do “Update Panel

clip_image020[4]

Figure 10 – Amarração dos Controles de Ação ao Update Panel

Note que os dois “Update Panel” estão com a propriedade UpdateModepara Conditional, deste modo, se a ação disparada pelo botão “btnPesquisar” modificar algum campo do “Update Panel” de Alunos “updGridAlunos”, os controles deste não seriam atualizados, pois o botão “btnPesquisar” está vinculado apenas a trigger do “UpdatePanel” “updTeste”.

Para simular a demora na execução do método disparado pelos botões foi adicionado um delay de 2s, assim é possível verificar o Update Progress em funcionamento, conforme visto na figura 11

clip_image022[4]

Figure 11 – Mensagem exibida quando alguma ação é disparada.

 

Para implementar esse exemplo foram criados os seguintes elementos:

ü  Estrutura.Master: master page cujo código pode ser visto na figura 12

ü  AtualizacaoParcial.aspx : webform que utiliza a master page “Estrutura.Master”, os códigos dessa página podem ser vistos nas figura 13 e 14.

<%@MasterLanguage=”C#”AutoEventWireup=”true”CodeBehind=”Estrutura.master.cs”Inherits=”WebAjax.Estrutura”%>

 

<!DOCTYPEhtmlPUBLIC“-//W3C//DTD XHTML 1.0 Transitional//EN”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

 

<htmlxmlns=”http://www.w3.org/1999/xhtml”&gt;

<headrunat=”server”>

    <title>

    <asp:ContentPlaceHolderID=”titulo”runat=”server”></asp:ContentPlaceHolder>

    </title>

</head>

<body>

    <formid=”form1″runat=”server”>

     <asp:ScriptManagerID=”ScriptManager1″runat=”server”></asp:ScriptManager>

     <asp:UpdateProgressID=”upgGeral”runat=”server”>

        <ProgressTemplate>

            <divstyle=”font-size: large”>Processando …</div>

        </ProgressTemplate>

    </asp:UpdateProgress>

    <div>

        <asp:ContentPlaceHolderID=”conteudo”runat=”server”>

        </asp:ContentPlaceHolder>

    </div>

    </form>

</body>

</html>

 

 

Figure 12 – Código da Master Page

<%@PageTitle=””Language=”C#”MasterPageFile=”~/Estrutura.Master”AutoEventWireup=”true”CodeBehind=”AtualizacaoParcial.aspx.cs”Inherits=”WebAjax.AtualizacaoParcial”%>

<asp:ContentID=”Content1″ContentPlaceHolderID=”titulo”runat=”server”>

Atualização Parcial

</asp:Content>

<asp:ContentID=”Content2″ContentPlaceHolderID=”conteudo”runat=”server”>

    <table>

        <tr>

            <td>Título do Gird</td>

            <td><asp:TextBoxID=”txtTitulo”runat=”server”></asp:TextBox></td>

            <td></td>

            <td><asp:ButtonID=”btnAlterar”runat=”server”Text=”Alterar !”

            onclick=”btnAlterar_Click”

                    /></td>

        </tr>

        <tr>

            <td>Pesquisa</td>

            <td><asp:TextBoxID=”txtNome”runat=”server”></asp:TextBox></td>

            <td></td>

            <td><asp:ButtonID=”btnPesquisar”runat=”server”Text=”Pesquisar !”

                    onclick=”btnPesquisar_Click”/></td>

        </tr>

    </table>

 

    <asp:UpdatePanelID=”updTeste”UpdateMode=”Conditional”runat=”server”>

        <Triggers>

            <asp:AsyncPostBackTriggerControlID=”btnAlterar”  />

        </Triggers>

        <ContentTemplate>

            <asp:LabelID=”lblTitulo”BackColor=”Azure”runat=”server”Text=”Título do Grid”>

            </asp:Label>

        </ContentTemplate>

    </asp:UpdatePanel>

    <asp:UpdatePanelID=”updGridAlunos”UpdateMode=”Conditional”runat=”server”>

        <Triggers>

            <asp:AsyncPostBackTriggerControlID=”btnPesquisar”  />

        </Triggers>

        <ContentTemplate>

            <asp:GridViewID=”grdAlunos”runat=”server”CellPadding=”4″ForeColor=”#333333″

                GridLines=”None”>

                <AlternatingRowStyleBackColor=”White”/>

                <EditRowStyleBackColor=”#7C6F57″/>

                <FooterStyleBackColor=”#1C5E55″Font-Bold=”True”ForeColor=”White”/>

                <HeaderStyleBackColor=”#1C5E55″Font-Bold=”True”ForeColor=”White”/>

                <PagerStyleBackColor=”#666666″ForeColor=”White”HorizontalAlign=”Center”/>

                <RowStyleBackColor=”#E3EAEB”/>

                <SelectedRowStyleBackColor=”#C5BBAF”Font-Bold=”True”ForeColor=”#333333″/>

                <SortedAscendingCellStyleBackColor=”#F8FAFA”/>

                <SortedAscendingHeaderStyleBackColor=”#246B61″/>

                <SortedDescendingCellStyleBackColor=”#D4DFE1″/>

                <SortedDescendingHeaderStyleBackColor=”#15524A”/>

            </asp:GridView>

        </ContentTemplate>

    </asp:UpdatePanel>

</asp:Content>

 

 

 

Figure 13 – Código da página “ASPX”

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using WebAjax.VOL;

 

namespace WebAjax

{

    publicpartialclassAtualizacaoParcial : System.Web.UI.Page

    {

        protectedvoid Page_Load(object sender, EventArgs e)

        {

            if (!Page.IsPostBack)

            {

                List<Aluno> colAlunos = this.CriarAlunos();

                this.PopularGrid(colAlunos);

            }

        }

 

 

        privateList<Aluno> CriarAlunos()

        {

 

            List<Aluno> colAlunos = newList<Aluno>();

            colAlunos.Add(newAluno() { Nome = “Renato”, Matricula = 12345, DataNascimento = Convert.ToDateTime(“12/08/1982”) });

            colAlunos.Add(newAluno() { Nome = “Vanessa”, Matricula = 123456, DataNascimento = Convert.ToDateTime(“11/06/1981”) });

            colAlunos.Add(newAluno() { Nome = “Marcos”, Matricula = 23467, DataNascimento = Convert.ToDateTime(“06/12/1955”) });

            colAlunos.Add(newAluno() { Nome = “Solange”, Matricula = 123558, DataNascimento = Convert.ToDateTime(“16/08/1956”) });

 

            return colAlunos;

        }

 

 

        privatevoid PopularGrid(List<Aluno> colAlunos)

        {

            this.grdAlunos.DataSource = colAlunos;

            this.grdAlunos.DataBind();

        }

 

        protectedvoid btnPesquisar_Click(object sender, EventArgs e)

        {

            System.Threading.Thread.Sleep(2000);

            string strArgumento = this.txtNome.Text;

 

            List<Aluno> colAlunos = this.CriarAlunos();

 

            List<Aluno> colPesquisa = (from aluno in colAlunos

                                       where aluno.Nome == strArgumento

                                       select aluno).ToList();

 

            this.PopularGrid(colPesquisa);

 

           

        }

 

        protectedvoid btnAlterar_Click(object sender, EventArgs e)

        {

            System.Threading.Thread.Sleep(2000);

            this.lblTitulo.Text = this.txtTitulo.Text;

        }

    }

}

 

Figure 14 – Código da página .CS

 

Bom, esses são os conceitos básicos para utilização de “AJAX Server Controls”.

 

Referências:

http://www.asp.net/ajax

http://www.jquery.com

http://msdn.microsoft.com/pt-br/library/ee341002.aspx

 

 

 

Anúncios
Categorias:Ajax
  1. Nenhum comentário ainda.
  1. No trackbacks yet.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: