Início rápido: Usar o Visual Studio para criar seu primeiro aplicativo Web ASP.NET CoreQuickstart: Use Visual Studio to create your first ASP.NET Core web app

Nesta introdução de 5 a 10 minutos que mostra como usar o Visual Studio, você criará um aplicativo Web "Olá, Mundo" simples usando um modelo de projeto ASP.NET e a linguagem de programação C#.In this 5-10 minute introduction to how to use Visual Studio, you'll create a simple "Hello World" web app by using an ASP.NET project template and the C# programming language.

Antes de começarBefore you begin

Instalar o Visual StudioInstall Visual Studio

Se você ainda não instalou o Visual Studio, vá para a página de downloads do Visual Studio para instalá-lo gratuitamente.If you haven't already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

Se você ainda não instalou o Visual Studio, vá para a página de downloads do Visual Studio para instalá-lo gratuitamente.If you haven't already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

Escolher o tema (opcional)Choose your theme (optional)

Este tutorial de início rápido inclui capturas de tela que usam o tema escuro.This quickstart tutorial includes screenshots that use the dark theme. Se você não estiver usando o tema escuro, mas quiser usá-lo, confira a página Personalizar o IDE e o Editor do Visual Studio para saber como.If you aren't using the dark theme but would like to, see the Personalize the Visual Studio IDE and Editor page to learn how.

Criar um projetoCreate a project

Para começar, você criará um projeto de aplicativo Web ASP.NET Core.To start, you'll create an ASP.NET Core web application project. O tipo de projeto vem com todos os arquivos de modelo para criar um aplicativo Web, antes mesmo de você adicionar alguma coisa!The project type comes with all template files to create a web app, before you've even added anything!

  1. Abra o Visual Studio 2017.Open Visual Studio 2017.

  2. Na barra de menus superior, escolha arquivo > novo > projeto.From the top menu bar, choose File > New > Project.

  3. No painel esquerdo da caixa de diálogo Novo Projeto, expanda Visual C# e, em seguida, escolha .NET Core.In the left pane of the New Project dialog box, expand Visual C#, and then choose .NET Core. No painel central, escolha Aplicativo Web ASP.NET Core.In the middle pane, choose ASP.NET Core Web Application.

    Em seguida, nomeie o arquivo HelloWorld e escolha OK.Then, name your file HelloWorld and choose OK.

    Crie o novo projeto de aplicativo Web ASP.NET Core para C#

    Observação

    Se você não vir a categoria de modelo de projeto .NET Core, escolha o link Abrir Instalador do Visual Studio no painel esquerdo.If you don't see the .NET Core project template category, choose the Open Visual Studio Installer link in the left pane. (Dependendo das suas configurações de exibição, talvez seja necessário rolar para vê-la.)(Depending on your display settings, you might have to scroll to see it.)

    Abrir Instalador do Visual Studio na caixa de diálogo Novo Projeto

    O Instalador do Visual Studio é iniciado.The Visual Studio Installer launches. Escolha a carga de trabalho ASP.NET e desenvolvimento para a Web e, em seguida, selecione Modificar.Choose the ASP.NET and web development workload, and then choose Modify.

    Carga de trabalho ASP.NET no instalador do VS

    (Talvez você precise fechar o Visual Studio antes de continuar a instalar a nova carga de trabalho.)(You might have to close Visual Studio before you can continue installing the new workload.)

  4. Na caixa de diálogo Novo aplicativo Web ASP.NET Core, selecione ASP.NET Core 2.1 no menu suspenso superior.In the New ASP.NET Core Web Application dialog box, select ASP.NET Core 2.1 from the top drop-down menu. Em seguida, escolha Aplicativo Web e, em seguida, OK.Next, choose Web Application, and then choose OK.

    Caixa de diálogo Novo Aplicativo Web ASP.NET Core

    Observação

    Se o ASP.NET Core 2.1 não for exibido, verifique se você está executando a versão mais recente do Visual Studio.If you don't see ASP.NET Core 2.1, make sure that you are running the most recent release of Visual Studio. Para obter mais informações de como atualizar sua instalação, confira a página Atualizar o Visual Studio para a versão mais recente.For more information about how to update your installation, see the Update Visual Studio to the most recent release page.

Logo depois, o Visual Studio abre o arquivo de projeto.Soon after, Visual Studio opens your project file.

  1. Abra o Visual Studio.Open Visual Studio.

  2. Na janela iniciar, escolha criar um novo projeto.On the start window, choose Create a new project.

    Exibir a janela 'Criar um novo projeto'

  3. Na janela Criar um novo projeto, insira ou digite ASP.NET na caixa de pesquisa.On the Create a new project window, enter or type ASP.NET in the search box. Em seguida, escolha C# na lista Linguagem de programação e, em seguida, escolha Windows na lista Plataforma.Next, choose C# from the Language list, and then choose Windows from the Platform list.

    Depois de aplicar os filtros de linguagem de programação e plataforma, escolha o modelo Aplicativo Web ASP.NET Core (.NET Core) e, em seguida, escolha Avançar.After you apply the language and platform filters, choose the ASP.NET Core Web Application template, and then choose Next.

    Escolher o modelo de C# para o Aplicativo Web ASP.NET Core

    Observação

    Se não vir o modelo Aplicativo Web ASP.NET Core, você poderá instalá-lo da janela Criar um novo projeto.If you do not see the ASP.NET Core Web Application template, you can install it from the Create a new project window. Na mensagem Não encontrou o que precisa?, escolha o link Instalar mais ferramentas e recursos.In the Not finding what you're looking for? message, choose the Install more tools and features link.

    O link 'Instalar mais ferramentas e recursos' da mensagem 'Não encontrou o que precisa?' na janela 'Criar novo projeto'

    Em seguida, no Instalador do Visual Studio, escolha a carga de trabalho de desenvolvimento Web e ASP.NET.Then, in the Visual Studio Installer, choose the ASP.NET and web development workload.

    Carga de trabalho do Aplicativo Web ASP.NET Core no Instalador do Visual Studio

    Depois disso, escolha o botão Modificar no Instalador do Visual Studio.After that, choose the Modify button in the Visual Studio Installer. Pode ser solicitado que você salve seu trabalho; nesse caso, faça isso.You might be prompted to save your work; if so, do so. Em seguida, escolha Continuar para instalar a carga de trabalho.Next, choose Continue to install the workload. Em seguida, retorne para a etapa 2 deste procedimento para "Criar um projeto".Then, return to step 2 in this "Create a project" procedure.

  4. Na janela Configurar seu novo projeto, digite ou insira OláMundo na caixa Nome do projeto.In the Configure your new project window, type or enter HelloWorld in the Project name box. Em seguida, escolha criar.Then, choose Create.

    Na janela "Configurar seu novo projeto", dê ao projeto o nome 'OláMundo'

  5. Na janela criar um novo aplicativo Web ASP.NET Core , verifique se ASP.NET Core 3,0 aparece no menu suspenso superior.In the Create a new ASP.NET Core Web Application window, verify that ASP.NET Core 3.0 appears in the top drop-down menu. Em seguida, escolha Aplicativo Web, que inclui Razor Pages de exemplo.Then, choose Web Application, which includes example Razor Pages. Em seguida, escolha Criar.Next, choose Create.

    A janela 'Criar um novo Aplicativo Web ASP.NET Core'

    O Visual Studio abre seu novo projeto.Visual Studio opens your new project.

Criar e executar o aplicativoCreate and run the app

  1. No Gerenciador de Soluções, expanda a pasta Páginas e, em seguida, escolha About.cshtml.In the Solution Explorer, expand the Pages folder, and then choose About.cshtml.

    Captura de tela do Visual Studio Gerenciador de Soluções mostrando os arquivos no projeto HelloWorld.

    Este arquivo corresponde a uma página chamada Sobre no aplicativo web, que é executada no navegador da web.This file corresponds to a page that's named About in the web app, which runs in a web browser.

    A página Sobre no aplicativo Web

    No editor, você verá o código HTML para a área de "informações adicionais" da página Sobre.In the editor, you'll see HTML code for the "additional information" area of the About page.

    O código HTML para a área de informações adicionais no editor do Visual Studio

  2. Altere o texto de "informações adicionais" para dizer "Olá, Mundo!".Change the "additional information" text to read "Hello World!".

    Mudar o código HTML padrão para a área de informações adicionais no editor do Visual Studio

  3. No Gerenciador de Soluções, expanda About.cshtml e, em seguida, escolha About.cshtml.cs.In the Solution Explorer, expand About.cshtml, and then choose About.cshtml.cs. (Esse arquivo também corresponde à página Sobre em um navegador da Web.)(This file also corresponds with the About page in a web browser.)

    Captura de tela do Visual Studio Gerenciador de Soluções mostrando os arquivos no projeto HelloWorld.

    No editor, você verá o código de C# que inclui o texto para a área "Descrição do aplicativo" da página sobre.In the editor, you'll see C# code that includes text for the "application description" area of the About page.

    O código de C# para a área de descrição do aplicativo no editor do Visual Studio

  4. Alterar o texto da mensagem de "Descrição do aplicativo" para dizer "Qual é a minha mensagem?".Change the "application description" message text to read "What's my message?".

    Altere o texto da mensagem padrão para a área de descrição do aplicativo no editor do Visual Studio

  5. Escolha IIS Express ou pressione Ctrl+F5 para executar o aplicativo e abri-lo em um navegador da Web.Choose IIS Express or press Ctrl+F5 to run the app and open it in a web browser.

    Selecionar o botão IIS Express no Visual Studio

    Observação

    Se você receber uma mensagem de erro informando Não é possível conectar ao servidor Web 'IIS Express' ou uma mensagem de erro que mencione um certificado SSL, feche o Visual Studio.If you get an error message that says, Unable to connect to web server 'IIS Express', or an error message that mentions an SSL certificate, close Visual Studio. Em seguida, abra o Visual Studio usando a opção Executar como administrador no menu de contexto acessado ao clicar com o botão direito do mouse.Next, open Visual Studio by using the Run as administrator option from the right-click context menu. Em seguida, execute o aplicativo novamente.Then, run the application again.

  6. No navegador da Web, verifique se a página Sobre inclui o texto atualizado.In the web browser, verify that the About page includes your updated text.

    Exibir a página Sobre atualizada que inclui o texto alterado

  7. Feche o navegador da Web.Close the web browser.

Examinar seu trabalhoReview your work

Exiba a animação a seguir para verificar o trabalho que você concluiu a seção anterior.View the following animation to check the work that you completed in the previous section.

Exibir o arquivo .gif animado que mostra como criar e executar um aplicativo Web ASP.NET Core C# simples no Visual Studio

Parabéns por concluir este Guia de Início Rápido!Congratulations on completing this Quickstart! Esperamos que você tenha aprendido um pouco sobre o C#, o ASP.NET Core e o IDE (ambiente de desenvolvimento integrado) do Visual Studio.We hope you learned a little bit about C#, ASP.NET Core, and the Visual Studio IDE (integrated development environment).

  1. No Gerenciador de soluções, expanda a pasta páginas e, em seguida, escolha index. cshtml.In the Solution Explorer, expand the Pages folder, and then choose Index.cshtml.

    Escolha o arquivo index. cshtml no Gerenciador de Soluções

    Esse arquivo corresponde a uma página chamada Home no aplicativo Web, que é executado em um navegador da Web.This file corresponds to a page that's named Home in the web app, which runs in a web browser.

    A página Sobre no aplicativo Web

    No editor, você verá o código HTML para o texto que aparece na Home Page.In the editor, you'll see HTML code for the text that appears on the Home page.

    O código HTML no arquivo index. cshtml para a Home Page no editor do Visual Studio

  2. Altere o texto "bem-vindo" para ler "Olá, mundo!".Change the "Welcome" text to read "Hello World!".

    No editor do Visual Studio, altere o código HTML padrão que diz bem-vindo para dizer Olá, Mundo em vez disso

  3. Escolha IIS Express ou pressione Ctrl+F5 para executar o aplicativo e abri-lo em um navegador da Web.Choose IIS Express or press Ctrl+F5 to run the app and open it in a web browser.

    Selecionar o botão IIS Express no Visual Studio

    Observação

    Se você receber uma mensagem de erro informando Não é possível conectar ao servidor Web 'IIS Express' ou uma mensagem de erro que mencione um certificado SSL, feche o Visual Studio.If you get an error message that says, Unable to connect to web server 'IIS Express', or an error message that mentions an SSL certificate, close Visual Studio. Em seguida, abra o Visual Studio usando a opção Executar como administrador no menu de contexto acessado ao clicar com o botão direito do mouse.Next, open Visual Studio by using the Run as administrator option from the right-click context menu. Em seguida, execute o aplicativo novamente.Then, run the application again.

  4. No navegador da Web, verifique se a Home Page inclui o texto atualizado.In the web browser, verify that the Home page includes your updated text.

    Exibir a página inicial atualizada que inclui as alterações feitas

  5. Feche o navegador da Web.Close the web browser.

Próximas etapasNext steps

Para saber mais, continue com o tutorial a seguir:To learn more, continue with the following tutorial:

Confira tambémSee also

Publicar seu aplicativo Web no Serviço de Aplicativo do Azure usando o Visual StudioPublish your web app to Azure App Service by using Visual Studio