Neste artigo veremos a parte M, “Modelo”, do aplicativo MVC. O exemplos mostrará como gerenciar filmes em um banco de dados.

Criando Modelos (Models)

Esta é a parte mais complexa do modelo MVC. Ao menos para quem está iniciando. É que os modelos são classes que utilizam o chamado Entity Framework Core (EF Core) para se conectar “fisicamente” com o banco de dados (database). O EF Core é que literalmente acessa as bases de dados. O EF Core é uma estrutura de mapeamento objeto-relacional (ORM – object-relational mapping) que simplifica o código de acesso a dados que você precisa escrever. O EF Core suporta muitos mecanismos de banco de dados. Mas note, são bancos de dados relacionais (como MS SQL, MYSQL e outros SQLs – Structured Query Languages). Não tem nada a ver com NoSQL, Voldemort, MongoDB, Tokyo Tyrant e CouchDB, que são bancos de dados não-relacionais).

Se você gosta de aprender escrevendo código, a Microsoft recomenda um de seus guias de Introdução para que você comece a aprender bem o que é o EF Core (prepare-se, são 101 artigos em inglês!).

Muito bem, os modelos que criamos na verdade são classes. Eles apenas definem as propriedades dos dados que serão armazenados no banco de dados. As classes que escrevemos são nossos modelo, também conhecidos como modelos POCO, que usam – no caso do Core MVC – o Entity Framework Core para fazer 3 grandes trabalhos:

• Você pode não ter banco de dados algum e resolve escrever todas as classes do seu modelo de negócio primeiro. A partir dessa classe, em puro texto, o EF Core ajuda a construir o database, tabela por tabela, índice por índice, sem que você tenha de fazer isso…
• Você já tem o database prontinho antes de começar a escrever sua aplicação (populado ou não com dados). O EF Core consegue ler essas tabelas e escrever para nós todas as classes POCO… Ou seja, gera todos os modelos a partir do database.
• Se, durante o desenvolvimento da sua aplicação você for alterando as classes (acrescentado, eliminando ou alterando campos de suas tabelas relacionais, ou criando novas relações, o EF Core permite manter a integridade entre suas classes alteradas e o banco de dados físico. Ou seja, o database é sempre um espelho das suas classes dentro da aplicação.

Parece um pouco mágico, mas é isso mesmo. Quem odeia banco de dados, começa pelas classes. É o jeito chamado “Classes Primeiro” (classes first). Quem gosta de banco de dados, em geral começa pelo database e depois o acopla à aplicação (“Database First“).

Neste tutorial escreveremos primeiro as classes do modelo e o EF Core criará o banco de dados para nós. ASP.NET Core – Banco de Dados Existente.

Adicionando uma classe de modelo de dados

Nota: Os modelos ASP.NET Core 2.0 já implementam a pasta Models (Modelos). No Solution Explorer, clique com o botão direito do mouse no projeto MvcMovie> Add > New Folder. Nomeie a nova pasta  como Models.

Clique com o botão direito na pasta Models. Escolha > Add > Class. Nomeie a classe como Movie e adicione as seguintes propriedades:

O campo ID é requerido pelo banco de dados para a chave primária. Sempre que você usa ID, o EF Core interpreta que esse campo é chave e você não se preocupa em definir isso.

DICA: se você quando estiver modelando for usar uma chave com um nome diferente de ID, você pode forçar a barra e definir que o campo é chave, colocando, antes de sua linha, a expressão [Key] (sim, entre colchetes e com K maiúsculo. Nesse caso, é preciso incluir using System.ComponentModel.DataAnnotations;. Se você esquecer, o Visual Studio vai lhe sugerir rapidinho. Veja como ficaria:

DICA: Note que todos os nomes de campos começam com letra maiúscula. Essa é uma convenção no Core MVC. Acostume-se a seguir essa convenção e você evitará avisos de “warning” (alerta) quando compilar a aplicação…

DICA 2: Sempre que criar ou alterar qualquer modelo. logo em seguida clique em Build > Solution ou em Build > NomeDoSeuProjeto. Primeiro, isso ajuda a verificar se o projeto está sem erros. Segundo, será impossível continuar e gerar o banco de dados sem fazer o Build primeiro (muita gente se atrapalha com isso).

DICA 3: É possível (além do menu te topo), ir na janela do Solution Explorer, clicar com o botão direito no Nome do Projeto e escolher o opção Build.

Pronto. Temos nosso primeiro Modelo da nossa aplicação MVC;

clique com o botão direito do mouse na pasta Controladores> Adicionar> Controlador.

Scaffolding um Controlador (ou seja, gerando um arquivo tipo controler)

Não tenho uma palavra para Scaffolding ´então prefiro deixar a palavra em inglês mesmo. O Scaffold faz uma varredura no arquivo da classe de um modelo que você escolhe e permite gerar o arquivo controlador (controller).

Depois que você fez o Build assim que definiu o modelo, no próprio Solution Explorer clique no folder Controllers (que normalmente é instalado pelo template do Visual Studio), clique com o botão direito do mouse e escolha Add > Controller (esqueça outras opções por enquanto).

Na janela que vai aparecer, (Add MVC Dependencies), selecione Minimal Dependencies e clique em Add.

Quando você implementa os modelos, o Visual Studio precisa que você adiciona as dependências necessárias para implementar um controlador (que são necessárias para o Scaffold). Senão o controlador não é criado, digamos, “automaticamente”.

Por isso é preciso a clicar na pasta de controladores (Controllers) e escolher Add > Controller.

No nosso caso, depois de definir Minimal Dependencies, como estamos iniciando a solução, o Visual Studio implementa as dependências na primeira vez que você pede para adicionar um controlador.

A mancada é que é preciso pedir de novo, pois agora ele tem as dependências e não vai mostrar a janelinha de Add MVC Dependencias.

Volte para o Solution Explorer, clique na pasta Controllers e com o botão direito do mouse escolha Add > Controller.

Na janela Add Scaffold, escolha a opção MVC Controller with Views, using Entity Framework e depois clique em Add.

DICA: Tem muita gente que se perde e não acha o tal Add… De fato o Add desaparece se você está “debugando” a aplicação. Saia do modo debug e tudo aparece novamente… O Visual Studio é bem espertinho e nas versões mais recentes não permite nem que você edite a página aberta de um arquivo Model ou de um arquivo Controller. A única coisa em que pode editar durante o debug são páginas de Views, pois aí não é necessário recompilar e você pode ver de imediato no navegador as alterações nas páginas .cshtml simplesmente dando um refresh (F5 ou CTRL+F5) no navegador. Nas páginas com .cs, nem sonhar editar em modo debug.

Aparecendo a janela Add Controller:

• Model Class (classe do modelo): defina Movie no select (MvcMovie.Models)
• Data context class: selecione o ícone de + e adicione o default (padrão) MvcMovie.Models.MvcMovieContext

• Views: fique com o default (padrão) de cada opção selecionada
• Controller name: dique com o default (padrão) MoviesController
• Clique em Add.

O Visual Studio cria:

• Uma classe de contexto do banco de dados Entity Framework Core (Data/MvcMovieContext.cs)
• Um controlador para Movies (Controllers/MoviesController.cs)
• As páginas de visualização (Views Razor)  para Create, Edit,Delete, Detais e Index (Criar, Excluir, Detalhes, Editar e Índice). Esses arquivos podem ser visualizados no Diretório Views na pasta MOvies (que também foi criado pelo Scafold): View/Movies/*.cshtml.

O processo de scaffolding também gerou o arquivo controlador (controller) e, dentro dele, todas as ações (Actions) para fazer o chamado CRUD (create, read, update, e delete). Aliás, o CRUD do Visual Studio é mais “amplo”, pois inclui a página índice (Index) e um método simples para testar se existe ou não algum dado no banco de dados na tabela referente a esse modelo que originou o controlador (controller).

Em breve teremos uma aplicação web totalmente funcional que permite gerenciar uma base de dados de filmes. Nesse momento, se você executar o aplicativo e clicar no link MvcMovie, você receberá um erro semelhante ao seguinte:

É que  começamos este projeto no modo “odigo primeiro, banco de dados depois”. Ainda não existe, fisicamente, o database.

Para gerarmos o database, usaremos um recurso poderoso do EF Core, chamado Migrations.

Migrations, entre outras coisas, permite que você crie um banco de dados que corresponda ao seu modelo de dados. E que também atualize o esquema do banco de dados sempre que seu modelo de dados mudar. Ou seja, ao alterar uma classe de um modelo existente ou ao acrescentar uma nova classe, você roda o Migrations (Migrações) e literalmente ele migra as mudanças para o banco de dados (database). Essa sincronização que é feita pelo Migrations permite espelhar todas as mudanças que você efetivar, mantendo a integridade entre  a aplicação e a base de dados. Inclusive se você fizer uma mudança que não deveria ter feito, é possível migrar para trás, ou seja, voltar a qualquer estado anterior… É poderoso.

DICA: Se você for curioso, vai ver que além de criar a pasta Data/Migrations dentro da sua aplicação, onde cada migração é guardada, a ferramenta Migrations também cria uma tabela Migrations no seu banco de dados, onde armazena dados e horários de todas as migrações realizadas.

Adicionando ferramentas de EF e executando a migração inicial

Pode ser que você já tenha instalado as ferramentas de EF Core na instalação do Visual Studio 2017. Mas não custa nada verificar.

Nesta seção, você usará o Package Manager Console (PMc – Console do Gerenciador de Pacotes) para:

• Adicionar o pacote Entity Framework Core Tools. Este pacote é necessário para adicionar migrações e atualizar o banco de dados.
• Depois, adicionar uma migração inicial.
• Depois, atualizar o banco de dados com a migração inicial.

No menu Tools (Ferramentas), selecione NuGet Package Manager > Package Manager Console (Console do Gerenciador de Pacotes).

Vai aparecer uma janela (em geral na parte de baixo do Visual Studio) com o nome de PMC. Nesta janela você vai fazer as 3 ações acima, cada linha mostrada abaixo corresponde a uma ação acima.

DICA: se você não achar o PMC no menu de Tools (Ferramentas), é muito provável que esteja em DEBUG… Saia do modo DEBUG e o PMC irá reaparecer. O VIsual Studio não permite instalar pacotes no modo DEBUG…

Digite exatamente como aparece no exemplo abaixo:

Nota: veja CLI approach (abordagem) se você tiver problemas com o PMC.

O comando Add-Migration cria um código para criar o esquema inicial do banco de dados.

O esquema é baseado no modelo especificado no DbContext (no arquivo *Data/MvcMovieContext.cs).

O argumento Initial (inicial) é usado para nomear as migrações. Você pode usar qualquer nome, mas, por convenção, você escolhe um nome que descreve a nova migração que estiver fazendo. Consulte Introdução às migrações para obter mais informações.

O comando Update-Database executa o método Up no arquivo Migrations /<time-stamp>_InitialCreate.cs, que cria o banco de dados.

Você também pode executar os passos anteriores usando a interface de linha de comando (CLI) em vez do PMC: Para isso é necessário:

• Adicione  EF Core tooling (ferramentas do EF Core) ao arquivo .csproj.
  DICA: Para fazer a edição do arquivo, vá em Solutions Explorer, clique no nome do Projeto e com o botão direito do mouse escolha a opção Edit .cspoj. Eu já fiquei procurando esse arquivo, mas ele não fica visível no diretório raiz dentro do Visual Studio.
• Execute os seguintes comandos do console (no diretório do projeto), depois que instalar a ferramenta:

Testando a App

• Execute o aplicativo e clique no link MvcMovie.
• Clique no link Create (Criar) e crie novo um filme.

• Você pode não conseguir inserir pontos decimais ou vírgulas no campo Price (Preço). Para suportar a validação jQuery para locais que não são ingleses e que usam uma vírgula (“,”) no lugar de um ponto decimal, ou para usar formatos de data diferentes do que se usa nos EUA-Inglaterra, você deverá tomar algumas medidas para globalizar seu aplicativo. Consulte Recursos Adicionais para obter mais informações. Por enquanto, basta inserir números inteiros como 10.
• Em algumas localidades você precisa especificar o formato da data. É possível fazer isso no próprio arquivo do modelo. Veja o código destacado abaixo.

(Vamos falar sobre DataAnnotations mais tarde no tutorial).

Ao clicar  em Create, preencher os dados e enviar,fizemos o form (formulário) ser postado para o servidor, onde as informações do filme foram salvas no banco de dados. O aplicativo redireciona para a URL /Movies, onde as informações do filme recém-criadas são exibidas (na verdade, este é o Arquivo Index.cshtml).

Crie mais algumas entradas de filmes. Experimente os links Edit, Detais e Delete (Editar, Detalhes e Apagar), que são todos funcionais.

Injeção de dependência (Dependency Injection)

No diretório raiz do projeto, abra o arquivo Startup.cs e examine o método ConfigureServices:

O contexto do banco de dados é usado em todos os métodos CRUD dentro do controler, usando a variável _context. O formato em geral é:

_context.NomeDoModelo.AlgumaCoisaASerFeita... (pegar todos dados, pegar o primeiro item da tabela, o último, filtrar alguns dados, etc)

Note que em nenhum momento foi feito um chamado para conexão ao bando de dados e menos ainda para abrir ou fechar uma conexão. Isso faz parte dos serviços implantados no arquivo Startup.cs aonde, além do contexto ser definido, pode-se passar os parâmetros de conexão ao servidor. A vantagem é que na programação você se esquece do mundo físico e, através dos contextos, apenas acessa os dados da tabela que quiser, sem se preocupar e nem escrever uma única linha sobre conexões. Uma vez que seu database é injetado na aplicação, fica disponível para qualquer controlador. (Controller).

Contextdestacado acima mostra o contexto do banco de dados do filme que está sendo adicionado ao contêiner de Injeção de Dependência. A linha que segue os serviços.AddDbContext <MvcMovieContext> (opções => não é mostrada (veja seu código). Especifica o banco de dados a ser usado e a seqüência de conexão. => É um operador lambda. Abra o arquivo Controllers / MoviesController.cs e examine O construtor:

Passando dados dos Controladores (Controllers) para os Visualizadores (Views)

Existem três maneiras de passar informações de um controlador  (Controller) para um visualizador (View) em ASP.NET:

• Como um modelo de modelo fortemente digitado (os dados são empacotados de acordo com a definição do modelo e seus relacionamentos;
• Como um tipo dinâmico (usando @model dynamic);
• Usando o ViewBag ou ViewData (ambos são dinâmicos também).

Vamos nos concentrar na primeira opção.

Modelos fortemente digitados e a palavra-chave @model

No início deste tutorial, você viu como um controlador pode passar dados ou objetos para uma visualização usando o dicionário ViewData.

O dicionário ViewData é um objeto dinâmico que fornece uma forma conveniente para transmitir informações a uma visualização. O MVC também fornece a capacidade de passar objetos de modelo fortemente digitados para uma visualização. Esta abordagem fortemente digitada permite uma melhor verificação de tempo de compilação do seu código. O mecanismo de “scaffolding” usou essa abordagem (ou seja, passando um modelo fortemente digitado). Pegando a classe MoviesController, criou os métodos (Acttions dos Controllers)  e os visualizadores (as Views). Olhando o método da ação Details, gerado no arquivo Controllers/MoviesController.cs, encontramos:

Passando dados para Controladores (Controllers) através de Rotas (Routes)

O parâmetro id é geralmente passado para o controlador junto com dados de rota (podem ser passados vários parâmetros no formato rota/parâmetro 1/parâmetro 2/parâmetro n…).

Por exemplo, http://localhost:1234/movies/details/1 define:

• O controlador, no caso Movies. O controlador é sempre o primeiro segmento da rota (route). Observe que não é preciso passar o nome completo do arquivo controlador, que é MoviesController.cs. O MVC é espertinho e ele mesmo acrescenta Controller.cs ao primeiro nome da rota.
• A ação (Action), que neste caso é Details (a ação é sempre o segundo segmento da rota).
• O id que neste caso é 1 (o último segmento da rota – ou URL). Os parâmetros sempre são a última parte da rota.

Também podemos passar o id com uma seqüência de consulta, tipo GET, que tão bem conhecemos:

http://localhost:1234/movies/details?id=1

Nem sempre precisamos passar um parâmetro para uma página e há casos em que eles são opcionais. Passamos o parâmetro quando queremos filtrar, de alguma forma, os dados da visualização. E não passados quando queremos ver ou poder consultar todos os dados do modelo.

Nestes casos, o parâmetro id é definido como um tipo nullable (valor que pode ser nulo). Por isso é que no método da ação Details, acima,  (int? id). Na prática isso é uma abreviação: int?  significa que se a Ação (action) não receber um inteiro, vai ter valor nulo (null).

No nosso exemplo, ao Clicar em Details na View Index.html (que lista todos os filmes). queremos ver os detalhes de um (apenas um) filme específico.

A URL que vai ser entregue para o controlador terá o seguinte formato:

http://localhost:1234/movies/details/<IdDoFIlmeQueEscolhemos>

Clicando a View, o MVC escolhe o controlador (Controller), escolhe a ação (Action) e entrega o parâmetro id. Agora quem tem de trabalhar é o controlador. Observe o código abaixo:

O controlado precisar ir buscar esses dados no nosso modelo: _context.Movie diz aonde estão os dados que deve pegar.

Esta id – em tese – deve corresponder a um único filme, uma vez que id é campo chave (Key) e não tem repetição.

.SingleOrDefaulAsync() diz mais ou menos o seguinte: procure o primeiro “registro” onde encontrar  a id e pare por aí (como se fosse um “Select Top(1) from Movies). E se não achar nada? Então retorne um valor nulo (null) como padrão (Default).

E onde está o Where? Está na expressão que usa o lambda =>: (m => m.ID = id). Que ajuda a completar o select, que seria assim: “Select Top(1) from Movies as m Where m.ID = id” .

As leituras feitas pelo controlador podem ser síncronas ou assíncronas. O scaffolding, na montagem do controller, sempre que possível, define leituras assíncronas. Assim a execução do program não empaca na linha que pede os dados, até que o servidor os retorne, pois pode seguir adiantante. Por isso a palavra await antes de _context.Movie. É uma ordem tipo vai buscar esses dados e me devolva assim que puder). Por isso, ao pedir um único registro, a expressão .SingleOrDefaultAsync().  Então, se usar awat (algo como reserva aí!) o tipo de solicitação sempre tem Async como pós-fixo.

Note, também, que a própria ação (Action), na definição de Detail, contém public async Task…

Devolvendo os dados para o Visualizador (View)

A variável movie, no código acima, é que acaba guardando uma instância do modelo Movie. Essa instância, com os dados já lidos, é passada como um  modelo completo para o visualizador (View) Details:

Examine o conteúdo do arquivo Views/Movies/Details.cshtml :

Ao incluir a instrução @model logo no topo do arquivo de exibição, você pode especificar o tipo de objeto que o visualizador (View) espera e deve receber. Assim como criou o controlador (Controller) de filmes (MoviesController.cs), o Visual Studio incluiu automaticamente a instrução @model na parte superior dos arquivos de visualização (Views) que gerou. No caso, em Details.cshtml:

Esta diretiva @model permite que você acesse o filme que o controlador devolveu para o visualizador (View) usando um objeto de modelo “fortemente digitado”.

Por exemplo, no visualizador Details.cshtml, o código passa cada campo de do modelo de Movie (filme) para o DisplayNameFor e o DisplayFor, que são na verdade HTML Helpers que podem trabalhar, diretamente, com os nome dos campos do modelo “fortemente digitado”. basta usar,dentro dos parênteses de cada Helper,  a expressão model => model.NomeDoCampoFortmenteDigitado.

Os métodos e visualizações Create (Criar) e Edit (Editar) também passam um objeto do modelo Movie (Filme) .

Se você examinar o visualizador Index, arquivo Index.cshtml, notará algumas diferenças. O objetivo da página Index é apresentar a lista de Filmes que já foram registrados. Logo, o controlador Movies, na ação (Action) Index, tem de buscar no seu database uma LISTA de filmes – e não apenas um único filme, como nos casos de Details (Detalhes) e Edit (Edição).

O código passa esta lista de Filmes do método da ação (Action) Index para o visualizador (VIew) Index:

O controlador recebe uma solicitação na ação (Action) Index sem nenhum parâmetro. Obviamente, se sua base de dados estiver populada, haverá um conjunto de filmes. O comando acima devolve, de forma assíncrona, em formato de Lista, todos os itens encontrados (pois não foi estabelecida nenhuma cláusula tipo Where ou tipo Top(X)).

Repare que no visualizador (View) Index, o scaffolding incluiu no topo a expressão IENumerable. Ou seja, o visualizador espera receber um modelo que é uma lista – e não um único elemento para editar ou mostrar detalhes.

Esta diretiva @model IENumerable permite que você transfira a lista de filmes que o controlador (Controller) passou para o visualizador (View), usando um modelo de objeto “fortemente digitado”. Portanto, é possível usar HTML Helpers tendo diretamente o nome dos campos do modelo, como já vimos acima: (model => model.NomeDoCampoDesejado).

O segundo ponto: o visualizador não sabe quantos itens virão na lista entregue pelo controlador. Por isso, o código em Index.cshtml deve percorrer o modelo recebido – capturando os filmes. Isso é feito com a instrução foreach – que também usa os nomes dos campo de nosso modelo fortemente digitado. O foreach, no caso do Index.cshtml abaixo, pega cada item recebido, guarda numa variável local chamada item e permite apresentar os dados dentro de um “loop” que acaba quando for mostrado o último item da lista.

Como o nosso Modelo é um objeto “fortemente digitado” (como um objeto IEnumerable<Movie>), cada item no “loop” é digitado como Movie. Entre outros benefícios, isso significa que você obtém ganha tempo na geração e compilação código. Você tem auxílio do Visual Studio para lembrar o nome de todos os campos do seu modelo:

Recursos Adicionais

• Tag Helpers
• Globalization and Localization

Tutorial Completo:

Crie um aplicativo da Web com ASP.NET Core MVC no Windows usando ASP.NET Core MVC e Visual Studio 2017

1. Começando com com ASP.NET Core MVC no Windows usando ASP.NET Core MVC e Visual Studio 2017
2. Adicionando um controlador (controller) a um aplicativo ASP.NET Core MVC com o Visual Studio 2017
3. Adicionando um visualizador (view) a um aplicativo ASP.NET Core MVC com o Visual Studio 2017
4. Adicionando um modelo (model) a um aplicativo ASP.NET Core MVC com o Visual Studio 2017

Referências:

1. Adding a model to an ASP.NET Core MVC app – Microsoft – By Rick Anderson and Tom Dykstra
2. Adding a view to an ASP.NET Core MVC app – Microsoft
3. Adicionado um controlador (controller) a um aplicativo ASP.NET Core MVC com Visual Studio 2017
4. Crie um aplicativo da Web com ASP.NET Core MVC no Windows – Microsoft

Obrigado pela sua leitura. Continue visitando este blog e compartilhe artigos em sua rede de relacionamento. Por favor, se quiser, registre sugestões e comentários ao final da página.