Criando uma aplicação web com Microsoft ASP.NET MVC e C#
Olá! Meu nome é Henrique Dezani, sou professor, doutor e trabalho com desenvolvimento web com .NET desde 2006. Já trabalhei em grandes projetos para a MetLife, Globo, Sony Entertainment entre outras grandes empresas. Sempre gostei de programar e para se ter uma ideia, eu iniciei na programação criando um jogo baseado em texto — text-based game or interactive fiction— aos 11 anos (1992) num computador IBM/AT com tela monocromática usando a linguagem Basic e instruções GOTO. De lá para cá muita coisa evoluiu, principalmente no que concerne a facilidade em desenvolver, compilar e publicar aplicações. O Framework .NET, no meu ver, juntamente com o IDE (Integrated Development Environment) Visual Studio, consistem em uma das tecnologias que trazem a maior produtividade nos aspectos relatados anteriormente.
Neste artigo eu apresento o passo a passo da criação de parte de um CRUD (Create, Read, Update, Delete) em ASP.NET MVC (Model View Controller) utilizando a linguagem de programação C# (C Sharp) e o banco de dados SQL Server. Ao final da leitura deste texto você estará apto a desenvolver uma aplicação com conexão ao banco de dados SQL Server utilizando a biblioteca ADO.NET e o IDE Visual Studio 2017 que realiza o cadastro e a consulta (CR) de uma tabela.
O Framework ASP.NET MVC tem sido muito utilizado no mercado e novos recursos são adicionados constantemente. Como um exemplo mais recente, temos o Microsoft Bot Framework, que permite a criacão de ChatBots utilizando a linguagem de programação C# e faz uso da Web API 2 do ASP.NET MVC.
O projeto
Tenha em mente que este artigo foi escrito com a proposta de fornecer um material didático para a criação de aplicações web utilizando o ASP.NET MVC. Portanto, nada como uma aplicação simples de exemplo para tratarmos do assunto.
O projeto a ser desenvolvido consiste em uma aplicação para armazenamento de, adivinhem só, tarefas (afazeres).
Para iniciarmos, vamos começar criando nosso banco de dados no SQL Server, conforme script exibido na Figura 1. O banco de dados terá o nome de BDContatoe conterá apenas 1 tabela, chamada Contato. Esta tabela possui 3 campos (colunas), quais sejam, IdContato, gerado automaticamente e que representa a chave primária (primary key), Nomee Email, sendo estes últimos obrigatórios e do tipo string.
Desenvolvimento
1. Instalação do Visual Studio 2017 Community
Quem já tem familiaridade com o Visual Studio, pular para o tópico 2!
Para quem estiver começando o desenvolvimento e .NET, C# e Visual Studio agora, peço que faça o download do Visual Studio Community gratuitamente a partir deste link: https://www.visualstudio.com/vs/
Não explicarei o processo de instalação, mas consiste no tradicional NNF (Next, Next and Finish). O Visual Studio 2017 traz diversos recursos, mas precisaremos apenas do ASP.NET e suas dependências. Veja a Figura 2 do que devemos selecionar na instalação.
2. Criando um projeto de aplicação web com ASP.NET MVC.
Para criarmos um novo projeto, basta seguir o fluxo normal das aplicações do sistema operacional Windows. No Visual Studio, selecione na barra de menu superior a opção File e depois New Project. A tela apresentada na Figura 3 aparecerá.
Nesta tela (Figura 3), basta selecionar o template da linguagem Visual C# Web, em seguidaASP.NET Web Application. Ao final desta tela você deverá entrar com o nome do projeto, o local onde deseja gravá-lo e o nome da solução. A solução nada mais é do que uma estrutura que permite organizar um ou mais projetos de uma maneira prática em termos de compartilhamento e manipulação de bibliotecas.
Para termos o mesmo padrão durante o desenvolvimento do projeto, coloque o nome do projeto como sendo ContatoWeb e o nome da solução como ContatoSolution .
Em seguida, ao clicar no botão OK, uma nova tela no Visual Studio se abrirá (Figura 4). Nesta tela, basta selecionar o template Vazio e logo abaixo a estrutura do projeto MVC.
3. Entendendo a estrutura do Framework ASP.NET MVC
Ao finalizar a criação do projeto, accesse o Gerenciador de Soluções e veja a estrutura do projeto. Basicamente, o projeto ASP.NET MVC contempla três diretórios principais, quais sejam, Controllers, Models e Views, os quais serão discutidos nos tópicos que se seguem.
Na Figura 5 eu apresento o diagrama de classes do projeto. Dando um explicação bem simples, as classes criadas na pasta Models realizam o acesso ao banco de dados SQL Server, enquanto que as classes criadas na pasta Controllers atuam como intermediárias entre a visão (Views) do cliente — páginas HTML (HyperText Markup Language)— e o modelo — Banco de Dados. São as classes Controller que desenvolvemos grande parte das validações e regras de negócio do sistema (não estamos considerando a aplicação de DDD — Domain Driven Design).
4. Criando as classes (entidades) que representam as tabelas do banco de dados
Uma vez que temos nosso banco de dados criado, precisamos criar as classes que a representem no sistema. Para tanto, basta clicarmos com o botão direito no diretório Models e selecionar as opções Adicionar → Classe. Na Figura 6 é apresentado o código da classe C#, chamada Contato, que representa a tabela Contato no nosso banco de dados.
Analisando o código da Figura 6, conseguimos determinar que ela está dentro do namespace ContatoWeb.Models. Não é uma questão obrigatório, mas é uma boa prática, ter os namespaces relacionados aos nomes dos diretórios do projeto.
Dentro da classe temos três propriedades, quais sejam, IdContato (int), Nome (string) e Email (string). Esta estrutura representa o que chamamos de propriedades automáticas, ou seja, o encapsulamento destes campos é tratado automaticamente pelo framework, e o que precisamos fazer é simplesmente tratar estas propriedades como se fosse atributos (sem os métodos get/set). Veja como são utilizados nas linhas 14, 15 e 16 do código apresentado na Figura 7.
5. Criando as classes Models (manipuladoras do banco de dados)
Na Figura 7 eu apresento o código da classe ContatoModel , o qual contempla os métodos responsáveis por abrir e fechar a conexão com o banco de dados, assim como inserir (create) e listar (read) os registros da tabela Contato.
Como pode ser visto no código da Figura 7, a camada Model atua no acesso e manipulação das tabelas do banco de dados SQL Server. Para tanto, far-se-á necessário utilizar o namespace System.Data.SqlClient, que contém as classes necessárias para conexão (SqlConnection), consulta (SqlCommand) e retorno dos dados (SqlDataReader) do banco de dados SQL Server.
Na declaração da classe, implementamos a interface IDisposable que contém apenas um método público: Dispose. Este método é executado sempre que a classe é "finalizada". Digo entre aspas pois, para realmente executar este método, é necessário utilizarmos a palavra chave using, como veremos mais adiante no artigo.
A ideia é que no construtor da classe realizemos a conexão com o banco de dados e no método Dispose realizemos o fechamento desta conexão. Na linha 9 temos declarado um campo privado do tipo SqlConnection. Este campo é quem controlará a conexão com o banco de dados e o chamamos de connection.
Na linha 14 instanciamos esta classe passando como parâmetro para o construtor uma string (declarada na linha 13 e que armazena a string de conexão com nosso banco de dados). Para efetivamente abrir uma conexão, utilizamos o método Open() do objeto connection (linha 15). Como é de se esperar, utilizamos o método Close() para fechar a conexão (linha 20, dentro do método Dispose).
Os métodos que realizam a inserção ou a consulta de dados na tabela são apresentados nas seções que seguem.
5.1. Recuperando os dados armazenados na tabela do banco de dados.
Na Figura 8eu apresento a implementação do método Read, que faz uso das classes SqlCommande SqlDataReader citadas anteriormente.
Na linha 3 é criada uma collection (Lista) de objetos da classe Contato. O objetivo do método é justamente retornar esta lista (linha 21) preenchida com objetos da classe Contato preenchidos com dados da tabela do banco de dados.
Na linha 5 temos a criação de um objeto da classe SqlCommand. Esta classe é responsável por executar comandos SQL no nosso banco de dados SQL Server. Para tanto, se faz necessário definir pelo menos duas de suas propriedades, quais sejam, Connection (linha 6), que indica por qual conexão com o banco de dados será executado o comando, e CommandText(linha 7), que é justamente o comando SQL a ser executado no banco de dados.
Como o objetivo deste método é retornar uma lista com informações do banco de dados, realizamos uma consulta (SELECT * FROM Contatos). A execução desta consulta SQL é feita na linha 9 e é armazenada num objeto da classe SqlDataReader. A execução do método ExecuteReader do objeto cmd nos retorna um cursor que permite percorrer o resultado do da consulta realizada. Para percorrer então o resultado, utilizando a estrutura de repetição while (linha 11).
Dentro desta estrutura de repetição, temos o objeto reader apontando (por isso ser um cursor) para um registro da tabela do nosso banco de dados, ou seja, se tivermos dois registros na tabela Contato, este laço será executado duas vezes e, a cada execução, retornará uma linha da tabela. Obtendo o registro da tabela, simplesmente criamos um objeto da classe Contato (linha 13) e definimos os valores de suas propriedades com os dados do cursor reader (linhas 14, 15 e 16). Não entrarei em detalhes neste artigo, mas o que precisamos entender é que uma tabela pode possuir campos (colunas) com diversos tipos de dados, mas para recuperamos temos apenas o objeto reader. Para resolver este impasse, utilizamos o polimorfismo . Fique ligado, em breve escreverei um artigo sobre como os Power Rangers entram nisso.
Dentro do laço, por fim, adicionamos o objeto da classe Contatona nossa Collection, a qual é retornada do método na linha 21.
5.2. Criando, atualizando e apagando registros na tabela do banco de dados.
Na Figura 9 eu apresento o método para criar registros na nossa tabela Contato do Banco de Dados.
Comparado ao método Read (Figura 8), podemos ver que o método Create (Figura 9) é mais simples, pois não precisamos receber nada da base de dados, ou seja, estamos realizando uma manipulação e não consulta. Consequentemente, o método não tem retorno.
Em contrapartida, temos parâmetros que devem ser enviados pelo comando SQL (linhas 7 e 8), tais como o nome e o e-mail do contato. Mas e o IdContato? Pois bem, se nos atentarmos ao script SQL da Figura 1, verificamos que a chave primária é identity, ou seja, gerada automaticamente pelo SQL Server.
Na linha 5, o comando SQL possui duas variáveis que serão preenchidas em tempo de execução pelos valores informados nas linhas 7 e 8. Cada variável possui um apelido (alias), ou seja, @nome e @email. Isso é feito para evitarmos SQL Injection.
Nas Figura 10 e 11 eu apresento os métodos Update e Delete, respectivamente. Não serão tratados neste artigo, mas é fácil verificar que a implementação dos métodos que manipulam uma tabela no banco de dados segue em padrão.
Apenas uma observação. Na Figura 10, verificamos que eu usei @id como nome do parâmetro, mas o valor foi da propriedade IdContato do objeto contato. Portanto, não precisamos ter o mesmo nome do parâmetro e o nome da propriedade, mas é uma boa prática para facilitar posteriores manutenções no código.
Com os códigos apresentados até aqui temos a classe ContatoModel pronta para ser utilizada em nosso projeto. Uma vantagem em separar o projeto em camadas, como feito aqui, é justamente a possibilidade de isolar suas implementações, ou seja, uma vez que temos a classe ContatoModel pronta, podemos manipular o banco de dados usando os métodos da classe sem ter que nos preocupar com suas implementações. Além disso, se num futuro desejarmos alterar a manipulação do banco de dados de ADO.NET para o Entity Framework, basta alterar apenas esta camada.
6. Criando o Controller
Uma vez que temos a camada Models pronta, trabalharemos com a classe Controller, a qual utilizará os métodos da classe Model para enviar ou recuperar dados do banco de dados para o usuário, a partir de uma interface desenvolvida em HTML (Views).
Para criar uma classe Controller basta clicar com o botão direito no diretório Controllers e selecionar a opção Adicionar → Controller. A tela exibida pelo Visual Studio dará a opção de selecionar o tipo de Controller. Trabalharemos neste artigo com a primeira opção: Controller MVC vazio.
Em seguida será perguntado o nome da classe. É importante notar que o Visual Studio deixa pronto para você editar apenas o prefixo, mantendo assim o sufixo Controller. Este é apenas um padrão do framework, mas acho interessante mantê-lo por questões de documentação. Para seguirmos o padrão do nosso projeto, coloque o nome desta classe de ContatoController.
Criada a classe, é possível reparar que o Visual Studio automaticamente criou um diretório chamado Contato dentro do diretório Views. Isso significa que cada Controller possui suas Views específicas. No nosso caso, no tópico 7, trabalharemos com duas Views, quais sejam, Index e Cadastro.
Na Figura 12 é apresentado o código gerado pelo Visual Studio seguindo as etapas anteriores. É importante ressaltar que a classe ContatoController herda da classe Controller(linha 7). Isto nos permite manipular as requisições HTTP (HyperText Transfer Protocol) com um alto nível de abstração, ou seja, ao invés de lidarmos com Request/Response e Get/Post, trabalhamos com invocação e retorno de métodos.
É possível trabalharmos num baixo nível de abstração e, aliás, fazemos muito isso quando trabalhamos com Web APIs, mas foge do escopo deste artigo.
Os métodos da classe ContatoController são chamados também de Action e têm como retorno uma ActionResult. Uma ActionResult retorna uma resposta para o cliente, seja ela uma View (que corresponde a uma página HTML, como no caso dos métodos Read (linha15) e Create (linha 22) ou um redirecionamento para uma Action como na linha 35.
As Actions, juntamente com os Controllers formam as URLs da aplicação. Por exemplo, se executarmos o projeto e digitarmos no navegador a URL http://localhost:1234/contato/create teremos o método Create (declarado na linha 20) executado. Se digitarmos a URL http://localhost:1234/contato/index teremos o método Index da linha 10 executado.
Temos 3 métodos na classe ContatoController , quais sejam, Index, Create e Create. Espere aí! Dois métodos Create? Oras pois, sim! Retomando os conceitos de Orientação a Objeto, o que temos neste caso é uma sobrecarga de métodos, os quais se diferenciam pela quantidade ou tipo de parâmetros — neste caso, pela quantidade de parâmetros. Repare que na linha 20, a declaração do método Create não recebe parâmetros. Já na linha 26, a declaração do outro método Create recebe um objeto da classe FormCollection.
Em relação ao método Create, como é uma ação a ser executada pelo Controller, a sobrecarga não é suficiente para diferenciá-los. Portanto, o primeiro método Create tem o atributo [HttpGet] que indica que ele aceitará requisições por Get (por exemplo, quando chamado a partir de links ou executados ao digitar o caminho na barra de endereço do navegador). No segundo método (linha 25), tem-se o atributo [HttpPost] o qual indica que este método só será executado quando foi chamado a partir de uma requisição por Post (consideraremos que a única maneira de realizar uma requisição por Post é quando submetermos um formulário com o atributo method igual a post). Veremos as chamadas mais adiante no tópico 7 (Criando as Views).
7. Criando as Views
Certo, chegamos até este ponto e sabemos que ao solicitar a URL http://localhost:1234/contato/index teremos o método (Action) Index executado. Mas qual será a View? Ou seja, qual a página HTML será exibida. Vamos criá-las.
Clicando com o botão direito dentro das Actions o Visual Studio nos dá a opção Add View que realiza a criação da View. Esta View nada mais é do que uma página HTML. Bom, na verdade, é uma mistura de HTML e C# (daí a extensão ser .cshtml. Este junção consiste numa tecnologia chamada Razor.
Criando nossa primeira View (Index), temos o código apresentado na Figura 13. Um primeiro ponto a destacarmos é o código entre as linhas 1 e 3, que corresponde a um código C#. A instrução Layout=null simplesmente indica que não utilizaremos um LayoutPage (matéria de outro artigo).
Porém, esta página ainda é estática e nosso objetivo é torná-la dinâmica a ponto de exibir e montar uma tabela com os dados enviados para ela (uma lista de objetos da classe Contato — linha 15 da Figura 12). Veja como é simples o código para tornar nossa página dinâmica (Figura 14).
Na linha 1 agora temos a definição do modelo de dados que esta página receberá, ou seja, estamos indicando que ela receberá uma collection de objetos da classe Contato. Pronto. A partir de agora podemos utilizar a palavra reservada Model que conterá nossa collection List<Contato>.
Para percorrê-la, basta utilizarmos a instrução foreach da linguagem C#, mostrada na linha 15. Repare que criamos um laço que será executado de acordo com a quantida de objetos em nossa lista. Em cada execução do laço, um código html que representa uma linha da tabela será criada e conterá três colunas, quais seja, IdContato, Nome e Email.
Para concluirmos o projeto, temos a View Create.cshtml apresentada na Figura 15. O código apresenta um simples form, mas o mais importante é ressaltar os atributos action e method. Repare que o formulário submete os dados Nome e Email para a action Create, mas usando o método post. Portanto, será executado o segundo método Create que contém o atributo [HttpPost], sendo que o objeto form conterá estes dados (linhas 29 e 30 da classe ContatoController).
Que bom, consegui! (Espero que esta seja sua resposta final). Mas veja o sistema, bonito, não é? Não. Como costumo dizer aos meus alunos, é funcional, mas nada que dê para mostrar e receber um elogio da tia ou primo. (Vó e mãe não contam, pois elas sempre dizem que está lindo tudo que fazemos rs). Piadas à parte, seria bom adicionar o clássico e famoso Bootstrap (CSS). Fica a dica!
Considerações Finais
É isso. Espero que tenha gostado do artigo e que este possa lhe auxiliar no desenvolvimento inicial do seu projeto em ASP.NET MVC. Preencha seu e-mail abaixo e fique sabendo de novos artigos em primeira mão.
Grande abraço e até o próximo artigo!
Prof. Dr. Henrique Dezani
