Introdução ao controle FormView do ASP.net

INTRODUÇÃO

O controle FormView é usado para exibir registros únicos de alguma fonte de dados, possuindo recursos para exibição e edição dos valores vinculados. Nele, cria-se um modelo composto de controles para exibir os campos individuais a partir do registro. Os modelos contêm formatação, controles e expressões de ligação para criar o formulário.

O FormView conta com os recursos do controle do database (fonte de dados) e é utilizado para executar tarefas como atualização, inserção e exclusão de registros. Nele, são processados apenas um registro de dados de cada vez, mesmo se a sua fonte de dados exponha vários registros.

O controle FormView se encontra na guia Data da ToolBox. Toda a configuração deste componente pode ser feita na aplicação, visualmente, ganhando com isso muita produtividade. Entretanto, as mesmas configurações podem ser todas realizadas por meio de código.

Este artigo apresenta o uso do controle FormView na pratica, utilizando o Visual Studio 2012. A fonte de dados usada foi SQL Server Local Database.

CRIAÇÃO DO PROJETO

O primeiro passo para demonstrar o uso do FormView é a criação de um novo web site por meio da opção File > New WebSite > ASP.NET Empty Web Site, com o nome de SiteFormView.

A seguir, é criada então a fonte de dados, na opção File > New > File e então escolhe-se a opção SQL Server Compact 4.0 Local Database. Escolheu-se esta opção por ser uma fonte de dados mais simples (compacta) e local (sem acesso remoto), livre para redistribuir e que permite integração com tablets e smartphones. A figura 1 apresenta a tela para realizar esta tarefa.

Figura 1: Tela para seleção da Fonte de dados

Com o Database definido, cria-se então a tabela Clientes. Para isso, deve-se clicar duas vezes no DataBase, e em Server Explorer clicar com o botão direito do mouse em Tables e selecionar Create Table. Conforme mostra a figura 2.

Figura 2: Criação da tabela Clientes

Na tela que será aberta, define-se os campos para a tabela, que são: id, nome, telefone, email e datanasc, e em Name digita-se Clientes. Definiu-se também a opção Identity como true, para o auto incremento do ID. A figura 3 mostra a tela para essa configuração.

Figura 3: Configuração da tabela clientes

Feito isso, adiciona-se então alguns registros na tabela criada. Para isso, clica-se com o botão direito do mouse na tabela Clientes em Server Explorer e então se seleciona a opção Show Table Data, que permite adicionar novos registros de forma visual e prática. A figura 4 demostra como isso é realizado.

Figura 4: Inserção dos registros na tabela Clientes

Com a base de dados já definida e populada, cria-se então um webform em File > New> File> WebForm. Colocou-se o nome deste webform de Clientes.aspx. Seleciona-se a página Clientes.aspx na janela Solution Explorer e, no modo Design. Na ToolBox, na guia Data encontra-se o controle FormView, conforme mostra a figura 5.

Figura 5: Guia onde encontra-se o FormView

CONFIGURAÇÃO DO COMPONENTE

Depois que o componente é inserido no Web Form, é feita então as sua configuração inicial. O primeiro passo é a ligação com a fonte de dados. Com o FormView selecionado, nota-se a existência de uma flecha (smart tag), no canto superior direito, clica-se nela para abrir a FormView Task. Agora, em Choose Data Source, escolhe-se New Data Source, conforme mostra a figura 6.

Figura 6: Escolha de uma nova fonte de dados para o FormView

Na tela para a escolha do tipo da fonte de dados, escolhe-se a opção Database, a figura 7 apresenta essa tela.

Figura 7: Tela para escolha da opção da Fonte de Dados

Na tela a seguir, define-se então a fonte de dados criada nos passos anteriores, que contém a tabela Clientes. O nome dessa fonte de dados é Database.sdf. SDF significa Source Definition File, ou arquivo de definição da fonte. A figura 8 ilustra essa tela.

Figura 8: Tela de ligação com a base de dados criada

Na próxima etapa de configuração, define-se a tabela Clientes e as colunas que serão apresentadas no FormView. Escolhe-se então a tabela Clientes e nas colunas marca-se a opção *, que representa todas as colunas referentes à tabela Clientes. A figura 9 apresenta essa configuração.

Figura 9: Tela para seleção dos campos da Tabela Clientes que serão apresentados

Uma das caraterísticas do FormView é que ele reúne as operações CRUD, ou seja, inserção, atualização e exclusão (Create, Retrieve, Update e Delete) de registros de forma muito simples de configurar. Para isso, basta clicar na opção Advanced. Na tela que é mostrada marca-se então a opção Generate INSERT, UPDATE, and DELETE statements. A figura 10 mostra essa tela.

Figura 10: Opção que permite o CRUD no FormView

Na próxima etapa, basta testar a query criada e irão aparecer os registros contidos na tabela para conferência. A figura 11 apresenta a tela de teste.

Figura 11: Teste da Query exibindo os registros da Tabela Clientes

Feito isso, já é possível então visualizar os registros no FormView, seus campos e o tipo de cada campo, conforme mostra a figura 12.

Figura 12: FormView com a tabela Clientes vinculada

Se a aplicação for executada no Browser neste momento, já será possível visualizar o primeiro registro da tabela Clientes, pois a mesma já foi populada anteriormente. Caso não existissem registros na tabela, nada seria mostrado. A figura 13 traz a aplicação em execução no Browser.

Figura 13: Controle FormView em execução no Browser

PERSONALIZAÇÃO DO COMPONENTE

A seguir é realizada a personalização do componente para uma melhor visualização e navegação entre os registros. Nesta etapa é possível personalizar o FormView de inúmeras maneiras, toda essa personalização pode ser realizada de forma visual.

Primeiro será definida a possibilidade de paginação entre os registros. Para isso, com o FormView selecionado, nas propriedades, em Paging, a opção AllowPaging é marcada como True. Em pagerSettings, é possível configurar diversas opções para navegação dos registros, como: o formato, a localização, entre outros. A figura 14 apresenta essa configuração.

Figura 14: Propriedades do FormView responsável pela paginação

Com a paginação definida, já é possível navegar entre os registros. É possível também, editar o template que será apresentado. Nesta etapa pode-se adicionar itens e alterar os campos para apresentação. Para isso, seleciona-se o FormView e então clica-se em Edit Templates. A figura 15 mostra como habilitar a edição.

Figura 15: Opção para permitir a edição do template da FormView

Uma das configurações possíveis nesta etapa é a forma com que os dados serão apresentados. Para exemplificar, será alterada a forma de exibição do campo data. Clica-se em dataLabel e então em Edit DataBindings, conforme mostra a figura 16.

Figura 16: Opção para alterar os campos apresentados na FormView

Na próxima tela, altera-se a propriedade Format para Short date. Isso fará que a data seja exibida da seguinte forma: dd/mm/aaaa. A figura 17 apresenta essa configuração.

Figura 17: Configuração para apresentação do Campo Data na FormView

Agora será inserida uma tabela para melhor organização dos campos para apresentação. Primeiro define-se um espaço antes do id, onde será colocada a Tabela, depois na opção Table->Insert Table, é o caminho para criar a tabela. A figura 18 ilustra esse passo.

Figura 18: Inserção da Tabela na FormView

Com a tabela criada, arrasta-se os componentes Label para a segunda coluna da tabela, sendo que a primeira coluna é a que contém o nome dos campos. A figura 19 mostra o FormView com os campos já posicionados na tabela.

Figura 19: FormView Editado com os campos posicionados na Tabela

Essas configurações da tabela foram feitas no ItemTemplate, que é o modo somente leitura. Este é o modelo de exibição primário do controle. Outros modos importantes a serem personalizados são: InsertItemTemplate e EditItemTemplate, o primeiro é usado para o modo de inclusão e o segundo é usado para modo de edição. Também existem os templates FooterTemplate para personalizar a parte inferior do FormView, HeaderTemplate para personalizar a parte superior do FormView, EmptyDataTemplate para personalizar o FormView caso os dados não sejam carregados e PagerTemplate para personalizar a paginação entre os registros. A figura 20 mostra todos os modos presentes no FormView.

Figura 20: Modos Editáveis do FormView

Agora será editado o modo EditItemTemplate, nele será adicionada também uma tabela para organização dos campos, a figura 21 ilustra essa personalização.

Figura 21: Edição do Modo EditItem Template

A mesma configuração é realizada no modo InsertItemTemplate. Também foi alterado os textos dos LinksButtons, traduzindo-os. Ainda é possível realizar uma personalização mais visual, editando-se a cor de fundo, cor e tipo da borda e cor e tipo da fonte, entre diversas outras configurações. A figura 22 apresenta a tela de propriedades do FormView, onde são realizadas essas modificações.

Figura 22: Propriedades da FormView para melhorar sua apresentação

Ainda é possível realizar a personalização do FormView com um dos diversos templates já contidos no componente. Para isso clica-se em Auto Format. A figura 23 ilustra essa etapa.

Figura 23: Opção Auto Format do FormView com os Templates disponíveis

Nota-se que as propriedades do componente são alteradas de acordo com o template escolhido na lista. Pode-se ainda personalizar um template previamente definido de acordo com as necessidades.

Por fim, é mostrada parte do código gerado, onde observa-se que em ItemTemplate, que é o modo de apenas visualização dos dados. O campo Text contém a palavra chave “Eval”, que representa que esse campo é somente leitura, ou seja, não pode ser alterado, já os campos que contem a palavra chave “Bind” representam campos editáveis. A figura 24 ilustra esse contexto.

Figura 24: Código Gerado na Criação do FormView

Foram editados os modos FooterTemplate e HeaderTemplate, apenas para demonstração. As figuras 25, 26 e 27 mostram a aplicação em execução, com os modos de apresentação, alteração e adição de novo registro. A figura 28 apresenta o novo Registro adicionado.

Figura 25: FormView Finalizado em Execução no Browser

Figura 26: FormView em execução no modo Edição de Clientes

Figura 27: FormView em execução no modo Inclusão de Clientes

Figura 28: FormView em execução apresentando o novo Cliente adicionado

CONCLUSÃO

Este artigo apresentou o uso do componente FormView, bem como sua configuração e personalização. Foi possível observar que tudo foi realizado de forma visual, embora exista a necessidade de realizar alguns ajustes, a produtividade que se ganha ao utilizar o controle é seu grande diferencial.

REFERÊNCIAS

• FormView Web Server Control