Utilizando JQGrid com WebForms    

Olá pessoal!

Muitas pessoas têm dificuldades de utilizar plugins JQuery com WebForms. Principalmente porque desenvolvedor WebForm muitas vezes sabe usar apenas ServerControls, desconhecendo muitos conceitos básicos de Web em sí. Não é a toa que fiz uma série de post nesse blog mostrando conceitos de Web com WebForms.

Geralmente, quando uma pessoa vê exemplos de JQuery, eles estão em PHP, e a pessoa acredita que não funcionaria com WebForms, ou mesmo que saiba que seja possível, não sabe como adaptar para WebForm. Obs.: Geralmente esse problema não acontece com quem desenvolve com Asp.Net MVC.

Nos últimos post, mostrei alguns conceitos que podem ajudar, todos relacionados a PageMethods, como esse e esse. Se você não leu nenhum deles, ou está caindo diretamente nesse post, aconselho fortemente a ler pelo menos esse: Invocando PageMethods diretamente com JQuery.

Se você entender bem esse post que citei, nem precisará desse para utilizar o JQGrid ou qualquer outro plugin JQuery.

Então vamos lá!

Nesse post, vou utilizar as funcionalidades básicas do JQGrid, como Listar, Pesquisar e Editar/Adicionar.

O mais básico, e que todo mundo utiliza, é o Listar. Vou fazer o seguinte no meu HTML/JavaScript:

   1: <script type="text/javascript">
   2:     $().ready(function () {
   3:          $.ajaxSetup({
   4:                dataFilter: function (data, type) {
   5:                    if (type == "json" || type == undefined) {
   6:                        var msg = eval('(' + data + ')');
   7:                        if (msg.hasOwnProperty('d'))
   8:                            return JSON.stringify(msg.d);
   9:                        else
  10:                           return data;
  11:                   }
  12:                   else return data;
  13:               }
  14:            });
  15:  
  16:         $("#tbGrid").jqGrid({
  17:             mtype: "post",
  18:             url: '/Default.aspx/Listar',
  19:             datatype: "json",
  20:             ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
  21:             colNames: ['ID', 'Nome', 'Idade', 'E-mail'],
  22:             colModel: [
  23:                        { name: 'PessoaID', index: 'PessoaID', width: 55 },
  24:                        { name: 'Nome', index: 'Nome', width: 150 },
  25:                        { name: 'Idade', index: 'Idade', width: 100 },
  26:                        { name: 'Email', index: 'Email', width: 150 }
  27:                    ],
  28:             rowNum: 10,
  29:             rowList: [10, 20, 30],
  30:             pager: '#pager',
  31:             sortname: 'PessoaID',
  32:             viewrecords: true,
  33:             sortorder: "desc",
  34:             caption: "JQGrid com WebForms",
  35:             serializeGridData: function (dados) {
  36:                 return JSON.stringify(dados)
  37:             },
  38:             jsonReader: { repeatitems: false, id: "PessoaID" }
  39:  
  40:         });
  41:         $("#tbGrid").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false });
  42:     });
  43: </script>
  44: <table id="tbGrid">
  45: </table>
  46: <div id="pager">
  47: </div>

Até ai não fiz nada de mais, adicionei configurações padrões na Grid. Adicionei quatro colunas que virão do meu PageMethod, que está na página Default.aspx com o nome Listar.

Como será que deve ficar meu PageMethod para aceitar a requisição dessa Grid? Se não sabe, ai vai uma dica: Utilizando o Fiddler ou o DevelopToolBar, você pode ver qual HTTP Request o Grid está fazendo. Verificando quais campos estão lá você saberá que são os mesmos parâmetros que deve ter no seu PageMethod.

No meu caso, o JQGrid mandou os seguintes campos:

{"_search":false,"nd":1314831637255,"rows":10,"page":1,"sidx":"PessoaID","sord":"desc"}

No meu caso, o que importa é :

  • rows – Representa a quantidade de linha por página.
  • page – Indica a página atual.
  • sidx – Indica o campo pelo qual a Grid está ordenada. Sidx significa Search Index
  • sord – Indica a ordem que o campo definido em sidx deve ser ordenado.

Nesse caso, se meu PageMethod tiver esses campos já será o suficiente. Abaixo segue a implementação dele:

   1: [WebMethod]
   2: public static Reader<Pessoa> Listar( string sidx, string sord, int page, int rows)
   3: {
   4:     var modelo = new Modelo();
   5:     var lista = modelo.Pessoas.ToList();
   6:     var reader = new Reader<Pessoa>(lista,page,rows);
   7:     return reader;
   8: }

Como ele faz a busca, muda de solução para solução. No meu caso eu estou realizando a pesquisa em um SQLServer CE com EntityFramework. Minha classe Reader é responsável por realizar uma “paginação” nos registros retornados e retornar os campos de acordo com o JSONReader da JQGrid. Todo o código fonte dele está abaixo, apenas por curiosidade, visto que você não precisa dele para fazer seu JQGrid funcionar, ele apenas ajuda:

   1: public class Reader<T>
   2: {
   3:    /// <summary>
   4:    /// Número de páginas retornadas no registro
   5:    /// </summary>
   6:    public int total { get; set; }
   7:    /// <summary>
   8:    /// Página atual que a Grid exibirá
   9:    /// </summary>
  10:    public int page { get; set; }
  11:    /// <summary>
  12:    /// Número total de registros na base.
  13:    /// </summary>
  14:    public int records { get; set; }
  15:    /// <summary>
  16:    /// Lista com cada registro.
  17:    /// </summary>
  18:    public List<T> rows { get; set; }
  19:  
  20:    /// <summary>
  21:    /// Construtor recebe a lista e faz a paginação virtual.
  22:    /// </summary>
  23:    /// <param name="lista">Lista com os registros</param>
  24:    /// <param name="paginaAtual">Página atual.</param>
  25:    /// <param name="totalPorPagina">Total de registros por páginas</param>
  26:    public Reader(List<T> lista,int paginaAtual, int totalPorPagina)
  27:    {
  28:  
  29:        var totalRegistros = lista.Count();
  30:        page = paginaAtual;
  31:        var ini = (page - 1) * totalPorPagina;
  32:        var fim = totalRegistros > totalPorPagina ? totalPorPagina : totalRegistros;
  33:        
  34:        if (ini > 0)
  35:        {
  36:            fim = totalPorPagina;
  37:            fim = fim - 10 >= 0 ? totalRegistros % totalPorPagina : fim;
  38:        }
  39:        var totalPags = totalRegistros / totalPorPagina;
  40:        if (totalRegistros % totalPorPagina > 0)
  41:        {
  42:            totalPags++;
  43:        }
  44:        total = totalPags;
  45:        page = page;
  46:        records = totalRegistros;
  47:        rows = lista.ToList().GetRange(ini, fim);
  48:    }
  49: }

Com os códigos acima minha Grid já está funcionando:

image

Se, por exemplo, eu mudo a quantidade de registros por página, a Grid vai passar os novos valores nos parâmetros do PageMethod, e minha pesquisa retornará a nova quantidade de registros por página:

{"_search":false,"nd":1314832264231,"rows":"20","page":1,"sidx":"PessoaID","sord":"desc"}

E se eu quiser utilizar os campos de pesquisa do JQGrid? Será que o PageMethod já está preparado? Vamos ver. Vou buscar pelo usuário de nome “Frederico” na lista da Grid, vamos ver o que a JQGrid envia para o servidor utilizar o Fiddler ou o IEDeveloperToolbar, ou qualquer ferramenta de sua vontade. Utilizando a “Lupa” da Grid e selecionando o campo na popup que aparece:

image

O que ele envia é o seguinte:

{"_search":true,"nd":1314832456208,"rows":"20","page":1,"sidx":"PessoaID","sord":"desc", "searchField":"Nome","searchString":"Frederico","searchOper":"eq","filters":""}

Veja que alguns campos foram adicionados e outros estão com novos valores, os campos que teremos que adicionar em nosso PageMethod são:

  • _seach – Indica se está sendo realizando uma pesquisa ou se é apenas a listagem do dados
  • searchField – Indica por qual campo está sendo pesquisado.
  • searchString – Indica qual é o valor pesquisado.
  • searchOper – Indica qual é o operado utilizado para a pesquisa.

Vou alterar meu PageMethod  para ficar da seguinte forma:

   1: [WebMethod]
   2: public static Reader<Pessoa> Listar(GridParams param)
   3: {
   4:     var modelo = new Modelo();
   5:     List<Pessoa> lista;
   6:  
   7:     if (param._search)
   8:     {
   9:         var operador = new Func<string,string,string>((op,valor) =>
  10:         {
  11:              int saida;
  12:              bool isNum = Int32.TryParse(valor, out saida);
  13:             switch(op){
  14:                 case "ne":
  15:                     return isNum? string.Format(" <>{0}", valor): string.Format(" <>\"{0}\"", valor);
  16:                 default:
  17:                     return isNum ? string.Format(" = {0}", valor) : string.Format(" = \"{0}\"", valor);
  18:                 }
  19:         });
  20:  
  21:         var sb = new StringBuilder();
  22:         sb.Append(param.searchField);
  23:         sb.Append(operador(param.searchOper,param.searchString));
  24:         lista = modelo.Pessoas.Where(sb.ToString()).ToList();
  25:     }
  26:     else{
  27:         lista = modelo.Pessoas.ToList();
  28:     }
  29:     
  30:     var reader = new Reader<Pessoa>(lista, param.page, param.rows);
  31:     return reader;
  32: }

Primeira mudança importante é que troquei todos os parâmetros por uma classe. A classe encapsula todos aqueles campos que a JQGrid envia para o servidor, independente do Request. Apesar de ser bem simples, segue o código:

   1: public class GridParams
   2: {
   3:     public string sidx;
   4:     public string sord;
   5:     public int page;
   6:     public int rows;
   7:     public bool _search;
   8:     public string searchField;
   9:     public string searchString;
  10:     public string searchOper;
  11: }

Criei essa classe para receber todos os parâmetros porque o Asp.Net não aceita WebServices/PageMethods com parâmetros opcionais ou com Overloads, então criei um método com apenas um parâmetro, que pode ter todos os campos definidos ou não. Visto que a JQGrid utiliza o mesmo método para listar e pesquisar, essa é a única solução.

O resto é apenas a lógica do método, que você pode mudar com a sua no lugar, a minha é só para exemplo. O segredo está em validar o parâmetro _search, se ele for true quer dizer que o usuário está realizando uma pesquisa, e não apenas carregando a lista. Para simular, criei apenas lógica necessária para o usuário usar um Campo como critério igual ou diferente do valor que for fornecido.

Com isso minha lógica já estará funcionando.

Como mudei o parâmetro do PageMethod, preciso apenas alterar um evento na configuração da Grid, para encapsular o nome do parâmetro:

   1: serializeGridData: function (dados) {
   2:    return JSON.stringify({param: dados})
   3: },

Esse evento é invocado pela Grid logo antes da requisição ser enviada para o servidor, então eu coloco os parâmetros dentro do campo param. E pronto! sua Grid está funcionando perfeitamente com Asp.Net WebForm.

Para finalizar, vamos fazer a Grid conseguir criar e alterar registros

Adicionando  e Alterando registro com JQGrid

Antes de mais nada, devo habilitar algumas configurações no Pager da grid, fazendo que o botão de adicionar e editar apareça:

   1: $("#tbGrid").jqGrid('navGrid', '#pager', { edit: true, add: true, del: false });

E alterar o ColModel para dizer como será a edição de cada campo:

   1: colModel: [
   2:    { name: 'PessoaID', index: 'PessoaID', width: 55, editable: false, editoptions: { readonly: true, size: 10} },
   3:    { name: 'Nome', index: 'Nome', width: 150, editable: true, editoptions: { size: 50} },
   4:    { name: 'Idade', index: 'Idade', width: 100, editable: true, editoptions: { size: 2 }, editrules: {integer:true} },
   5:    { name: 'Email', index: 'Email', width: 150, editable: true, editoptions: { size: 50 }, editrules: { email: true} }
   6: ],

Depois adicionar a opção para definir o caminho do PageMethod responsável por salvar o registro:

   1: editurl: "/Default.aspx/Salvar"

Também devemos alterar algumas configurações da Grid para conseguir tratar o JSON, porque infelizmente o JQuery tem um problema ao converter os dados para JSON automaticamente, então nós mesmos temos que fazer isso. Para isso, vamos alterar algumas informações padrões da Grid:

   1: $.extend($.jgrid.edit,
   2: {
   3:     ajaxEditOptions: { contentType: "application/json;charset=utf-8" },
   4:     serializeEditData: function (data) {
   5:         return JSON.stringify(data);
   6:     }
   7: });

Feito isso, não precisamos mais fazer nada no JavaScript, apenas preparar o PageMethod. que você verá que é autoexplicativo:

   1: [WebMethod]
   2: public static void Salvar(string Nome, int Idade, string Email, string oper, string id)
   3: {
   4:     var modelo = new Modelo();
   5:     if (oper == "add")
   6:     {
   7:         var pessoa = new Pessoa
   8:         {
   9:             Nome = Nome,
  10:             Idade = Idade,
  11:             Email = Email
  12:         };
  13:         modelo.Pessoas.Add(pessoa);
  14:     }
  15:     else
  16:     {
  17:         var pessoa = modelo.Pessoas.Where("PessoaID = " + id).ToList()[0];
  18:         pessoa.Nome = Nome;
  19:         pessoa.Idade = Idade;
  20:         pessoa.Email = Email;
  21:     }
  22:     modelo.SaveChanges();
  23: }

E pronto!

Com isso você já pode testar a alteração e inclusão clicando nos botões que aparecem na barra da Grid:

Alterando registro com JQGrid X WebForms

Criando registro com JQGrid X WebForms

É isso pessoal, com o que foi passado nesse post você já consegue ir muito além. Você viu que tudo é possível com a estrutura que o Asp.Net fornece para o WebForm.

Espero que isso ajude. Muitas pessoas já me perguntaram sobre JQGrid com WebForm, isso deve ajudar muita gente.

Abraços e até o próximo!

 

::Atualização

Estou publicando o exemplo do código para esclarecer as dúvidas de alguns. Qualquer problema, comente ai embaixo.

Abs.

JQGridWebForm.zip (3,04 mb)

2. setembro 2011 00:39 by Frederico B. Emídio | Comments (15) | Permalink

Exportando para Excel com Asp.Net WebForms    

Boa noite Pessoal!

Depois de um longo tempo sem escrever nada devido à alguns projetos que estão me tomando todo o tempo, resolvi retornar os post respondendo algumas dúvidas que têm chegado até mim de amigos e leitores do Blog.

A maioria deles são relacionados a WebForms, então vou deixar um pouco Asp.Net MVC e JavaScript de lado, e voltar para o mundo WebForm, que ainda é o universo mais utilizado do Asp.Net e tem muita coisa interessante para mostrar.

A dúvida hoje é bem rápida e simples, vou mostra uma forma muito rápida de exporta dados para Excel.

É comum em qualquer projeto ter a necessidade de exportar alguma coisa para Excel, então é bom sempre ter alguma prática na manga, e essa dica pode ajudar muito.

Naturalmente, essa prática não vai resolver todas as situações. Para algumas necessidades mais complexas talvez seja necessário utilizar alguma ferramenta de terceiro, ou o OWC da Microsoft. Quando você quiser fazer alguma mais simples, como apenas exportar uma tabela, essa técnica vai te ajudar muito.

Excel e HTML

Um conhecimento que temos que ter quando trabalhos com Excel é saber que ele interpreta HTML, ou seja, se você fizer uma página simples, com um HTML puro, e colocar a extensão xls, sua página já abrirá no Excel sem problemas.

Se você estruturar uma tabela (table) bem direitinho, seu Excel vai ficar muito bom. Você poderá utilizar inclusive CSS para aplicar cores, cellpadding para mesclar, etc.

Solução

O objetivo deste post não é fazer um cadastro, e sim mostrar como exportar dados para um Excel, mas de qualquer forma, vou explicar como é minha aplicação.

É uma aplicação bem simples. Fiz um cadastro de pessoas com três campos, que não faz a menor validação de dados, porque não é esse o objetivo, e fiz a persistência com EntityFramework Code First, salvando os dados em um SQL Server CE.

Além dos campos para cadastro, também coloquei um GridView para mostrar meus dados. Minha tela ficou como o print abaixo:

Tela de cadastro WebForm

Para implementar o Modelo fiz as seguintes classes:

   1: public class Pessoa
   2: {
   3:     public int PessoaID { get; set; }
   4:     public string Nome { get; set; }
   5:     public int Idade{ get; set; }
   6:     public string Email{ get; set; }
   7: }
   8:  
   9: public class Modelo: DbContext
  10: {
  11:     public DbSet<Pessoa> Pessoas { get; set; }
  12: }

E meu HTML também é bem simples:

   1: <h2>
   2:    Exportando para Excel
   3: </h2>
   4: <p>Nome: <asp:TextBox ID="txtNome" runat="server"></asp:TextBox></p>
   5: <p>Idade: <asp:TextBox ID="txtIdade" runat="server"></asp:TextBox></p>
   6: <p>Email: <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></p>
   7: <p><asp:Button Text="Salvar" runat="server" id="btnSalvar" 
   8:        onclick="btnSalvar_Click" /></p>
   9:  
  10: <asp:GridView ID="grid" runat="server" AllowPaging="true" PageSize="5" 
  11:    AutoGenerateColumns="true" onpageindexchanging="grid_PageIndexChanging"></asp:GridView>
  12:  
  13: <asp:Button ID="btnExportar" Text="Exportar" runat="server" 
  14:    onclick="btnExportar_Click"/>

Sem segredos, o CodeBehind dessa página não podia ser mais objetivo:

   1: protected void Page_Load(object sender, EventArgs e)
   2: {
   3:    if (!IsPostBack)
   4:    {
   5:        var modelo = new Modelo();
   6:        grid.DataSource = modelo.Pessoas.ToList();
   7:        grid.DataBind();
   8:    }
   9: }
  10: protected void grid_PageIndexChanging(object sender, GridViewPageEventArgs e)
  11: {
  12:    var modelo = new Modelo();
  13:    grid.PageIndex = e.NewPageIndex;
  14:    grid.DataSource = modelo.Pessoas.ToList();
  15:    grid.DataBind();
  16: }
  17: protected void btnSalvar_Click(object sender, EventArgs e)
  18: {
  19:    var modelo = new Modelo();
  20:    var pessoa = new Pessoa{Nome= txtNome.Text, Email=txtEmail.Text , Idade=Int32.Parse(txtIdade.Text)};
  21:    modelo.Pessoas.Add(pessoa);
  22:    modelo.SaveChanges();
  23:    grid.DataSource = modelo.Pessoas.ToList();
  24:    grid.DataBind();
  25:    txtEmail.Text = txtNome.Text = txtIdade.Text = "";
  26: }
  27: protected void btnExportar_Click(object sender, EventArgs e)
  28: {
  29:    var modelo = new Modelo();
  30:    var tw = new StringWriter();
  31:    var hw = new HtmlTextWriter(tw);
  32:  
  33:    hw.WriteLine("<h1>Dados Exportados</h1><br/>");
  34:  
  35:    DataGrid grid = new DataGrid();
  36:    grid.DataSource = modelo.Pessoas.ToList();
  37:    grid.HeaderStyle.Font.Bold = true;
  38:    grid.DataBind();
  39:    grid.RenderControl(hw);
  40:  
  41:    Response.Clear();
  42:    Response.AppendHeader("content-disposition", "attachment; filename=Arquivo.xls");
  43:    Response.ContentType = "application/vnd.ms-excel";
  44:    Response.Charset = "utf-8";
  45:    Response.ContentEncoding = System.Text.Encoding.GetEncoding("ISO-8859-1");
  46:    this.EnableViewState = false;
  47:    Response.Write(tw.ToString());
  48:    Response.End();
  49: }

O PageLoad e o evento PageIndexChanging não requer explicação, é bem simples e é comumente utilizado em todas as aplicações WebForms. O evento do botão Salvar também é tranquilo, e está utilizando EF para persistir o cadastro (sem nenhuma validação) e logo em seguida ele realiza o bind ao GridView.

Tudo que importa mesmo para esse post é o método bntExportar_Click.

Como falei anteriormente, o Excel interpreta HTML, então o que esse método faz é gerar um HTML para nós. Vamos explica-lo linha a linha:

Da linha 29 e 31 não tem segredo. Estou criando as varáveis necessárias e as mais importante são o StringWriter e  HtmlTextWriter, essas variáveis são responsáveis para renderizar o HTML no Response da página.

Na linha 33 e crio um título para minha planilha, adicionando uma tag h1.

O segredo está entre as linhas 35 e 39. Nessas linhas eu estou criando uma tabela (tag <TABLE>) para ser uma tabela no Excel. Eu poderia criar tag por tag dentro de alguns FORs por exemplo, mas preferi utilizar um controle do WebForm para renderizar isso para mim.  No caso, estou utilizando o DataGrid para fazer toda a lógica de criar a tabela. Eu poderia utilizar um GridView, mas o DataGrid é mais leve para nosso objetivo.

Na linha 36 eu adiciono os dados ao meu DataGrid,

Na linha 37 eu defino que o cabeçalho da tabela deve ter as letras em negrito, para mostrar que podemos utilizar as opções do DataGrid para gerar o Excel. Essas opções incluem qualquer uma do DataGrid, tais como: eventos, estilos, etc.

Na linha 38 eu realizo o DataBind.

E na linha 39 eu rederizo, ou seja, gero o HTML na variável do tipo HtmlTextWriter (hw).

Entre as linhas 41 e 45 eu faço o tratamento geral da página, limpando o conteúdo total da página (41), colocando as diretivas para forçar o download da página (42), já que não queremos que ela seja renderizada no Browser, dizemos que o tipo da página é Excel (43) e definimos informações de encoding do arquivo (44 e 45).

Na linha 46 eu desabilito o ViewState, para que não tenha conteúdo desnecessário no meu Arquivo.

Na linha 47 eu escreve o meu HTML armazenado na variável tw ao conteúdo do meu Response. E finalizo a criação do meu Response na linha 48.

Fazendo isso, ao clicar no meu botão de exportar da página, minha página gerará um Excel como o da imagem abaixo:

Imagem de Excel gerado pelo Asp.Net

Novamente, muito simples!

O que deve ficar claro nesse post, é que podemos utilizar as classes/controles do Asp.Net para auxiliar-nos na geração do HTML, e que qualquer HTML pode ser utilizado para geração de Excel, então podemos combinar nossos conhecimentos e facilitar nossa vida em situações que aparentemente poderiam ser mais complicadas.

Essa solução funciona em todas as versões do WebForm, e também é possível utilizar em Asp.Net MVC, com algumas pequenas adaptações.

Espero que ajude e até o próximo post!

10. julho 2011 00:06 by Frederico B. Emídio | Comments (4) | Permalink

Sobre mim

Minha Imagem

Meu nome é Frederico Batista Emídio, trabalho com desenvolvimento de sistemas profissionalmente a oito anos, porém, já faço sites pessoais a pelo menos dez anos.

Para saber mais clique aqui.

Páginas

Calendário

<<  novembro 2017  >>
seteququsedo
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910

Visualizar posts em um Calendário
Sigua @fredemidio

MCP Asp.NET