1. Skip to Menu
  2. Skip to Content
  3. Skip to Footer

Exportação de dados do componente GridView

 

Softwares Utilizados

Visual Studio 2012 Express para Web
Download: http://www.microsoft.com/visualstudio/ptb/downloads#d-2012-express

DLL ItextSharp
Download: http://sourceforge.net/projects/itextsharp

SqlServer Express
Download: http://www.microsoft.com/pt-br/download/details.aspx?id=29062

Proposta:

Gerar exportação do componente GridView para formatos comuns sem a necessidade de desenvolvimento de Reports e outras técnicas avançadas

Introdução

Todos que conhecem Asp.Net conhecem o componente GridView, correto? Pois é um dos componentes mais utilizados pela sua facilidade de implementação; porém um dos pontos fracos do componente é não ter como exportar os dados que estão sendo visualizados. Hoje veremos a exportação dos dados do componente GridView para os seguintes formatos: doc,xls,pdf e csv.

Definição dos formatos

Doc: Documento de texto padrão do aplicativo Ms-Word.

Xls: Planilha de dados padrão do MS-Excel.

Pdf: (Portable Document Format) é um formato de arquivo, desenvolvido pela Adobe Systems em 1993, para representar documentos de maneira independente do aplicativo, do hardware e do sistema operacional usados para criá-los.

Csv: Arquivo de texto simples com os valores separados por ponto e vírgula (;).

O Projeto

O primeiro passo é criarmos um projeto web com uma GridView e os botões que irão gerar a exportação pra os formatos específicos. Neste exemplo utilizaremos o SqlServer onde estão os dados de exemplo que irão popular a GridView; utilizaremos também a DLL ItextSharp para gerarmos o PDF.

Crie um novo Projeto Web e desenhe uma tela como mostra a imagem abaixo:

Imagem 1 - Modelo de Tela

A tela é constituída de um GridView, um DataSource e quatro Buttons, um para cada formato de exportação.

Antes de iniciarmos as exportações construiremos um método que ira pegar os dados do GridView e ira transformá-los em HTML básico, quanto mais avançado o seu conhecimento em HTML e CSS melhor será o entendimento do código.

Abaixo código do método de geração do HTML, caso você não tenha familiaridade com tabelas em HTML sugiro que leia o artigo http://www.desenvolvefacil.com.br/aulas/tutoriais/118-tabelas-em-html.html ou outro material sobre o conteúdo.

Code Snippet
  1. privateStringBuilder MontarHtmlTabela()
  2.         {
  3.             //remove a páginação da gridview para que todos os dados possam ser visualizados
  4.             ClientesGridView.AllowPaging = false;
  5.             ClientesGridView.DataBind();
  6.  
  7.             //montando o html com os dados gridview
  8.             //esta é uma técnica de exportação antiga utilizada em varias linguages web como asp, php, java entre outras
  9.             StringBuilder sb = newStringBuilder();
  10.  
  11.             sb.AppendLine("<table border='1'>");
  12.  
  13.             //Escrevendo o cabeçalho da tabela
  14.             sb.AppendLine("<tr>");
  15.  
  16.             //busca todos titulos das colunas
  17.             foreach (DataControlField collum in ClientesGridView.Columns)
  18.             {
  19.                 sb.AppendLine("<td bgcolor='#507CD1' style='color:White;font-weight:bold;'>");
  20.                 sb.AppendLine(collum.HeaderText);
  21.                 sb.AppendLine("</td>");
  22.             }
  23.  
  24.             sb.AppendLine("</tr>");
  25.  
  26.  
  27.             //busca todo os dados
  28.             foreach (GridViewRow linha in ClientesGridView.Rows)
  29.             {
  30.                 //variavel que irá definir a cor de fundo da linha
  31.                 string CorFundo = string.Empty;
  32.  
  33.                 //cor padrão para linhas pares
  34.                 if (linha.RowIndex % 2 == 0)
  35.                 {
  36.                     CorFundo = "#EFF3FB";
  37.                 }
  38.                 //cor padrão para linhas impares
  39.                 else
  40.                 {
  41.                     CorFundo = "#FFFFFF";
  42.                 }
  43.  
  44.  
  45.                 //abertura de um nova linha
  46.                 sb.AppendLine("<tr>");
  47.  
  48.                 //buscando os dados da linha
  49.                 foreach (TableCell cell in linha.Cells)
  50.                 {
  51.                     sb.AppendLine("<td bgcolor='" + CorFundo + "'>");
  52.                     sb.AppendLine("<font face='Arial, Helvetica, sans-serif' size='8pt' color='#000000'>");
  53.                     sb.AppendLine(cell.Text);
  54.                     sb.AppendLine("</font>");
  55.                     sb.AppendLine("</td>");
  56.                 }
  57.  
  58.                 sb.AppendLine("</tr>");
  59.             }
  60.  
  61.             sb.AppendLine("</table>");
  62.  
  63.             ClientesGridView.AllowPaging = true;
  64.             ClientesGridView.DataBind();
  65.  
  66.             return sb;
  67.         }

Agora que já temos o código básico precisamos utilizá-lo para gerar os arquivos de exportação. Os mesmo serão gerados ao clicar nos botões de cada formato, o primeiro a ser definido será o formato Excel (xls).

Abaixo segue o código para exportação xls:

Code Snippet
  1. protectedvoid XlsButton_Click(object sender, EventArgs e)
  2.         {
  3.             Response.Clear();
  4.             Response.Buffer = true;
  5.  
  6.             //define a escrita como anexo
  7.             //este procedimento evita que o navegador tente abrir o arquivo diretamente
  8.             Response.AddHeader("content-disposition", "attachment;filename=GridViewExportFacil.xls");
  9.             Response.Charset = "";
  10.             //define o tipo do conteudo que esta sendo escrito
  11.             Response.ContentType = "application/vnd.ms-excel";
  12.  
  13.             //formata os números para string
  14.             string style = @"<style> .textmode { mso-number-format:\@; } </style>";
  15.             Response.Write(style);
  16.  
  17.             //escreve o conteúdo no navegador
  18.             Response.Output.Write(MontarHtmlTabela());
  19.             Response.Flush();
  20.             Response.End();
  21.  
  22.         }

Agora vamos gerar para o formato Word (doc).

Abaixo segue o código para exportação doc:

Code Snippet
  1. protectedvoid DocButton_Click(object sender, EventArgs e)
  2.         {
  3.             Response.Clear();
  4.             Response.Buffer = true;
  5.  
  6.             //define a escrita como anexo
  7.             //este procedimento evita que o navegador tente abrir o arquivo diretamente
  8.             Response.AddHeader("content-disposition", "attachment;filename=GridViewExportFacil.doc");
  9.             Response.Charset = "";
  10.             Response.ContentType = "application/vnd.ms-word ";
  11.  
  12.             //escreve o conteúdo no navegador
  13.             Response.Output.Write(MontarHtmlTabela());
  14.  
  15.             Response.Flush();
  16.             Response.End();
  17.  
  18.         }

Agora vamos gerar para o formato Pdf.

Abaixo segue o código para exportação pdf:

Code Snippet
  1. protectedvoid PdfButton_Click(object sender, EventArgs e)
  2.         {
  3.             Response.Clear();
  4.             Response.Buffer = true;
  5.  
  6.             //define a escrita como anexo
  7.             //este procedimento evita que o navegador tente abrir o arquivo diretamente
  8.             Response.ContentType = "application/pdf";
  9.             Response.AddHeader("content-disposition", "attachment;filename=GridViewExportFacil.pdf");
  10.  
  11.             Response.Cache.SetCacheability(HttpCacheability.NoCache);
  12.  
  13.             //variavel que sera utilizada na escrita do PDF
  14.             StringWriter sw = newStringWriter(MontarHtmlTabela());
  15.             HtmlTextWriter hw = newHtmlTextWriter(sw);
  16.  
  17.             StringReader sr = newStringReader(sw.ToString());
  18.  
  19.             //Definição do tamanho do PDF
  20.             Document pdfDoc = newDocument(PageSize.A4, 10f, 10f, 10f, 0f);
  21.  
  22.             //variavel que irá converter o Html
  23.             HTMLWorker htmlparser = newHTMLWorker(pdfDoc);
  24.  
  25.             //Geração do arquivo
  26.             PdfWriter.GetInstance(pdfDoc, Response.OutputStream);
  27.  
  28.             //abertura do arquivo
  29.             pdfDoc.Open();
  30.  
  31.             //conversao e escrita do conteudo html
  32.             htmlparser.Parse(sr);
  33.             pdfDoc.Close();
  34.  
  35.             //escreve o conteúdo no navegador
  36.             Response.Write(pdfDoc);
  37.             Response.End();
  38.  
  39.         }

E por ultimo vamos gerar a exportação dos dados para o formato Csv.

Abaixo segue o código para exportação csv:

Code Snippet
  1. protectedvoid CsvButton_Click(object sender, EventArgs e)
  2.         {
  3.             Response.Clear();
  4.             Response.Buffer = true;
  5.  
  6.             //define a escrita como anexo
  7.             //este procedimento evita que o navegador tente abrir o arquivo diretamente
  8.             Response.AddHeader("content-disposition", "attachment;filename=GridViewExportFacil.csv");
  9.             Response.Charset = "";
  10.             Response.ContentType = "application/text";
  11.  
  12.             ClientesGridView.AllowPaging = false;
  13.             ClientesGridView.DataBind();
  14.  
  15.             StringBuilder sb = newStringBuilder();
  16.             for (int k = 0; k < ClientesGridView.Columns.Count; k++)
  17.             {
  18.                 //Adicionando texto + separador ;
  19.                 sb.Append(ClientesGridView.Columns[k].HeaderText + ';');
  20.             }
  21.             //Adicionando nova linha
  22.             sb.Append("\r\n");
  23.             for (int i = 0; i < ClientesGridView.Rows.Count; i++)
  24.             {
  25.                 for (int k = 0; k < ClientesGridView.Columns.Count; k++)
  26.                 {
  27.                     //Adicionando texto + separador ;
  28.                     sb.Append(HttpUtility.HtmlDecode(ClientesGridView.Rows[i].Cells[k].Text) + ';');
  29.                 }
  30.                 //Adicionando nova linha
  31.                 sb.Append("\r\n");
  32.             }
  33.             Response.Output.Write(sb.ToString());
  34.             Response.Flush();
  35.             Response.End();
  36.  
  37.             ClientesGridView.AllowPaging = true;
  38.             ClientesGridView.DataBind();
  39.         }

Conclusão:

Vimos que exportar dados de uma GridView não é um bicho de sete cabeça como todo mundo diz, pois com técnicas básicas conseguimos exporta-la para quatro formatos diferentes. Um ponto importante que vimos é que para programação web é essencial o entendimento de Html, Css entre outros conceitos como: DOM, Ajax, Formulários, Tabelas, Etc. Pois pode haver vários momentos que estes conhecimentos básicos poderão ser utilizados para facilitar no desenvolvimento de nossos projetos.

Download do Projeto:

https://docs.google.com/a/desenvolvefacil.com.br/file/d/0B0U2KWicWVidYmt5MDY4TVpjY2s/edit?usp=sharing

Tabelas em HTML

Em construção.

Relógio Digital com Ajax – Asp.Net + C#

 

Softwares Utilizados

Visual Studio 2012 Express para Web
Download: http://www.microsoft.com/visualstudio/ptb/downloads#d-2012-express

Proposta:

Utilizar os conceitos de Ajax dentro da IDE VS2012 para desenvolver um relógio digital.

Introdução

Hoje veremos como utilizar Ajax dentro do Visual Studio com linguagem de programação C#. Mas antes de iniciarmos vamos entender um pouco sobre o que é Ajax.

Definição de Ajax:

“AJAX (acrônimo em língua inglesa de Asynchronous Javascript and XML , em português "Javascript Assíncrono e XML") é o uso metodológico de tecnologias como Javascript e XML, providas por navegadores, para tornar páginas Web mais interativas com o usuário, utilizando-se de solicitações assíncronas de informações. Foi inicialmente desenvolvida pelo estudioso Jessé James Garret e mais tarde por diversas associações. Apesar do nome, a utilização de XML não é obrigatória (JSON é frequentemente utilizado) e as solicitações também não necessitam de ser assíncronas.”

Resumindo:

Em aplicações Desktop sempre que atualizamos um componente; seja o texto, cor ou outra propriedade; a mesma é atualizada somente no componente ou área indicada. Isto já não acontece na Web, pois na web temos o conceito de “POST” que atualiza a página inteira.
O “POST” geralmente deixa o site mais lento por ter que carregar a página inteira a cada requisição, para evitar este tipo de carregamento utilizamos a técnica de Ajax que faz o carregamento localizado evitando que a página inteira recarregue.

O Projeto

O primeiro passo é abrir a IDE Visual Studio e iniciar um novo Projeto Web

Imagem 1-Criando novo projeto

Esolha Asp.NetWebForms Application

Imagem 2-Definição do tipo do novo projeto

Após digitar o nome do Projeto de da Solution clique em “OK”
Neste momento será apresentado o template padrão de novo projeto web

Imagem 3-Template padrão para Asp.net Web Forms

Vamos excluir as informações exemplo da página “Default.aspx”
Agora nosso Código fonte deve estar como na imagem abaixo

Imagem 4-Código Html após remoção do conteúdo exemplo

Vamos adicionar um Label que será o componente responsável por mostrar a hora, lembrando que poderíamos utilizar qualquer outro componente como ex: TextBox, Literal, etc...

Imagem 5-Label Adicionado

Defina a propriedade ID do Label para “RelogioLabel”
Agora para iniciarmos nossos testes vamos utilizar o evento Page_Load da página para setar um valor inicial para a propriedade Text do componente RelogioLabel
Para acessarmos o CodeBehind de nossa página aperte a tecla “F7”


Imagem 6-Linha de código para mostrar a hora atual

No evento Page_Load vamos adicionar a seguinte linha de código
RelogioLabel.Text = DateTime.Now.ToLongTimeString();

Ao executar nosso programa deverá apresentar o seguinte resultado

Imagem 7-Programa em execução

Na propriedade Text do componente RelogioLabel foi setado o valor da hora atual, mas por ser uma  página sem manipulações o valor será carregado uma única vez a cada vez que a página for carregada. Note que ao atualizarmos a página a hora atualiza, mas este tipo de atualização não serve para uma aplicação dinâmica. Enfim concluímos a primeira parte de nosso teste que é mostra a hora atual na propriedade Text do componente RelogioLabel.

Agora precisamos fazer com que o programa atualize a hora sem que haja a necessidade de atualizarmos a página, para isto vamos adicionar um LinkButton  para testarmos.
Definimos então a  propriedade ID do LinkButton para “AtualizarLinkButton”

Imagem 8-LinkButton adicionado

Voltamos para a área de Design e vemos que o LinkButton já aparece.

Imagem 9-Página principal modo Design

Clique duas vezes no LinkButton para criar o evento “Click”

Dentro do evento AtualizarLinkButton_Click vamos colocar o comando que altera a propriedade Text do RelogioLabel para mostrar a hora atual

Imagem 10-Evento AtualizarLinkButton_Click

Como deslocamos o comando, ao executar o programa não ira aparecer a hora, apenas o LinkButton. Ao clicarmos no LinkButton a hora é atualizada.


Imagem 11-Programa em execução

Imagem 12-Programa em execução após clicar no LinkButton

Até aqui tudo bem?
Ate o momento vimos como setar a propriedade para mostrar a hora e como atualizar a hora com um LinkButton; porem isto ainda não satisfaz o nosso objetivo final.
Notamos que ao clicar no LinkButton a página inteira é carregada novamente. Para evitarmos que isto acontece vamos utilizar de técnicas de Ajax para realizamos atualizações localizadas.
E é neste ponto que o Visual Studio e seus componentes levam vantagem sobre outras IDE’s, pois não precisaremos desenvolver uma linha de JavaScript ou de Retorno Xml para que o nosso Ajax funcione; para isto iremos utilizar o componente UpdatePanel que será nossa área de atualização dinâmica.

Vamos adicionar então um UpdatePanel e setar a propriedade ID para “RelogioUpdatePanel”

Imagem 13-Inserção do UpdatePanel

Dentro do nosso UpdatePanel vamos jogar nosso Label que será atualizado dinamicamente.

Imagem 14-UpdatePanel com Label dentro

No Final nosso modo Design deve estar desta forma

Imagem 15-Página em modo Design

Por padrão o UpdatePanel sempre é atualizado, para alterar esta característica vamos mudar a propriedade UpdateMode para  “Conditional”


Imagem 16-Propriedade UpdateMode do UpdatePanel

Como configuramos o componente a atualizar somente em algumas condições vamos definir estas condições; para definir vamos utilizar a propriedade Triggers que irá apontar quando nosso UpdatePanel deve ser acionado.
Para adicionar um novo disparo clique na Propriedade Triggers para abrir a tela de configurações

Imagem 17-Propriedade Triggers do UpdatePanel

Vamos adicionar um novo disparo assíncrono, na propriedade ControlID coloque “AtualizarLinkButton” e na propriedade EventName coloque “Click”

Imagem 18-Tela de disparos configurados

Vamos agora tentar entender o que acabamos de fazer, quando adicionamos um gatilho(trigger) siginifca que aquele determinado gatilho ira atualizar o UpdatePanel. Na definição temos que setar duas propriedades, a primeira é a “ControlID” que indica o ID do componente que será vinculado para disparar o gatilho. A segunda propriedade é a “EventName” que indica qual evento do componente ira disparar o gatilho e atualizar o UpdatePanel.
*Lembrando que se mais de um componente ou evento deve atualizar o UpdatePanel o mesmo devera ser adicionado um a um, haverá casos como exemplo tabelas dinâmicas que necessitarão atualizar o UpdatePanel em vários momentos e ações diferentes.

Note agora que ao executar o programa e clicar no LinkButton é atualizado somente a área do UpdatePanel


Imagem 19-Programa em execução com Ajax disparado pelo LinkButton

Ganhamos em desempenho já que a pagina não é recarregada a cada “click”.
Mas isto ainda não é o suficiente para nosso relógio funcionar perfeitamente, já que para atualizar a hora devemos clicar em atualizar. Pense se não seria interessante que houvesse um processo que executasse e atualizasse nosso UpdatePanel automaticamente.
Para isto precisamos criar um thread que é um processo do sistema que ira executar de tempos em tempos nosso comando, mas calma para tanto iremos utilizar um componente para facilitar a criação deste thread.

Vamos dar seqüência então, vamos adicionar o componente “Timer” que ira criar automaticamente a thread, facilitando nossa programação.

Imagem 20-Timer adicionado

Clique duas vezes em cima do RelogioTime para criarmos o evento  Tick, este evento é referente ao comando que será executado toda vez que a thread for acionada. No nosso caso vamos atualizar o RelogioLabel para mostrar a hora atual.

Imagem 21-Visualização do Timer em modo Design

Imagem 22-Evento Tick do Timer

Não podemos esquecer-nos de alterar a Trigger do nosso UpdatePanel para ser disparado pelo RelogioTimer.

Imagem 23-Reconfiguração do disparo

E por ultimo vamos alterar o tempo que o thread será executado, para isto altere a propriedade “Interval” do RelogioTimer.

Imagem 24-Propriedade Intrval do Timer

Ao executar nosso relógio digital já deve estar funcionando corretamente.

Imagem 25-Programa finalizado em execução

Conclusão:

Vimos que utilizar Ajax dentro do Visual Studio é simples, já que o mesmo não necessita de elaboração de funções complexas em Java script e modelos de retorno XML.
Vimos que a criação de threads é simplificada quando utilizamos o componente Timer onde configuramos seu intervalo de execução e através do evento Tick indicamos quais comandos dever ser executado.

Download do Projeto:

https://docs.google.com/file/d/0B0U2KWicWVidYkc0VVpnRTB3dTQ/edit?usp=sharing