Arquivo

Archive for the ‘ASP.NET’ Category

Como utilizar uma Tree View no ASP.NET

7 de setembro de 2011 Deixe um comentário

Um assunto que gera muitas dúvidas é como criar um Menu hierárquico em seu WebSite, alimentando esse Menu dinamicamente de acordo com o Perfil do Usuário que está acessando o WebSite. Para realizar essa função de uma forma muito simples é necessário utilizar basicamente dois elementos:

  • Componente TreeView do ASP.NET
  • Recursividade

Incluindo uma TreeView na página ASPX

Para incluir uma TreeView na sua página basta arrastar o componente existente na toolbox, ele está localizado no Menu “Navigation”, conforme visto na Figura 1.

 

image

Figura 1

 

Após arrastá-la para a página teremos o código e a visualização conforme vistos na figura 2

image

image

Figura 2

 

A TreeView é composta pelos “Nodes” um Node é representado pela classe TreeNode, a idéia básica da construção de uma árvore é termos um node raiz e suas folhas, sendo que cada uma das folhas pode ter suas folhas e assim por diante, criando uma estrutura multi nível.

 

Recursividade

 

Uma função é chamada de Recursiva quando para a sua solução ela precisa recorrer a ela mesma, ou seja, uma função Recursiva em algum momento de sua execução fará uma chamada para ela mesma. É importante ter bastante cuidado ao criar uma função recursiva para que ela não fique em “loop” infinito.

No caso de montar um menu hierárquivo a melhor forma de “popular” esse menu é através de uma função recursiva, pois como cada item do menu pode ter sub-itens sem limitação, após a função criar o item ela pode chamar ela mesma para criar os filhos desse item e assim por diante.

 

Preenchendo a Tree View

No exemplo desse Artigo temos uma classe chamada “Item” que representa os dados de um item do Menu, esses dados poderiam ser obtidos por exemplo de uma tabela de Funcionalidades x Perfil de um usuário de um Sistema. As propriedades dessa classe são:

  • Nome: Nome do Item;
  • Url: Endereço para acessar a funcionalidade;
  • Id: Código único para o item;
  • IdPai: Código do Item pai.

O código C# da classe é mostrado na figura 3.

Figura 3
  1. /// <summary>
  2.     /// Classe que representa um item do Menu
  3.     /// </summary>
  4.     public class Item
  5.     {
  6.         public string Nome { get; set; }
  7.         public string Url { get; set; }
  8.         public int Id { get; set; }
  9.         public int? IdPai { get; set; }
  10.     }

 

Para esse exemplo foram criados elementos “fictícios” para o menu e estes armazenados em uma coleção do tipo Item chamada de colItem, conforme a figura 4.

 

Figura 4
  1. public List<Item> colItem = new List<Item>();
  2.  
  3.  
  4.      /// <summary>
  5.      /// Simula alguns itens da árvore de Menus
  6.      /// </summary>
  7.      private void CarregarItens()
  8.      {
  9.  
  10.          Item pai = new Item();
  11.          pai.Nome = "ROOT";
  12.          pai.Id = 0;
  13.          pai.Url = "";
  14.          pai.IdPai = null;
  15.  
  16.          Item filho1 = new Item();
  17.          filho1.Nome = "FILHO 1";
  18.          filho1.Id = 1;
  19.          filho1.Url = "http://url1&quot;;
  20.          filho1.IdPai = 0;
  21.  
  22.          Item filho2 = new Item();
  23.          filho2.Nome = "FILHO 2";
  24.          filho2.Id = 2;
  25.          filho2.Url = "";
  26.          filho2.IdPai = 0;
  27.  
  28.          Item filho21 = new Item();
  29.          filho21.Nome = "FILHO 21";
  30.          filho21.Id = 21;
  31.          filho21.Url = "http://url21&quot;;
  32.          filho21.IdPai = 2;
  33.  
  34.  
  35.          Item filho22 = new Item();
  36.          filho22.Nome = "FILHO 22";
  37.          filho22.Id = 22;
  38.          filho22.Url = "http://url22&quot;;
  39.          filho22.IdPai = 2;
  40.  
  41.  
  42.          this.colItem.Add(pai);
  43.          this.colItem.Add(filho1);
  44.          this.colItem.Add(filho2);
  45.          this.colItem.Add(filho21);
  46.          this.colItem.Add(filho22);
  47.  
  48.      }

 

Na figura 5 é mostrado o código fonte da função recursiva “CarregarTreeView”, responsável por gerar os elementos “multi-nível” do Menu. É importante observar que essa função recebe como parâmetro um item, que é o itemPai e seu respectivo Node Criado.

 

Figura 5
  1. /// <summary>
  2. /// Função Recursiva para gerar um Menu Hierárquico
  3. /// </summary>
  4. /// <param name="pai"></param>
  5. /// <param name="nodePai"></param>
  6. private void CarregarTreeView(Item pai, TreeNode nodePai)
  7. {
  8.     // Recupera os itens do Menu que são do ITEM (pai) passado como parâmetro para a função
  9.     List<Item> temp = (from x in colItem
  10.                        where x.IdPai == pai.Id
  11.                        select x).ToList();
  12.  
  13.     // Para cada filho encontrado
  14.     foreach (Item ite in temp)
  15.     {
  16.         // Cria um novo "node" para o menu atribuindo nome, código e url
  17.         TreeNode node = new TreeNode(ite.Nome, ite.Id.ToString(), string.Empty, ite.Url, string.Empty);
  18.         // se o item for pai, ou seja não tem url de navegação
  19.         // configura para que ao clicar no seu nome abra os seus filhos
  20.         if (node.NavigateUrl == string.Empty)
  21.         {
  22.             node.SelectAction = TreeNodeSelectAction.Expand;
  23.         }
  24.         // Chama a função recursivamente para o novo node criado.
  25.         this.CarregarTreeView(ite,node);
  26.  
  27.         // Adiciona ao node pai o seu filho
  28.         nodePai.ChildNodes.Add(node);
  29.     }
  30. }

 

Para inicializar a recursão foi criada a função InicializarMenu que faz o carregamento dos itens “fakes”  e cria o primeiro elemento do Menu, o item root que dará início à recursão.

 

Figura 6
  1. /// <summary>
  2.      /// Utilizado para criar o elemento "root" do menu e
  3.      /// inicializar a recursão.
  4.      /// </summary>
  5.      private void InicializarMenu()
  6.      {
  7.          this.CarregarItens();
  8.  
  9.          // Gera o Primeiro item, o Pai do TreeView
  10.          // no caso do exemplo o item pai é o de código 0
  11.          var itemPai = (from x in colItem
  12.                         where x.Id == 0
  13.                         select x).ToList();
  14.  
  15.          Item ite = itemPai[0] as Item;
  16.  
  17.          // Cria o node para o PAI
  18.          TreeNode node = new TreeNode(ite.Nome, ite.Id.ToString(), string.Empty, ite.Url, string.Empty);
  19.  
  20.          // Define que ao clicar no nome do NODE ele mostre os elementos filhos
  21.          node.SelectAction = TreeNodeSelectAction.Expand;
  22.  
  23.          // Inicializa a recursão com o item pai e seu node.
  24.          this.CarregarTreeView(ite, node);
  25.  
  26.          // o parâmetro 0 deixa a treeview recolhida
  27.          TreeView1.ExpandDepth = 0;
  28.          // Adiciona o node e seus filhos à treew view
  29.          TreeView1.Nodes.Add(node);
  30.          // popula a tree view
  31.          TreeView1.DataBind();
  32.  
  33.      }

 

A classe TreeNode tem algumas propriedades importantes:

  • ChildNodes: coleção com os filhos do Node;
  • DataItem: Permite guardar algum valor para ser associado ao item;
  • Depth: nível do node no Menu;
  • Expanded: se true força o node a ser carregado de modo aberto;
  • NavigateUrl: Url que será acessada ao clicar no Node;
  • Parent: Obtem o Node pai do deste;
  • SelectAction: Indica a ação que será feita ao clicar no item, os valores possível são os definidos na enumração TreeNodeSelectAction;
  • Text: Texto que será exibido ;
  • Target: utilizado para abrir a página definida no NavigateUrl em um frame específico;
  • ToolTip: Dica do Node;
  • Value: valor do tipo string que pode ser usado para armazenar alguma informação adicional

A enumeração TreeNodeSelectAction irá definir a ação realizada ao clicar em algum item do menu, são possíveis os seguintes valores:

  • Expand: ao clicar serão exibidos os itens filhos e o evento TreeNodeExpanded é disparado
  • None: nenhum ação á realizada;
  • Select: navega para o item definido na NavigateUrl e o evento SelectedNodeChanged é disparado.
  • SelectExpand: executa os procedimentos descritos em Expand e Select.

Nas figuras 7 e 8 são mostrados os códigos necessários para testar o exemplo.

 

Figura 7
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using System.IO;
  8.  
  9. namespace WebTreeView
  10. {
  11.     /// <summary>
  12.     /// Classe que representa um item do Menu
  13.     /// </summary>
  14.     public class Item
  15.     {
  16.         public string Nome { get; set; }
  17.         public string Url { get; set; }
  18.         public int Id { get; set; }
  19.         public int? IdPai { get; set; }
  20.     }
  21.  
  22.     public partial class Tree : System.Web.UI.Page
  23.     {
  24.  
  25.         public List<Item> colItem = new List<Item>();
  26.  
  27.  
  28.         /// <summary>
  29.         /// Simula alguns itens da árvore de Menus
  30.         /// </summary>
  31.         private void CarregarItens()
  32.         {
  33.  
  34.             Item pai = new Item();
  35.             pai.Nome = "ROOT";
  36.             pai.Id = 0;
  37.             pai.Url = "";
  38.             pai.IdPai = null;
  39.  
  40.             Item filho1 = new Item();
  41.             filho1.Nome = "FILHO 1";
  42.             filho1.Id = 1;
  43.             filho1.Url = "http://url1&quot;;
  44.             filho1.IdPai = 0;
  45.  
  46.             Item filho2 = new Item();
  47.             filho2.Nome = "FILHO 2";
  48.             filho2.Id = 2;
  49.             filho2.Url = "";
  50.             filho2.IdPai = 0;
  51.  
  52.             Item filho21 = new Item();
  53.             filho21.Nome = "FILHO 21";
  54.             filho21.Id = 21;
  55.             filho21.Url = "http://url21&quot;;
  56.             filho21.IdPai = 2;
  57.  
  58.  
  59.             Item filho22 = new Item();
  60.             filho22.Nome = "FILHO 22";
  61.             filho22.Id = 22;
  62.             filho22.Url = "http://url22&quot;;
  63.             filho22.IdPai = 2;
  64.  
  65.  
  66.             this.colItem.Add(pai);
  67.             this.colItem.Add(filho1);
  68.             this.colItem.Add(filho2);
  69.             this.colItem.Add(filho21);
  70.             this.colItem.Add(filho22);
  71.  
  72.         }
  73.  
  74.         protected void Page_Load(object sender, EventArgs e)
  75.         {
  76.             if (!Page.IsPostBack)
  77.             {
  78.                 this.InicializarMenu();
  79.             }
  80.         }
  81.  
  82.  
  83.         /// <summary>
  84.         /// Utilizado para criar o elemento "root" do menu e
  85.         /// inicializar a recursão.
  86.         /// </summary>
  87.         private void InicializarMenu()
  88.         {
  89.             this.CarregarItens();
  90.  
  91.             // Gera o Primeiro item, o Pai do TreeView
  92.             // no caso do exemplo o item pai é o de código 0
  93.             var itemPai = (from x in colItem
  94.                            where x.Id == 0
  95.                            select x).ToList();
  96.  
  97.             Item ite = itemPai[0] as Item;
  98.  
  99.             // Cria o node para o PAI
  100.             TreeNode node = new TreeNode(ite.Nome, ite.Id.ToString(), string.Empty, ite.Url, string.Empty);
  101.  
  102.             // Define que ao clicar no nome do NODE ele mostre os elementos filhos
  103.             node.SelectAction = TreeNodeSelectAction.Expand;
  104.  
  105.             // Inicializa a recursão com o item pai e seu node.
  106.             this.CarregarTreeView(ite, node);
  107.  
  108.             // o parâmetro 0 deixa a treeview recolhida
  109.             TreeView1.ExpandDepth = 0;
  110.             // Adiciona o node e seus filhos à treew view
  111.             TreeView1.Nodes.Add(node);
  112.             // popula a tree view
  113.             TreeView1.DataBind();
  114.  
  115.         }
  116.  
  117.  
  118.         /// <summary>
  119.         /// Função Recursiva para gerar um Menu Hierárquico
  120.         /// </summary>
  121.         /// <param name="pai"></param>
  122.         /// <param name="nodePai"></param>
  123.         private void CarregarTreeView(Item pai, TreeNode nodePai)
  124.         {
  125.             // Recupera os itens do Menu que são do ITEM (pai) passado como parâmetro para a função
  126.             List<Item> temp = (from x in colItem
  127.                                where x.IdPai == pai.Id
  128.                                select x).ToList();
  129.  
  130.             // Para cada filho encontrado
  131.             foreach (Item ite in temp)
  132.             {
  133.                 // Cria um novo "node" para o menu atribuindo nome, código e url
  134.                 TreeNode node = new TreeNode(ite.Nome, ite.Id.ToString(), string.Empty, ite.Url, string.Empty);
  135.                 // se o item for pai, ou seja não tem url de navegação
  136.                 // configura para que ao clicar no seu nome abra os seus filhos
  137.                 if (node.NavigateUrl == string.Empty)
  138.                 {
  139.                     node.SelectAction = TreeNodeSelectAction.Expand;
  140.                 }
  141.                 // Chama a função recursivamente para o novo node criado.
  142.                 this.CarregarTreeView(ite, node);
  143.  
  144.                 // Adiciona ao node pai o seu filho
  145.                 nodePai.ChildNodes.Add(node);
  146.             }
  147.         }
  148.     }
  149. }

Código Fonte da página TreeView.aspx.cs

 

 

Figura 8
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Tree.aspx.cs" Inherits="WebTreeView.Tree" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml"&gt;
  6. <head runat="server">
  7.     <title></title>
  8. </head>
  9. <body>
  10.     <form id="form1" runat="server">
  11.     <div>
  12.         <asp:TreeView ID="TreeView1" runat="server">
  13.     </asp:TreeView>
  14.     </div>
  15.     </form>
  16.  
  17. </body>
  18. </html>

Código Fonte da página TreeView.aspx

A partir desse artigo ficou claro que criar um menu multi-nível não é tão complicado como parece, desde que seja utilizado o conceito de Recursividade.

Até o próximo artigo.

Referências

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

Categorias:ASP.NET

Para que servem os “AJAX Server Controls” ?

28 de agosto de 2011 Deixe um comentário

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

 

 

 

Categorias:Ajax