Parte 4, adicionar um modelo a um aplicativo ASP.NET Core MVC

Por Rick Anderson e Jon P Smith.

Neste tutorial, as classes são adicionadas para gerenciar filmes em um banco de dados. Estas classes são a parte "Model" da aplicação MVC.

Essas classes de modelo são usadas com Entity Framework Core (EF Core) para trabalhar com um banco de dados. EF Core é uma estrutura de mapeamento objeto-relacional (ORM) que simplifica o código de acesso a dados que você precisa escrever.

As classes de modelo criadas são conhecidas como classes POCO, de Plain Old CLR Objects. As classes POCO não têm qualquer dependência de EF Core. Eles apenas definem as propriedades dos dados a serem armazenados no banco de dados.

Neste tutorial, as classes de modelo são criadas primeiro e EF Core cria o banco de dados.

Adicionar uma classe de modelo de dados

Visual Studio

Clique com o botão direito do rato na pasta Modelos>Adicionar>Classe. Nomeie o arquivo Movie.cs.

Adicione um arquivo chamado Movie.cs à pasta Models.

Atualize o arquivo Models/Movie.cs com o seguinte código:

using System.ComponentModel.DataAnnotations;

namespace MvcMovie.Models;

public class Movie
{
    public int Id { get; set; }
    public string? Title { get; set; }
    [DataType(DataType.Date)]
    public DateTime ReleaseDate { get; set; }
    public string? Genre { get; set; }
    public decimal Price { get; set; }
}

A classe Movie contém um campo Id, que é exigido pelo banco de dados para a chave primária.

O atributo DataType em ReleaseDate especifica o tipo de dados (Date). Com este atributo:

• O usuário não é obrigado a inserir informações de hora no campo de data.
• Apenas a data é exibida, não as informações de hora.

DataAnnotations são abordados em um tutorial posterior.

O ponto de interrogação após string indica que a propriedade é anulável. Para obter mais informações, consulte Tipos de referência anuláveis.

Adicionar pacotes NuGet

Visual Studio

O Visual Studio instala automaticamente os pacotes necessários.

Construa o projeto como uma verificação de erros do compilador.

Execute os seguintes comandos da CLI do .NET:

dotnet tool uninstall --global dotnet-aspnet-codegenerator
dotnet tool install --global dotnet-aspnet-codegenerator
dotnet tool uninstall --global dotnet-ef
dotnet tool install --global dotnet-ef
dotnet add package Microsoft.EntityFrameworkCore.Design
dotnet add package Microsoft.EntityFrameworkCore.SQLite
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet add package Microsoft.EntityFrameworkCore.Tools

Os comandos anteriores adicionam:

• O ferramentas de interface de linha de comando (CLI) para EF Core
• A ferramenta de andaime aspnet-codegenerator .
• Ferramentas de tempo de design para EF Core
• O provedor SQLite EF Core, que instala o pacote EF Core como uma dependência.
• Embalagens necessárias para andaimes: Microsoft.VisualStudio.Web.CodeGeneration.Design e Microsoft.EntityFrameworkCore.SqlServer.

Para obter orientação sobre a configuração de vários ambientes que permite que um aplicativo configure seus contextos de banco de dados por ambiente, consulte Usar vários ambientes no ASP.NET Core.

Observação

Por padrão, a arquitetura dos binários do .NET a serem instalados representa a arquitetura do sistema operacional em execução no momento. Para especificar uma arquitetura de sistema operativo diferente, consulte dotnet tool install, --arch option. Para obter mais informações, consulte a questão no GitHub dotnet/AspNetCore.Docs #29262.

No Visual Studio Code, pressione Ctrl+F5 para executar o aplicativo sem depuração.

No Painel abaixo da região do editor, selecione a guia PROBLEMAS, ou, no menu Exibir, selecione Problemas se ela não estiver exibida no momento. Verifique se não há erros de compilação.

Páginas de filmes em andaimes

Use a ferramenta de scaffolding para produzir páginas Create, Read, Updatee Delete (CRUD) para o modelo de filme.

Visual Studio

No Explorador de Soluções , clique com o botão direito na pasta Controladores e selecione Adicionar > Novo Item Estruturado.

acima

Na caixa de diálogo Adicionar Novo Item Andaime:

• No painel esquerdo, selecione Installed>Common>MVC.
• Selecione controlador MVC com exibições, usando o Entity Framework.
• Selecione Adicionar.

Conclua o Adicionar Controlador MVC com modos de exibição, usando a caixa de diálogo do Entity Framework:

• Na lista suspensa da classe Model , selecione Filme (MvcMovie.Models).
• Na linha da classe de contexto de dados, selecione o sinal de + (mais).
  • Na caixa de diálogo Adicionar Contexto de Dados , o nome da classe MvcMovie.Data.MvcMovieContext é gerado.
  • Selecione Adicionar.
• Na lista suspensa Provedor de banco de dados, selecione SQL Server.
• Visualizações e nome do controlador: Mantenha o padrão.
• Selecione Adicionar.

Se receber uma mensagem de erro, selecione Adicionar uma segunda vez para tentar novamente.

Andaimes adiciona os seguintes pacotes:

• Microsoft.EntityFrameworkCore.SqlServer
• Microsoft.EntityFrameworkCore.Tools
• Microsoft.VisualStudio.Web.CodeGeneration.Design

O andaime cria o seguinte:

• Um controlador de filmes: Controllers/MoviesController.cs
• Razor visualizar arquivos para Criar, Excluir, Detalhes, Editare Índice páginas: Views/Movies/*.cshtml
• Uma classe de contexto de banco de dados: Data/MvcMovieContext.cs

O andaime atualiza o seguinte:

• Insere as referências de pacote necessárias no arquivo de projeto MvcMovie.csproj.
• Registra o contexto do banco de dados no arquivo Program.cs.
• Adiciona uma cadeia de conexão de banco de dados ao arquivo appsettings.json.

A criação automática desses arquivos e a atualização dos mesmos é conhecida como scaffolding.

As páginas com andaimes ainda não podem ser usadas porque o banco de dados não existe. Executar a aplicação e selecionar o link Movie App resulta numa mensagem de erro Não é possível abrir o banco de dados ou nenhuma tabela: Movie.

Crie o aplicativo para verificar se não há erros.

Abra uma janela de comando no diretório do projeto. O diretório do projeto é o diretório que contém os arquivos Program.cs e .csproj.

No macOS e Linux, exporte o caminho da ferramenta scaffold:

export PATH=$HOME/.dotnet/tools:$PATH

Execute o seguinte comando:

dotnet aspnet-codegenerator controller -name MoviesController -m Movie -dc MvcMovie.Data.MvcMovieContext --relativeFolderPath Controllers --useDefaultLayout --referenceScriptLibraries --databaseProvider sqlite

A tabela a seguir detalha os parâmetros do gerador de código ASP.NET Core:

Parâmetro	Descrição
-m	O nome do modelo.
-CC	O contexto dos dados.
--relativeFolderPath	O caminho relativo da pasta de saída para criar os ficheiros.
--useDefaultLayout|-udl	O layout padrão deve ser usado para as exibições.
--referenceScriptLibraries	Adiciona _ValidationScriptsPartial a Editar e Criar páginas.
--databaseProvider sqlite	Especifique DbContext deve usar SQLite em vez de SQL Server.

Use a opção h para obter ajuda sobre o comando aspnet-codegenerator controller:

dotnet aspnet-codegenerator controller -h

Para obter mais informações, consulte dotnet aspnet-codegenerator

O andaime cria o seguinte:

• Um controlador de filmes: Controllers/MoviesController.cs
• Razor visualizar arquivos para Criar, Excluir, Detalhes, Editare Índice páginas: Views/Movies/*.cshtml
• Uma classe de contexto de banco de dados: Data/MvcMovieContext.cs

O andaime atualiza o seguinte:

• Registra o contexto do banco de dados no arquivo Program.cs
• Adiciona uma cadeia de conexão de banco de dados ao arquivo appsettings.json.

A criação automática desses arquivos e atualizações de arquivos é conhecida como scaffolding.

As páginas com andaimes ainda não podem ser usadas porque o banco de dados não existe. Executar o aplicativo e selecionar o link Movie App resulta numa mensagem de erro Não é possível abrir o banco de dados ou nenhuma tabela: Movie.

Crie o aplicativo para verificar se não há erros.

Usar SQLite para desenvolvimento, SQL Server para produção

O código destacado a seguir no Program.cs mostra como usar o SQLite no desenvolvimento e o SQL Server na produção.

var builder = WebApplication.CreateBuilder(args);

if (builder.Environment.IsDevelopment())
{
    builder.Services.AddDbContext<MvcMovieContext>(options =>
        options.UseSqlite(builder.Configuration.GetConnectionString("MvcMovieContext")));
}
else
{
    builder.Services.AddDbContext<MvcMovieContext>(options =>
        options.UseSqlServer(builder.Configuration.GetConnectionString("ProductionMvcMovieContext")));
}

Migração inicial

Utilize a funcionalidade EF CoreMigrações para criar a base de dados. de Migrações é um conjunto de ferramentas que criam e atualizam um banco de dados para corresponder ao modelo de dados.

Visual Studio

No menu Ferramentas, selecione Gestor de Pacotes NuGet>Consola do Gestor de Pacotes.

No Console do Gerenciador de Pacotes (PMC), digite o seguinte comando:

Add-Migration InitialCreate

• Add-Migration InitialCreate: Gera um arquivo de migração Migrations/{timestamp}_InitialCreate.cs. O argumento InitialCreate é o nome da migração. Qualquer nome pode ser usado, mas, por convenção, é selecionado um nome que descreve a migração. Como esta é a primeira migração, a classe gerada contém código para criar o esquema de banco de dados. O esquema de banco de dados é baseado no modelo especificado na classe MvcMovieContext.

O seguinte aviso é exibido, que é abordado em uma etapa posterior:

Não foi especificado um tipo de armazenamento para a propriedade decimal 'Preço' no tipo de entidade 'Filme'. Isso fará com que os valores sejam truncados silenciosamente se não se ajustarem à precisão e escala padrão. Especifique explicitamente o tipo de coluna do servidor SQL que pode acomodar todos os valores em 'OnModelCreating' usando 'HasColumnType', especifique precisão e escala usando 'HasPrecision' ou configure um conversor de valores usando 'HasConversion'.

No PMC, digite o seguinte comando:

Update-Database

• Update-Database: Atualiza o banco de dados para a migração mais recente, que o comando anterior criou. Este comando executa o método Up no arquivo Migrations/{time-stamp}_InitialCreate.cs, que cria o banco de dados.

Para obter mais informações sobre as ferramentas PMC para EF Core, consulte a Referência de Ferramentas EF Core - PMC no Visual Studio.

Execute o seguinte comando da CLI do .NET:

dotnet ef migrations add InitialCreate

• ef migrations add InitialCreate: Gera um arquivo de migração Migrations/{timestamp}_InitialCreate.cs. O argumento InitialCreate é o nome da migração. Qualquer nome pode ser usado, mas, por convenção, é selecionado um nome que descreve a migração. Esta é a primeira migração, portanto, a classe gerada contém código para criar o esquema de banco de dados. O esquema de banco de dados é baseado no modelo especificado na classe MvcMovieContext, no arquivo Data/MvcMovieContext.cs.

O seguinte aviso é exibido, que é abordado em uma etapa posterior:

Nenhum tipo de loja foi especificado para a propriedade decimal 'Price' no tipo de entidade 'Movie'. Isso fará com que os valores sejam truncados silenciosamente se não se ajustarem à precisão e escala padrão. Especifique explicitamente o tipo de coluna do servidor SQL que pode acomodar todos os valores em 'OnModelCreating' usando 'HasColumnType', especifique precisão e escala usando 'HasPrecision' ou configure um conversor de valores usando 'HasConversion'.

Execute o seguinte comando da CLI do .NET:

dotnet ef database update

• ef database update: Atualiza o banco de dados para a migração mais recente, que o comando anterior criou. Este comando executa o método Up no arquivo Migrations/{time-stamp}_InitialCreate.cs, que cria o banco de dados.

Para obter mais informações sobre como manter vários provedores, como Microsoft SQL Server e SQLite, consulte migrações com vários provedores.

Testar a aplicação

Visual Studio

Execute a aplicação e selecione o link do Movie App.

Se obtiveres uma exceção semelhante à seguinte, talvez tenhas perdido o comando Update-Database na etapa de migrações :

SqlException: Cannot open database "MvcMovieContext-1" requested by the login. The login failed.

Inicie a aplicação e selecione o link Movie App.

Caso obtenhas uma exceção semelhante à seguinte, talvez tenhas perdido o comando dotnet ef database update na etapa de migrações.

SqliteException: SQLite Error 1: 'no such table: Movie'.

Observação

Talvez não seja possível inserir vírgulas decimais no campo Price. Para oferecer suporte a de validação do jQuery para localidades diferentes do inglês que usam uma vírgula (",") para um ponto decimal e para formatos de data não US-English, o aplicativo deve ser globalizado. Para obter instruções sobre globalização, consulte esta questão do GitHub.

Examine a classe de contexto e o registro do banco de dados gerado

Com EF Core, o acesso aos dados é realizado usando um modelo. Um modelo é composto de classes de entidade e um objeto de contexto que representa uma sessão com o banco de dados. O objeto de contexto permite consultar e salvar dados. O contexto do banco de dados é derivado de Microsoft.EntityFrameworkCore.DbContext e especifica as entidades a serem incluídas no modelo de dados.

Scaffolding cria a classe de contexto de banco de dados Data/MvcMovieContext.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.EntityFrameworkCore;
using MvcMovie.Models;

namespace MvcMovie.Data
{
    public class MvcMovieContext : DbContext
    {
        public MvcMovieContext (DbContextOptions<MvcMovieContext> options)
            : base(options)
        {
        }

        public DbSet<MvcMovie.Models.Movie> Movie { get; set; } = default!;
    }
}

O código anterior cria uma propriedade DbSet<Movie> que representa os filmes no banco de dados.

Injeção de dependência

ASP.NET Core é construído com injeção de dependência (DI). Serviços, como o contexto do banco de dados, são registrados com DI em Program.cs. Esses serviços são fornecidos a componentes que os exigem por meio de parâmetros do construtor.

No arquivo Controllers/MoviesController.cs, o construtor usa Dependency Injection para injetar o contexto de banco de dados MvcMovieContext no controlador. O contexto do banco de dados é usado em cada um dos métodos CRUD no controlador.

Andaime gerou o seguinte código destacado em Program.cs:

Visual Studio

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddDbContext<MvcMovieContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("MvcMovieContext") ?? throw new InvalidOperationException("Connection string 'MvcMovieContext' not found.")));

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddDbContext<MvcMovieContext>(options =>
    options.UseSqlite(builder.Configuration.GetConnectionString("MvcMovieContext")));

O sistema de configuração ASP.NET Core lê a cadeia de conexão do banco de dados "MvcMovieContext".

Examinar a string de conexão de base de dados gerada

Scaffolding adicionou uma cadeia de conexão ao arquivo appsettings.json:

Visual Studio

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "MvcMovieContext": "Server=(localdb)\\mssqllocaldb;Database=MvcMovieContext-4ebefa10-de29-4dea-b2ad-8a8dc6bcf374;Trusted_Connection=True;MultipleActiveResultSets=true"
  }
}

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "MvcMovieContext": "Data Source=MvcMovie.db"
  }
}

Para o desenvolvimento local, o sistema de configuração ASP.NET Core lê a chave ConnectionString do arquivo appsettings.json.

A classe InitialCreate

Examine o arquivo de migração Migrations/{timestamp}_InitialCreate.cs:

using System;
using Microsoft.EntityFrameworkCore.Migrations;

#nullable disable

namespace MvcMovie.Migrations
{
    /// <inheritdoc />
    public partial class InitialCreate : Migration
    {
        /// <inheritdoc />
        protected override void Up(MigrationBuilder migrationBuilder)
        {
            migrationBuilder.CreateTable(
                name: "Movie",
                columns: table => new
                {
                    Id = table.Column<int>(type: "int", nullable: false)
                        .Annotation("SqlServer:Identity", "1, 1"),
                    Title = table.Column<string>(type: "nvarchar(max)", nullable: true),
                    ReleaseDate = table.Column<DateTime>(type: "datetime2", nullable: false),
                    Genre = table.Column<string>(type: "nvarchar(max)", nullable: true),
                    Price = table.Column<decimal>(type: "decimal(18,2)", nullable: false)
                },
                constraints: table =>
                {
                    table.PrimaryKey("PK_Movie", x => x.Id);
                });
        }

        /// <inheritdoc />
        protected override void Down(MigrationBuilder migrationBuilder)
        {
            migrationBuilder.DropTable(
                name: "Movie");
        }
    }
}

No código anterior:

• InitialCreate.Up cria a tabela Filme e configura Id como a chave primária.
• InitialCreate.Down reverte as alterações de esquema feitas pela migração de Up.

Injeção de dependência no controlador

Abra o ficheiro Controllers/MoviesController.cs e examine o construtor:

public class MoviesController : Controller
{
    private readonly MvcMovieContext _context;

    public MoviesController(MvcMovieContext context)
    {
        _context = context;
    }

O construtor usa Dependency Injection para injetar o contexto do banco de dados (MvcMovieContext) no controlador. O contexto do banco de dados é usado em cada um dos métodos CRUD no controlador.

Teste a página Criar. Insira e envie dados.

Teste as páginas Editar, Detalhese Eliminar.

Modelos fortemente tipificados e a diretiva @model

No início deste tutorial, você viu como um controlador pode passar dados ou objetos para uma exibição usando o dicionário ViewData. O dicionário ViewData é um objeto dinâmico que fornece uma maneira conveniente e tardia de passar informações para uma exibição.

O MVC fornece a capacidade de passar objetos de modelo fortemente tipados para uma exibição. Esta abordagem fortemente tipada permite a verificação de código em tempo de compilação. O mecanismo de andaime passou por um modelo fortemente tipado na classe MoviesController e visualizações.

Examine o método Details gerado no arquivo Controllers/MoviesController.cs:

// GET: Movies/Details/5
public async Task<IActionResult> Details(int? id)
{
    if (id == null)
    {
        return NotFound();
    }

    var movie = await _context.Movie
        .FirstOrDefaultAsync(m => m.Id == id);
    if (movie == null)
    {
        return NotFound();
    }

    return View(movie);
}

O parâmetro id geralmente é passado como dados de rota. Por exemplo, https://localhost:5001/movies/details/1 define:

• O controlador que aponta para o controlador movies, o primeiro segmento de URL.
• A ação para details, o segundo segmento de URL.
• O id a 1, o último segmento de URL.

O id pode ser passado com uma cadeia de caracteres de consulta, como no exemplo a seguir:

https://localhost:5001/movies/details?id=1

O parâmetro id é definido como um tipo anulável (int?) nos casos em que o valor id não é fornecido.

Um de expressão lambda é passado para o método FirstOrDefaultAsync para selecionar entidades de filme que correspondam aos dados de rota ou ao valor da cadeia de caracteres de consulta.

var movie = await _context.Movie
    .FirstOrDefaultAsync(m => m.Id == id);

Se um filme for encontrado, uma instância do modelo Movie será passada para a visualização Details:

return View(movie);

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

@model MvcMovie.Models.Movie

@{
    ViewData["Title"] = "Details";
}

<h1>Details</h1>

<div>
    <h4>Movie</h4>
    <hr />
    <dl class="row">
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.Title)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.Title)
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.ReleaseDate)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.ReleaseDate)
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.Genre)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.Genre)
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.Price)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.Price)
        </dd>
    </dl>
</div>
<div>
    <a asp-action="Edit" asp-route-id="@Model.Id">Edit</a> |
    <a asp-action="Index">Back to List</a>
</div>

A instrução @model na parte superior do arquivo de visualização especifica o tipo de objeto que a visualização espera. Quando o controlador de filme foi criado, a seguinte instrução @model foi incluída:

@model MvcMovie.Models.Movie

Esta diretiva @model permite o acesso ao filme que o controlador passou para a visualização. O objeto Model é fortemente tipado. Por exemplo, na visualização Details.cshtml, o código passa cada campo de filme para os auxiliares de HTML DisplayNameFor e DisplayFor usando o objeto Model fortemente tipado. Os métodos e exibições Create e Edit também passam por um objeto de modelo Movie.

Examine a visualização Index.cshtml e o método Index no controlador Movies. Observe como o código cria um objeto List quando chama o método View. O código passa essa lista de Movies do método de ação Index para a exibição:

// GET: Movies
public async Task<IActionResult> Index()
{
    return View(await _context.Movie.ToListAsync());
}

O código retorna detalhes do problema se a propriedade Movie do contexto de dados for nulo.

Quando o controlador de filmes foi criado, o andaime incluía a seguinte instrução @model na parte superior do arquivo Index.cshtml:

@model IEnumerable<MvcMovie.Models.Movie>

A diretiva @model permite o acesso à lista de filmes que o controlador passou para a visualização usando um objeto Model fortemente digitado. Por exemplo, na visualização Index.cshtml, o código percorre os filmes com uma instrução foreach sobre o objeto Model fortemente tipado:

@model IEnumerable<MvcMovie.Models.Movie>

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

<p>
    <a asp-action="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Title)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ReleaseDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Genre)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Price)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ReleaseDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Genre)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Price)
            </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>

Como o objeto Model é fortemente tipado como um objeto IEnumerable<Movie>, cada item no loop é tipado como Movie. Entre outros benefícios, o compilador valida os tipos usados no código.

Recursos adicionais

• Entity Framework Core para iniciantes
• Tag Helpers
• Globalização e localização

Anterior: Adicionando um modo de exibiçãoPróximo: Trabalhando com o SQL