Neste artigo eu vou mostrar como criar uma aplicação ASP .NET Core MVC usando o VS 2017. |
Continuando a terceira parte do artigo vamos definir um modelo de domínio, o Model da nossa aplicação, criando algumas classes para gerenciar filmes em um banco de dados.
Vamos
utilizar a tecnologia de acesso a dados do .NET Framework conhecida como
Entity Framework Core para definir e trabalhar com
essas classes de modelo de dados. O Entity Framework Core (EF Core para os
íntimos) apresenta um paradigma de desenvolvimento chamado Code First.
Esse paradigama funciona assim: Você escreve o código e as tabelas
do banco de dados são criadas a partir desse código.
O Code
First permite que você crie objetos de modelo de dados escrevendo classes
simples (conhecidas como classes POCO - Plain Old CLR Objects) e, o banco de dados
será criado a partir de suas classes.
Obs : Se você precisar criar primeiro o banco de dados, você ainda
pode seguir este tutorial para aprender sobre MVC e o desenvolvimento app EF.
Nota: Se você não conheçe nada sobre o Entity Framework sugiro que leia este artigo : Introdução ao Entity Framework - Macoratti
Criando as classes do modelo de dados (Model)
Selecione o projeto MvcFilme na janela Solution Explorer e no menu Project clique em Add ->New Folder e informe o nome Models.
Clique com o botão direito sobre a pasta Models e a seguir clique em Add -> Class e informe o nome Filme e clique no botão Add;
A seguir inclua o código abaixo nesta classe definindo as propriedades : ID, Titulo, Lancamento, Genero e Preco;
Além das propriedades inerentes ao filme, o campo ID é requerido para identificar o filme e para mapear para a chave primária do banco de dados que será criado a partir dessa classe.
Compile o projeto antes de prosseguir.
Criando um controlador
Agora clique com o botão direito do mouse sobre a pasta Controllers, e a seguir clique em Add -> Controller;
Na janela Add MVC Dependencies selecione a opção - Minimal Dependencies e clique no botão Add;
O VS 2017 vai adicionar as dependências necessárias para montar o controller. (Você pode deletar o arquivo ScaffoldingReadMe.txt criado)
Após isso repita o procedimento e clique com o botão direito do mouse sobre a pasta Controllers, e a seguir clique em Add -> Controller;
Na janela Add Scaffold selecione a opção : MVC Controller with views, using Entity Framework :
Clique no botão Add.
Agora na janela Add Controller vamos fazer as seguintes definições :
Model Class : Selecione Filme(MvcFilme.Models)
Data context class : clique no botão + e selecione MvcFilme.Models.MvcFilme.Context e clique no botão Add;
Mantenha as demais opções com seus valores padrão conforme abaixo e clique no botão Add:
O
mecanismo de scaffolding do Visual Studio vai criar :
- Um controlador filmes (Controllers/FilmesController.cs)
- Os métodos Create, Delete, Details, Edit e Index e as respectivas View Razor
(.cshtml) (Views/Filmes)
Assim, o VS criou automaticamente os métodos Actions CRUD (criar, ler, atualizar
e excluir) e as views para você. Veja na figura abaixo:
A aplicação ainda não esta pronto para ser testada. Vamos continuar...
Incluindo a referência ao Entity Framework
Clique com o botão direito do mouse sobre o nome do projeto MvcFilme e a seguir clique em Edit MvcFilme.csproj:
A seguir inclua as referências aos pacotes :
em ItemGroup conforme mostra a figura abaixo:
Atualizando o banco de dados
Vamos agora abrir uma janela de prompt de comandos. Existem diversas formas de fazer isso. (Estou usando o Windows 10)
No Windows 10, uma delas é usar o atalho Win+X :
Com a janela de comandos aberta posicione-se no diretório onde você criou o projeto da aplicação ASP .NET:
No meu exemplo a pasta do projeto esta localizada em : C:\_aspncore\MvcFilme\MvcFilme
A seguir execute os seguintes comandos na sequência abaixo esperando que cada um termine a sua execução :
dotnet restore
dotnet ef migrations add Initial
dotnet ef database update
Vamos entender o que esses comandos fazem...
- dotnet (.NET Core) é uma implementação cross-platform da plataforma .NET. (veja detalhes aqui)
- dotnet restore - faz download dos pacotes Nuget especificados no arquivo .csproj do projeto;
- dotnet ef migrations add Initial - Executa o comando de migração Entity Framework .NET Core CLI e cria uma migração inicial. O parâmetro initial é arbitrário, mas usado para a primeira migração do banco de dados . Esta operação cria o arquivo Data/Migrations/<date-time>_Initial.cs contendo os comandos de migração para adicionar(ou apagar) a tabela Filme do banco de dados.
- dotnet ef database update - Atualiza o banco de dados com a migração recém criada no item anterior:
Ao final da execução destes comandos já podemos testar a nossa aplicação...
Testando a aplicação
Executando a aplicação e clicando no link - Filmes do macoratti :
Será aberta a página de filmes vazia pois não temos nenhum filme cadastrado ainda. Clique no link Create New:
Informe os dados do filme e clique no botão Create:
Pronto. Temos o filme exibido conforme abaixo:
Lembrando que você pode alterar os textos das páginas gerados pelo scaffolding. Para isso basta abrir as respectivas views na pasta Views/Filmes.
Dando uma espiada no código gerado
Abra o arquivo Startup.cs e observe o código destacado abaixo no método ConfigureServices() :
....
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
// Add framework services.
services.AddMvc();
services.AddDbContext<MvcFilmeContext>(options =>
options.UseSqlServer(Configuration.GetConnectionString("MvcFilmeContext")));
}
....
|
Este código mostra o contexto do banco de dados Filme - MvcFilmeContext - sendo adicionado ao contâiner de injeção de dependência nativa da ASP .NET Core.
Abra agora o arquivo FilmesController.cs na pasta Controllers:
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using MvcFilme.Models;
using System.Linq;
using System.Threading.Tasks;
namespace MvcFilme.Controllers
{
public class FilmesController : Controller
{
private readonly MvcFilmeContext _context;
public FilmesController(MvcFilmeContext context)
{
_context = context;
}
.....
|
Neste código vemos que o construtor usa a Injeção de dependência para injetar o contexto do banco de dados no controlador. Assim, o contexto do banco de dados é usado em cada método CRUD no controller.
Model fortemente tipado e a palavra-chave @model
Já falei sobre como passar dados ou objetos do controlador para uma view usando o dicionário ViewData. O dicionário ViewData é um objeto dinâmico que fornece uma maneira convencional de transmitir informações a uma view.
O MVC também fornece a capacidade de passar objetos model fortemente tipados para uma view. Esta abordagem fortemente tipada permite uma melhor verificação em tempo de compilação do seu código e um IntelliSense mais rico no Visual Studio (VS). O mecanismo de scaffold no VS usou essa abordagem (ou seja, passou um modelo fortemente tipado) com a classe FilmesController e as respectivas views quando criava os métodos e as views.
Vamos examinar o método Details do controlador FilmesController gerado pelo scaffold :
// GET: Filmes/Details/5
public async Task<IActionResult> Details(int? id)
{
if (id == null)
{
return NotFound();
}
var filme = await _context.Filme
.SingleOrDefaultAsync(m => m.ID == id);
if (filme == null)
{
return NotFound();
}
return View(filme);
}
|
Neste código estamos temos que :
O
parâmetro id geralmente é passado como dados de rota, por exemplo
http:// localhost:1234/filmes/details/1 significa:
- filmes - O controlador para o
FilmesController (o primeiro
segmento de URL).
- details - A Action para details (o segundo segmento de URL)
- O id para 1 (o último segmento de URL).
Você também pode passar o ID com uma string de consulta da seguinte maneira:
http://localhost:1234/filmes/details?Id=1
Se for encontrado um filme com o id informado, uma instância do modelo de
Filme é passada para a view Details.
Abra então a view Details.cshtml na pasta Views/Filmes:
@model MvcFilme.Models.Filme
@{
ViewData["Title"] = "Details";
}
<h2>Details</h2>
<div>
<h4>Filme</h4>
<hr />
<dl class="dl-horizontal">
<dt>
@Html.DisplayNameFor(model => model.Titulo)
</dt>
<dd>
@Html.DisplayFor(model => model.Titulo)
</dd>
<dt>
@Html.DisplayNameFor(model => model.Lancamento)
</dt>
<dd>
@Html.DisplayFor(model => model.Lancamento)
</dd>
<dt>
@Html.DisplayNameFor(model => model.Genero)
</dt>
<dd>
@Html.DisplayFor(model => model.Genero)
</dd>
<dt>
@Html.DisplayNameFor(model => model.Preco)
</dt>
<dd>
@Html.DisplayFor(model => model.Preco)
</dd>
</dl>
</div>
<div>
<a asp-action="Edit" asp-route-id="@Model.ID">Edit</a> |
<a asp-action="Index">Back to List</a>
</div>
|
Ao
incluir uma instrução @model na parte superior do arquivo view, você
pode especificar o tipo de objeto que a view espera. Quando você criou o
controlador FilmesController, o Visual Studio automaticamente incluiu a
seguinte instrução @model na parte superior do arquivo Details.cshtml:
@model MvcFilme.Models.Filme
Esta diretiva @model permite que você acesse o filme que o controlador
passou para a view usando um objeto Model que é fortemente tipado.
Por exemplo, na view Details.cshtml, o código passa cada campo do filme
para os Html Helpers DisplayNameFor e
DisplayFor com o objeto
Modelo fortemente tipado. Os métodos Create e Edit e as respectivas
views também passam um objeto de modelo de filme.
Examine agora o método Index() no arquivo FilmesController.cs :
// GET: Filmes
public async Task<IActionResult> Index()
{
return View(await _context.Filme.ToListAsync());
}
|
Observe como o código cria um objeto List quando ele chama o método View. O código passa esta lista de Filmes a partir do método Action Index para a view Index.cshtml vista a seguir:
@model IEnumerable<MvcFilme.Models.Filme>
@{
ViewData["Title"] = "Index";
}
<h2>Index</h2>
<p>
<a asp-action="Create">Create New</a>
</p>
<table class="table">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Titulo)
</th>
<th>
@Html.DisplayNameFor(model => model.Lancamento)
</th>
<th>
@Html.DisplayNameFor(model => model.Genero)
</th>
<th>
@Html.DisplayNameFor(model => model.Preco)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Titulo)
</td>
<td>
@Html.DisplayFor(modelItem => item.Lancamento)
</td>
<td>
@Html.DisplayFor(modelItem => item.Genero)
</td>
<td>
@Html.DisplayFor(modelItem => item.Preco)
</td>
<td>
<a asp-action="Edit" asp-route-id="@item.ID">Edit</a> |
<a asp-action="Details" asp-route-id="@item.ID">Details</a> |
<a asp-action="Delete" asp-route-id="@item.ID">Delete</a>
</td>
</tr>
}
</tbody>
</table>
|
Da mesma forma, a diretiva @model permite a você acessar a lista de filmes que controlador passou para a view usando o objeto Model fortemente tipado.
Observe que o código percorre os filmes usando um instrução foreach sobre o objeto Model fortemente tipado.
Na próxima parte do artigo vamos trabalhar um pouco com o banco de dados.
Jesus dizia, pois, aos judeus que criam
nele: Se vós permanecerdes na minha palavra, verdadeiramente sereis meus
discípulos;
E conhecereis a verdade, e a verdade vos libertará.
João 8:31,32
Veja os
Destaques e novidades do SUPER DVD Visual Basic
(sempre atualizado) : clique e confira !
Quer migrar para o VB .NET ?
Quer aprender C# ??
Quer aprender os conceitos da Programação Orientada a objetos ? Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ? |
Gostou ? Compartilhe no Facebook Compartilhe no Twitter
Referências: