Introdução ao ASP.NET Core MVC

De Rick Anderson

Este tutorial ensina a usar o desenvolvimento Web do ASP.NET Core MVC com controladores e exibições. Se você é novo no desenvolvimento da Web ASP.NET Core, considere a versão Razor Pages deste tutorial, que oferece um ponto de partida mais simples. Consulte Escolher uma interface do usuário ASP.NET Core, que compara Razor Pages, MVC e Blazor para desenvolvimento de interface do usuário.

Este é o primeiro de uma série de tutoriais que ensina desenvolvimento para a Web com ASP.NET Core MVC usando controladores e exibições.

No final da série, você terá um aplicativo que gerencia e exibe dados de filmes. Você aprenderá como:

• Crie um aplicativo Web.
• Adicionar e gerar o scaffolding de um modelo.
• Trabalhar com um banco de dados.
• Adicionar pesquisa e validação.

Exibir ou baixar um código de exemplo (como baixar).

Pré-requisitos

Visual Studio

• Visual Studio 2022 com a carga de trabalho de desenvolvimento Web e do ASP.NET.

  

Visual Studio Code

• Visual Studio Code
• C# para Visual Studio Code (versão mais recente)
• SDK do .NET 7.0

As instruções do Visual Studio Code usam a CLI do .NET para funções de desenvolvimento do ASP.NET Core, como criação de projeto. Você pode seguir estas instruções no macOS, no Linux ou no Windows e com qualquer editor de código. Alterações secundárias poderão ser necessárias se você usar algo diferente do Visual Studio Code.

Visual Studio para Mac

• Visual Studio 2022 para Mac

Criar um aplicativo Web

Visual Studio

• Inicie o Visual Studio e selecione Criar um projeto.
• Na caixa de diálogo Criar um novo projeto, selecione Aplicativo Web do ASP.NET Core (Model-View-Controller)>Avançar.
• Na caixa de diálogo Configurar seu novo projeto, insira MvcMovie no Nome do projeto. É importante nomear o projeto MvcMovie. O uso de maiúsculas e minúsculas precisa corresponder a cada namespace quando o código é copiado.
• Selecione Avançar.
• Na caixa de diálogo Informações adicionais:
  • Selecionar o .NET 7.0.
  • Verifique se Não usar instruções de nível superior está desmarcado.
• Selecione Criar.

Para obter mais informações inclusive abordagens alternativas para criar o projeto, confira Criar um novo projeto no Visual Studio.

O Visual Studio usa o modelo de projeto padrão para o projeto MVC criado. O projeto criado:

• É um aplicativo funcional.
• Este é um projeto inicial básico.

Visual Studio Code

O tutorial pressupõe que você já tenha familiaridade com o VS Code. Consulte Introdução ao VS Code e Ajuda do Visual Studio Code para obter mais informações.

• Abra o terminal integrado.

• Altere para o diretório (cd) que contém o projeto.

• Execute o seguinte comando:

  dotnet new mvc -o MvcMovie
  code -r MvcMovie
  

  • Se aparecer uma caixa de diálogo perguntando, Os ativos necessários para build e depuração estão ausentes do 'MvcMovie'. Deseja adicioná-los?, selecione Sim

  • dotnet new mvc -o MvcMovie: cria um novo projeto do ASP.NET Core MVC na pasta MvcMovie.

  • code -r MvcMovie: Carrega o arquivo de projeto MvcMovie.csproj no Visual Studio Code.

Visual Studio para Mac

• Inicie o Visual Studio para Mac e selecione Arquivo>Novo Projeto....
• No Visual Studio para Mac, selecioneAplicativo Web e Aplicativo de>Console> Web (Modelo-Visão-Controlador)>Continuar.
• Na caixa de diálogo Configurar seu novo aplicativo Web (Modelo-Visão-Controlador):
  • Selecione .NET 7.0 na Estrutura de Destino.
  • Verifique se Não usar instruções de nível superior está desmarcado.
• Selecione Continuar.
• Insira MvcMovie em Nome do projeto. É importante nomear o projeto MvcMovie. O uso de maiúsculas e minúsculas precisa corresponder a cada namespace quando o código é copiado.
• Selecione Criar.

Executar o aplicativo

Visual Studio

• Selecione Ctrl+F5 para executar o aplicativo sem o depurador.

  O Visual Studio exibe a seguinte caixa de diálogo quando um projeto ainda não está configurado para usar o SSL:

  

  Selecione Sim se você confia no certificado SSL do IIS Express.

  A seguinte caixa de diálogo é exibida:

  

  Selecione Sim se você concordar com confiar no certificado de desenvolvimento.

  Para obter informações sobre como confiar no navegador Firefox, confira Erro de certificado Firefox SEC_ERROR_INADEQUATE_KEY_USAGE.

O Visual Studio executa o aplicativo e abre o navegador padrão.

A barra de endereços mostra localhost:<port#> e não algo como example.com. O nome do host padrão de seu computador local localhost. Uma porta aleatória é usada para o servidor Web quando o Visual Studio cria um projeto Web.

Iniciar o aplicativo sem depuração selecionando Ctrl+F5 permite que você:

• Realize alterações de código.
• Salve o arquivo.
• Atualize rapidamente o navegador e veja as alterações de código.

Você pode iniciar o aplicativo no modo de não depuração ou de depuração por meio do menu Depurar:

Você pode depurar o aplicativo selecionando o botão https na barra de ferramentas:

A imagem a seguir mostra o aplicativo:

Visual Studio Code

• Pressione Ctrl + F5 para execução sem o depurador.

  • Confie no certificado de desenvolvimento HTTPS executando o seguinte comando:

    dotnet dev-certs https --trust
    

    O comando anterior não funciona no Linux. Veja a documentação da distribuição do Linux para confiar em um certificado.

    O comando anterior exibe a seguinte caixa de diálogo, desde que o certificado não fosse anteriormente confiável:

    

  • Selecione Sim se você concordar com confiar no certificado de desenvolvimento.

    Para obter mais informações, veja Confiar no certificado de desenvolvimento HTTPS do ASP.NET Core.

  Para obter informações sobre como confiar no navegador Firefox, confira Erro de certificado Firefox SEC_ERROR_INADEQUATE_KEY_USAGE.

  Visual Studio Code:

  • Inicia Kestrel
  • Inicia um navegador.
  • Navega até https://localhost:<port#>.

  A barra de endereços mostra localhost:<port#> e não algo como example.com. O nome do host padrão de seu computador local localhost. Localhost serve somente solicitações da Web do computador local.

Iniciar o aplicativo sem depuração selecionando Ctrl+F5 permite que você:

• Realize alterações de código.

• Salve o arquivo.

• Atualize rapidamente o navegador e veja as alterações de código.

  

Visual Studio para Mac

• Selecione Opção+Comando+Retornar para executar o aplicativo sem o depurador.

  Visual Studio para Mac:

  • Inicia o servidor Kestrel.
  • Inicia um navegador.
  • Navega para http://localhost:port, onde a porta é um número de porta escolhido aleatoriamente, definido quando o Visual Studio cria um projeto Web.

  O Visual Studio para Mac exibe o seguinte pop-up:

  

  • Selecione Instalar e Confiar se você confiar no certificado de desenvolvimento.

  A seguinte caixa de diálogo é exibida:

  

  • Insira sua senha e selecione Atualizar Configurações.

  Para obter mais informações, veja Confiar no certificado de desenvolvimento HTTPS do ASP.NET Core.

  A barra de endereços mostra localhost:<port#> e não algo como example.com. O nome do host padrão de seu computador local localhost. Localhost serve somente solicitações da Web do computador local.

Você pode iniciar o aplicativo no modo de não depuração ou de depuração por meio do menu Depurar.

A imagem a seguir mostra o aplicativo:

Visual Studio

Ajuda do Visual Studio

• Aprenda a depurar o código C# usando o Visual Studio
• Introdução ao IDE do Visual Studio

Visual Studio Code

Ajuda do Visual Studio Code

• Guia de Introdução

• Depuração

• Terminal integrado

• Atalhos de teclado

  • Atalhos de teclado do macOS
  • Atalhos de teclado do Linux
  • Atalhos de teclado do Windows

Visual Studio para Mac

Ajuda do Visual Studio para Mac

• Tour do Visual Studio para Mac
• Introdução do Visual Studio para Mac

No próximo tutorial dessa série, você saberá mais sobre o MVC e começará a escrever um pouco de código.

Próximo: adicionar um controlador