Tutorial: Introdução às Páginas do Razor no ASP.NET CoreTutorial: Get started with Razor Pages in ASP.NET Core

Por Rick AndersonBy Rick Anderson

Este é o primeiro tutorial de uma série.This is the first tutorial of a series. A série ensina as noções básicas de criação de um aplicativo Web do Razor Pages do ASP.NET Core.The series teaches the basics of building an ASP.NET Core Razor Pages web app.

Para obter uma introdução mais avançada direcionada a desenvolvedores experientes, confira Introdução a Razor Pages.For a more advanced introduction aimed at experienced developers, see Introduction to Razor Pages.

No final da série, você terá um aplicativo que gerencia um banco de dados de filmes.At the end of the series, you'll have an app that manages a database of movies.

Exibir ou baixar um código de exemplo (como baixar).View or download sample code (how to download).

Neste tutorial, você:In this tutorial, you:

  • Criar um aplicativo Web do Razor Pages.Create a Razor Pages web app.
  • Execute o aplicativo.Run the app.
  • Examinar os arquivos de projeto.Examine the project files.

No final deste tutorial, você terá um aplicativo Web em funcionamento do Razor Pages que você criará em tutoriais posteriores.At the end of this tutorial, you'll have a working Razor Pages web app that you'll build on in later tutorials.

Página Inicial ou de Índice

Pré-requisitosPrerequisites

Criar um aplicativo Web das Páginas do RazorCreate a Razor Pages web app

  • No menu Arquivo do Visual Studio, selecione Novo > Projeto.From the Visual Studio File menu, select New > Project.

  • Crie um aplicativo Web ASP.NET Core e selecione Avançar.Create a new ASP.NET Core Web Application and select Next.

    novo Aplicativo Web ASP.NET Core

  • Nomeie o projeto RazorPagesMovie.Name the project RazorPagesMovie. É importante nomear o projeto RazorPagesMovie de modo que os namespaces façam a correspondência quando você copiar e colar o código.It's important to name the project RazorPagesMovie so the namespaces will match when you copy and paste code.

    novo Aplicativo Web ASP.NET Core

  • Selecione ASP.NET Core 2.2 na lista suspensa Aplicativo Web e, em seguida, selecione Criar.Select ASP.NET Core 2.2 in the dropdown, Web Application, and then select Create.

novo Aplicativo Web ASP.NET Core

O seguinte projeto inicial é criado:The following starter project is created:

Gerenciador de Soluções

Executar o aplicativoRun the app

  • Pressione Ctrl + F5 para execução sem o depurador.Press Ctrl+F5 to run without the debugger.

    O Visual Studio exibe a caixa de diálogo a seguir:Visual Studio displays the following dialog:

    Este projeto é configurado para usar SSL.

    Selecione Sim se você confia no certificado SSL do IIS Express.Select Yes if you trust the IIS Express SSL certificate.

    A seguinte caixa de diálogo é exibida:The following dialog is displayed:

    Caixa de diálogo de aviso de segurança

    Selecione Sim se você concordar com confiar no certificado de desenvolvimento.Select Yes if you agree to trust the development certificate.

    Para obter mais informações, veja Confiar no certificado de desenvolvimento HTTPS do ASP.NET Core.See Trust the ASP.NET Core HTTPS development certificate for more information.

    O Visual Studio inicia o IIS Express e executa o aplicativo.Visual Studio starts IIS Express and runs the app. A barra de endereços mostra localhost:port# e não algo como example.com.The address bar shows localhost:port# and not something like example.com. Isso ocorre porque localhost é o nome do host padrão do computador local.That's because localhost is the standard hostname for the local computer. Localhost serve somente solicitações da Web do computador local.Localhost only serves web requests from the local computer. Quando o Visual Studio cria um projeto Web, uma porta aleatória é usada para o servidor Web.When Visual Studio creates a web project, a random port is used for the web server.

  • Na página inicial do aplicativo, selecione Aceitar para dar consentimento de acompanhamento.On the app's home page, select Accept to consent to tracking.

    Este aplicativo não rastreia informações pessoais, mas o modelo de projeto inclui o recurso de consentimento no caso de você precisar estar em conformidade com o RGPD (Regulamento Geral sobre a Proteção de Dados) da União Europeia.This app doesn't track personal information, but the project template includes the consent feature in case you need it to comply with the European Union's General Data Protection Regulation (GDPR).

    Página Inicial ou de Índice

    A imagem a seguir mostra o aplicativo depois de consentir o acompanhamento:The following image shows the app after you give consent to tracking:

    Página Inicial ou de Índice

Examinar os arquivos de projetoExamine the project files

Aqui está uma visão geral das pastas do projeto principal e os arquivos que você usará para trabalhar em tutoriais posteriores.Here's an overview of the main project folders and files that you'll work with in later tutorials.

Pasta PáginasPages folder

Contém as Razor Pages e os arquivos de suporte.Contains Razor pages and supporting files. Cada Razor Page é um par de arquivos:Each Razor page is a pair of files:

  • Um arquivo .cshtml que contém a marcação HTML com o código C# usando a sintaxe Razor.A .cshtml file that contains HTML markup with C# code using Razor syntax.
  • Um arquivo .cshtml.cs que contém o código C# que manipula os eventos de página.A .cshtml.cs file that contains C# code that handles page events.

Arquivos de suporte têm nomes que começam com um sublinhado.Supporting files have names that begin with an underscore. Por exemplo, o arquivo _Layout.cshtml configura os elementos de interface do usuário comuns a todas as páginas.For example, the _Layout.cshtml file configures UI elements common to all pages. Esse arquivo define o menu de navegação na parte superior da página e a notificação de direitos autorais na parte inferior da página.This file sets up the navigation menu at the top of the page and the copyright notice at the bottom of the page. Para obter mais informações, consulte Layout no ASP.NET Core.For more information, see Layout no ASP.NET Core.

Pasta wwwrootwwwroot folder

Contém os arquivos estáticos, como arquivos HTML, arquivos JavaScript e arquivos CSS.Contains static files, such as HTML files, JavaScript files, and CSS files. Para obter mais informações, consulte Arquivos estáticos no ASP.NET Core.For more information, see Arquivos estáticos no ASP.NET Core.

appSettings.jsonappSettings.json

Contém dados de configuração, como cadeias de conexão.Contains configuration data, such as connection strings. Para obter mais informações, consulte Configuração no ASP.NET Core.For more information, see Configuração no ASP.NET Core.

Module.vbProgram.cs

Contém o ponto de entrada para o programa.Contains the entry point for the program. Para obter mais informações, consulte Host Genérico .NET.For more information, see Host Genérico .NET.

Startup.csStartup.cs

Contém o código que configura o comportamento do aplicativo, como se ele requer o consentimento para cookies.Contains code that configures app behavior, such as whether it requires consent for cookies. Para obter mais informações, consulte Inicialização de aplicativo no ASP.NET Core.For more information, see Inicialização de aplicativo no ASP.NET Core.

Recursos adicionaisAdditional resources

Próximas etapasNext steps

Neste tutorial, você:In this tutorial, you:

  • Criou um aplicativo Web do Razor Pages.Created a Razor Pages web app.
  • Executou o aplicativo.Ran the app.
  • Examinou os arquivos de projeto.Examined the project files.

Vá para o próximo tutorial da série:Advance to the next tutorial in the series: