ASP .NET Core - Criando uma aplicação ASP .NET Core MVC com o VS 2017 - IV

 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 :

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:


José Carlos Macoratti