Arquivo

Archive for the ‘.NET Framework’ 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

O que é LINQ ?

4 de setembro de 2011 Deixe um comentário

Microsoft Language Integrated Query é uma extensão do .NET Framework e foi introduzida na versão 3.5, seu principal objetivo é diminiur o “GAP” que existe entre objetos e dados. A princípio o LINQ permite realizar consultas (Queries) com objetos, com ele é possível por exemplo fazer uma pesquisa em uma coleção de um objetos por um determinado parâmetro, de um modo parecido com o que utilizamos para fazer consultas a tabelas de banco de dados com a linguagem SQL (Structured Query Language).

Quantas vezes você não precisou recuperar apenas alguns elementos de uma coleção e para isso você foi obrigado a fazer um foreach por todos os seus elementos, e dentro dele fazer as decisões para escolher qual você precisa ? Usando o linq isso muda de figura. Supondo que vamos utilizar uma coleção de alunos e queremos saber quais alunos desta coleção nasceram antes de 1991, no modo tradicional é necessário , por exemplo, fazer o código mostrado na figura 1.

Figura 1
  1. private List<Aluno> RecuperarAlunosTradicional()
  2.       {
  3.           // Recuperar os alunos que tenham nascido antes de 1991
  4.           DateTime dtLimite = Convert.ToDateTime("01/01/1991");
  5.           List<Aluno> colAlunosRetorno = new List<Aluno>();
  6.           foreach (Aluno al in colAlunos)
  7.           {
  8.               if(al.DataNascimento < dtLimite)
  9.               {
  10.                   colAlunosRetorno.Add(al);
  11.               }
  12.           }
  13.           return colAlunosRetorno;
  14.       }

 

Agora após conhecer o linq é possível resolver o mesmo problema com o código da figura 2.

 

Figura 2
  1. private List<Aluno> RecuperarAlunosLinq()
  2.         {
  3.             // Recuperar os alunos que tenham nascido antes de 1991
  4.             DateTime dtLimite = Convert.ToDateTime("01/01/1991");
  5.             var colAlunosRetorno = from al in colAlunos
  6.                                    where al.DataNascimento < dtLimite
  7.                                    select al;
  8.  
  9.             return colAlunosRetorno.ToList();
  10.         }

Basicamente objetos que suportam as interface IEnumerable, IEnumerable<T> como DataSet, List<>, Array permitem que sejam feitas “Queries” nos seus objetos.

Outros exemplo interessantes do LINQ são :

  • Count()

    Retorna a quantidade de elementos de uma coleção.

    1. int qtdAlunos = colAlunosRetorno.Count();

  • First()

    Retorna o primeiro elemento de coleção

    1. Aluno primeiroAluno = colAlunosRetorno.First();

  • Last()

    Retorna o último elemento de uma coleção

    1. Aluno ultimoAluno = colAlunosRetorno.Last();

    O LINQ pode ser com diversas fontes de dados:

 

  • LINQ x SQL

    Permite conectar a uma base SQL e executar instruções de SELECT, INSERT, UPDATE ou DELETE

  • LINQ x DataSet

    Permite efetuar consultas em objetos do tipo DataSEt que estão em memória, isso simplifica o modo de trabnalhar com dados em “Cache”

  • LINQ x Entities

    Efetua consultas com modelos criados com o Entity Framework (EF)

  • LINQ x XML

    Permite manipular diretamente estruturas em XML, criá-las, adicionar dados ou transformar um XML.

  • LINQ x Object

    Ao meu ver o melhor do LINQ, pois é possível efetuar diversas consultas em objetos existentes no nosso programa, comparar Coleções e encontrar os elementos diferentes, filtrá-las, o trabalho que antes era tedioso, torna-se muito simples com o LINQ

    Essa é a idéia geral do LINQ em outros posts vamos falar mais especificamente em como tirar proveito de todo esse potencial.

      Referências

      Linq
    Categorias:LINQ

    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