De que se trata o artigo

Este artigo trata dos recursos nativos no ASP.NET (como gridview, DataGrid, etc) para a criação de aplicações Web utilizando os recursos de Web Forms. A ideia básica é criar um sistema de blog.

Em que situação o tema é útil

O tema é útil para os desenvolvedores conhecerem os principais recursos nativos que existem na plataforma .NET, como os controles de WebForms: TextBox, GridView etc. Desta forma, será possível criar qualquer tipo de aplicação Web.

Resumo Devman

Desenvolver aplicações ASP.NET usando Web Forms é a maneira mais prática de criar projetos que serão executados em browsers, visto que através do mesmo você possui um conjunto de controles prontos para serem utilizados, gerando uma grande produtividade. Para poder explorar os recursos do ASP.NET, este artigo vai considerar a utilização dos mesmos em um projeto para gerenciar blogs de vários usuários.

Nestes blogs, o usuário poderá enviar suas publicações – baseadas em texto puro para simplificar algumas tarefas – além de gerenciar os dados do blog.

Até a chegada do Framework .NET, o desenvolvimento de aplicações Web baseava-se em projetos desenvolvidos em plataformas como PHP ou ASP clássico, onde a interface era criada usando editores HTML e o código da regra de negócios escrito juntamente com a interface.

O problema principal no desenvolvimento Web não é a separação entre interface de usuário e regras de negócio, mas entender os detalhes que envolvem o gerenciamento de uma aplicação baseada numa arquitetura cliente-servidor. Um destes detalhes baseia-se no fato de que do lado do cliente (usuário da aplicação) existe pouco ou nenhum controle do que está acontecendo e assim, torna-se necessário gerenciar o estado da página para poder enviar os dados corretos. Considere também a grande diversidade de browsers existentes e que cada um possui particularidades na renderização do HTML, comportamento do JavaScript etc.

Parte destes problemas (no .NET) são resolvidos de maneira bem simples, através de server controls, que são componentes que podem ser destinados a montar uma interface com o usuário, tais como TextBox, Labels, Combo Box entre outros, além de controles não visuais destinados a realizar tarefas de validações, por exemplo. Todos estes componentes podem ser facilmente manipulados através das caixas de ferramentas do Visual Studio e do editor de propriedades.

Um dos aspectos mais importantes e também mais criticados do ASP.NET é o recurso de criação de Web Forms. Este consiste de server controls aninhados em uma tag <form>, ou seja, você pode fazer o design de um Web Form como faria em uma aplicação Windows Forms, dada a sua facilidade de manipulação. Mas, muitos excessos são cometidos por alguns desenvolvedores menos preparados e, rapidamente começaram a aparecer páginas muito pesadas que tentavam recriar nos browsers o mesmo ambiente de aplicações desktop. Isso é um erro, porque o browser é um ambiente distinto do desktop, os recursos são limitados e, ainda que seja possível construir interfaces com um layout rico, certos cuidados precisam ser tomados, como evitar a utilização excessiva de controles, componentes desnecessários e validações intermináveis.

Considerando ainda o ASP.NET, a sua principal vantagem é que é possível definir a interface com o usuário utilizando um arquivo ASPX que possui marcações HTML para os server controls, tags HTML, além de suporte a JavaScript e CSS. Além disso, utiliza um arquivo separado para escrever o código C# (ou VB.NET) vinculado com a página. Esta forma de organizar o código é chamada de code behind e dá amplo suporte para escrever eventos em resposta a iterações do usuário com os controles.

Componentes ASP.NET

Quando se está desenvolvendo projetos com ASP.NET, além das facilidades do designer e do code behind, o desenvolvedor também tem à sua mão uma variedade grande de controles de servidor que simplificam algumas tarefas.

Estes controles podem ser arrastados para o designer e ter suas propriedades configuradas pelo editor de propriedades do Visual Studio. Mas, uma das principais características é que executam tarefas importantes, simplificando nosso trabalho. Veja alguns grupos de controles:

1. Componentes para editar e exibir dados: envolve controles onde os dados são editados ou visualizados. Entre os controles mais comuns estão TextBox, Label, GridView, FormView, Radio Button, CheckBox, além de outros das mesmas categorias.

2. Componentes navegacionais: compõem elementos para construir itens de navegação pela aplicação dando suporte a conteúdo estático e dinâmico. Seu conteúdo pode estar baseado no banco de dados ou em arquivos de configuração XML do projeto. Estes controles envolvem menus, TreeViews e Site Map Path.

3. Componentes para validação dos dados: estes permitem verificar os dados que foram editados nos controles e testar a sua validade tanto no lado do cliente (executando código JavaScript gerado automaticamente) como do lado do servidor. Estes validadores são executados assim que uma ação HttpPost é disparada. Esta ação é tipicamente executada quando um usuário clica em um botão para enviar os dados para o servidor, por exemplo.

4. Componentes para aperfeiçoamento da interface: permite melhorar a experiência do usuário com a interface, evitando round trips desnecessários (envio de dados para o servidor com o redesenho total da página) e também agilizando o comportamento da interface. Os principais componentes desta categoria são aqueles controles do grupo AJAX Extensions e Web Parts da caixa de ferramentas do Visual Studio.

Foram citados nestes grupos somente os controles nativos que são fornecidos com uma instalação padrão do Visual Studio e ferramentas de programação para o Framework .NET. Existem no mercado inúmeros controles para esta plataforma, tanto gratuitos como pagos. Verifique no site oficial para a plataforma ASP.NET (seção Links) para conhecer alguns destes.

Usando o Editor HTML ou o Designer

Uma dúvida comum para quem está começando ou aperfeiçoando-se no desenvolvimento com ASP.NET é se o correto é usar o editor visual ou manipular o código HTML. Como sempre, existem aspectos positivos e negativos para as duas abordagens.

O editor HTML deve ser utilizado para realizar ajustes mais rápidos, como alterar o estilo CSS do fundo de algum controle ou até mesmo alterar seu ID.

Por outro lado, embora a utilização do editor visual permita um rápido desenvolvimento da página com a verificação imediata do resultado, o código HTML gerado tem a tendência de ser mais carregado, com elementos desnecessários e de difícil manutenção.

O que se pode fazer é usar uma combinação do melhor dos dois mundos. Assim, para criar páginas em branco, com layout mais simplificado, onde somente elementos mais básicos serão inseridos, tem-se relativa facilidade com esta linguagem, usando o editor HTML.

Utilizar diretamente a edição do código possui muitas vantagens entre as quais, podemos citar o recurso de Code Completion (Intellisense) que na versão 2010 do Visual Studio está muito bem resolvida. A Figura 1 mostra este recurso em ação.

Figura 1. IntelliSense do editor HTML em ação

Já o editor visual permite editar algumas propriedades de maneira mais simples em componentes mais complexos, como o GridView, onde é necessário configurar várias colunas que deverão ser exibidas no mesmo. Neste caso, a utilização do editor visual facilita bastante, visto que você possui um assistente para criar as mesmas.

Mas, um dos recursos mais interessantes é a possibilidade de ter uma janela exibindo tanto o código HTML, como o design. Isto é feito com o botão Split e a Figura 2 mostra esta janela em ação.

Figura 2. Usando a visualização Split do Visual Studio

É importante observar que a geração do HTML para o browser em tempo de execução é feita pelo servidor, considerando o browser do cliente mais do que o código que está na página, mas, está claro que quanto mais enxuto o código HTML for, melhor e mais ágil vai ser a carregamento da página.

Usando JavaScript

Como foi dito anteriormente, o ASP.NET usa páginas e controles do lado do servidor para gerar o conteúdo para o browser.

Em alguns casos, é possível interagir com JavaScript e assim executar códigos do lado do cliente da aplicação.

Ao utilizar esses códigos JavaScript, estes são executados sem que seja necessário o envio de dados para o servidor. Assim, em casos com validações ou interações com o usuário, é interessante usar JavaScript.

Uma aplicação típica é pedir a confirmação de alguma ação, por exemplo, ao clicar em um botão para enviar dados para o servidor.

Veja um exemplo de implementação a seguir, onde o código de confirmação em JavaScript é adicionado ao corpo de uma página ASPX.

<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
      <title>BlogEngine - Gerenciador de Blogs</title>
      <script language="javascript">
          function confirmacao(msg) { return confirm(msg); }
      </script>
  </head>

Ou usando arquivos com a extensão .js contendo o código JavaScript que deve ser usado em diversos pontos do projeto e ligando este arquivo às páginas ASPX na TAG <head>, como neste outro exemplo:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
      <title>BlogEngine - Criação do Blog</title>
      <script type="text/javascript" src="scripts.js"></script>
  </head>

A escolha da melhor opção vai depender de cada caso e de cada aplicação, porém, como os arquivos scripts precisam ser enviados para o cliente junto com o conteúdo, a tendência é ter a carga cada vez mais lenta, conforme o tamanho deste arquivo for crescendo.

Por outro lado, é bom observar que alguns browsers desabilitam por padrão a execução de scripts. Assim, se alguma função mais avançada e vital para a execução do programa depender de um JavaScript, pode ser que sua aplicação não funcione corretamente.

Validadores

Uma das boas práticas no desenvolvimento de qualquer tipo de software é que antes que os dados sejam persistidos no banco, estes possam ser validados para evitar problemas, tais como:

1. Estouro de capacidade de armazenamento de campos em tabelas. Por exemplo, campos string (varchar no SQL Server) que tenham tamanho menor do que o comprimento do texto que esteja sendo enviado irá causar um erro na aplicação.

2. Os tipos de dados podem ser incompatíveis. O usuário pode ter digitado um valor errado em um campo numérico, uma data no formato errado.

3. Dados mais complexos podem estar incorretos, tais como endereços de e-mail que precisam sempre respeitar um formato. O usuário desavisado pode acabar enviando um endereço incorreto.

4. Validações para manter regras da aplicação. Pode ser que no seu projeto não possam haver nomes repetidos ou endereços de e-mail repetidos, por exemplo.

Estes tipos de verificação podem ser feitos de diversas maneiras, tanto usando código escrito com C# no code behind da aplicação como em JavaScript.

O uso do código escrito com C# apresenta a desvantagem de exigir uma validação no servidor e, consequentemente, espera do usuário nesta tarefa. Já a utilização do JavaScript pode tornar a validação insegura, visto que o usuário pode desativa-lo em qualquer navegador. Na prática, o ideal é utilizar os dois, simplesmente pelo fato que a utilização do JavaScript permite que as informações sejam validadas sem a necessidade da página ir até o servidor e, caso o usuário desative o Javascript, o mesmo seria automaticamente validado pelo servidor, através do C#.

Para contornar este problema, o ASP.NET disponibiliza um conjunto de controles chamado Validators, que podem ser encontrados no Visual Studio, na aba Validation (Figura 3). Além disso, os mesmos já implementam as validações em JavaScript (Client) e C# (Server) automaticamente.

Figura 3. Controles para validação

A Tabela 1 mostra uma descrição de cada validador.

Controle

Descrição

CompareValidator

Permite comparar o conteúdo de um controle com outro.

Este validador deve ser usado quando for necessário confirmar dados digitados pelo usuário em dois controles, tais como senhas.

CustomValidator

Usa um código no lado do servidor em C# para executar validações mais complexas.

Uma aplicação tradicional deste componente é quando for necessário executar qualquer operação mais complexa para validação ou, por exemplo, obter informações do banco de dados para realizar a validação.

RangeValidator

Usando tipos de dados definidos, onde é possível especificar uma faixa para a qual os dados do controle deverão pertencer para serem válidos.

É útil quando uma data deve estar dentro de um determinado período, por exemplo.

RegularExpressionValidador

Este validador usa expressões regulares para comparar o conteúdo de um controle.

As expressões regulares são códigos escritos para representar padrões para formatos de dados como datas, endereços da Internet e de e-mail, por exemplo.

RequiredFieldValidator

Faz com que o preenchimento do controle seja obrigatório. A página vai ser considerada inválida até que o controle seja preenchido.

Tabela 1. Descrição dos componentes de validação

Este evento é tipicamente executado quando um botão é clicado. É possível também definir para cada botão um conjunto de controles a serem validados e assim, validar somente os dados necessários para cada Send.

Entity Framework para acesso aos dados

Outro aspecto importante para o desenvolvimento com ASP.NET é a sua grande conectividade com os bancos de dados. A partir da versão 3.0 do Framework .NET foi introduzido o Entity Framework (EF) e a linguagem LINQ para manipulação de dados.

Enquanto LINQ permite executar consultas no banco de dados usando uma sintaxe bem próxima àquela do C#, com o EF é possível mapear os dados armazenados em bancos de dados relacionais, como o SQL Server, para classes e objetos.

A ideia básica do EF é definir classes para cada tabela do banco de dados. Usando estas classes, as tradicionais operações para consultar, inserir, atualizar e excluir os dados no banco são executadas através de métodos sem que seja necessário inserir instruções em SQL no seu código, embora, seja possível personalizar estas instruções em alguns casos.

A Figura 4 mostra um exemplo de mapeamento baseado em um banco de dados SQL Server. Observe sua semelhança com os diagramas de classe.

Figura 4. Exemplo de tabelas mapeadas com Entity Framewor

É importante observar que com o EF é possível ainda realizar as seguintes operações:

1. Definir o banco de dados através do código;

2. Realizar atualizações no schema do banco de dados;

3. Refinar o comportamento do mapeamento dos dados para que estes sejam carregados apenas no momento necessário;

4. Dar suporte a vários tipos de bancos de dados.

A aplicação de exemplo

Vamos por em prática os conceitos que foram apresentados em uma aplicação de exemplo e que terá as seguintes características:

1. Permitir a criação de um blog usando um nome e uma descrição de conteúdo.

2. Cada blog vai ser gerenciado por um usuário que vai ter de cadastrar seu nome, um e-mail e uma senha para gerenciar o blog.

...

Quer ler esse conteúdo completo? Tenha acesso completo