Tutorial: Introdução ao C# e ao ASP.NET Core no Visual Studio

  • Artigo
  • 12 minutos para o fim da leitura

Aplica-se a:yesnoVisual Studio Visual Studio para Mac noVisual Studio Code

Neste tutorial para desenvolvimento em C# com ASP.NET Core, você criará um aplicativo Web ASP.NET Core C# em Visual Studio.

Este tutorial mostrará como:

  • Criar um projeto do Visual Studio
  • Criar um aplicativo Web ASP.NET Core C#
  • Fazer alterações no aplicativo Web
  • Explorar recursos do IDE
  • Executar o aplicativo Web

Pré-requisitos

Você precisa Visual Studio para concluir este tutorial. Visite a página de downloads do Visual Studio para obter uma versão gratuita.

Criar um projeto

Primeiro, você criará um projeto ASP.NET Core. O tipo de projeto vem com todos os arquivos de modelo que você precisará para criar um site totalmente funcional.

  1. Na janela inicial, selecione Criar um novo projeto.

    Screenshot shows the start window for Visual Studio. Create a new project option is highlighted.

  2. Na janela Criar um novo projeto , selecione C# na lista De idiomas. Em seguida, selecione Windows na lista de plataformas e na Web na lista de tipos de projeto.

    Depois de aplicar os filtros de idioma, plataforma e tipo de projeto, selecione o modelo ASP.NET Core Aplicativo Web e selecione Avançar.

    Screenshot shows the ASP.NET Core Web App project template highlighted in the New Project dialog box.

    Observação

    Se você não vir o modelo ASP.NET Core Aplicativo Web, poderá instalá-lo na janela Criar um novo projeto. Na mensagem Não encontrar o que você está procurando? Encontrada na parte inferior da lista de modelos, selecione o link Instalar mais ferramentas e recursos .

    Screenshot shows the Install more tools and features link that is part of the Not finding what you're looking for message.

    Em seguida, no Instalador do Visual Studio, selecione ASP.NET e desenvolvimento web.

    Screenshot shows the dot NET Core cross-platform development workload in the Visual Studio Installer.

    Selecione Modificar no Instalador do Visual Studio. Você pode ser solicitado a salvar seu trabalho. Em seguida, selecione Continuar para instalar a carga de trabalho.

  3. Na janela Configurar seu novo projeto, insira MyCoreApp no campo Project nome. Em seguida, selecione Avançar.

    Screenshot shows the Configure your new project window with MyCoreApp entered in the Project name field.

  4. Na janela Informações adicionais , verifique se o .NET Core 3.1 aparece no campo Estrutura de Destino . Nesta janela, você pode habilitar o suporte do Docker e adicionar suporte à autenticação. O menu suspenso para Tipo de Autenticação tem as seguintes quatro opções:

    • None. Sem autenticação.
    • Contas individuais. Essas autenticações são armazenadas em um banco de dados local ou baseado no Azure.
    • plataforma de identidade da Microsoft. Essa opção usa o Active Directory, Azure AD ou Microsoft 365 para autenticação.
    • Windows. Adequada para aplicativos da intranet.

    Deixe a caixa Habilitar Docker desmarcada e selecione Nenhum para Tipo de Autenticação. Em seguida, selecione Criar.

    Screenshot shows the default settings in the Additional information window. The Framework value is .NET Core 3.1.

    Visual Studio abrirá seu novo projeto.

  1. Na janela inicial, selecione Criar um novo projeto.

    Screenshot shows the start window for Visual Studio. Create a new project option is highlighted.

  2. Na janela Criar um novo projeto , selecione C# na lista De idiomas. Em seguida, selecione Windows na lista de plataformas e na Web na lista de tipos de projeto.

    Depois de aplicar os filtros de idioma, plataforma e tipo de projeto, selecione o modelo ASP.NET Core Aplicativo Web e selecione Avançar.

    Screenshot shows the ASP.NET Core Web App project template selected and highlighted on the Create a new project page.

    Observação

    Se você não vir o modelo ASP.NET Core Aplicativo Web, poderá instalá-lo na janela Criar um novo projeto. Na mensagem Não encontrar o que você está procurando? Encontrada na parte inferior da lista de modelos, selecione o link Instalar mais ferramentas e recursos .

    Screenshot shows the Install more tools and features link that is part of the Not finding what you're looking for message.

    Em seguida, no Instalador do Visual Studio, selecione o ASP.NET e a carga de trabalho de desenvolvimento web.

    Screenshot shows the ASP.NET and web development workload in the Visual Studio Installer.

    Selecione Modificar no Instalador do Visual Studio. Você pode ser solicitado a salvar seu trabalho. Em seguida, selecione Continuar para instalar a carga de trabalho.

  3. Na janela Configurar seu novo projeto, insira MyCoreApp no campo Project nome. Em seguida, selecione Avançar.

    Screenshot shows the Configure your new project window with MyCoreApp entered in the Project name field.

  4. Na janela Informações adicionais , verifique se o .NET 6.0 aparece no campo Estrutura de Destino . Nesta janela, você pode habilitar o suporte do Docker e adicionar suporte à autenticação. O menu suspenso para Tipo de Autenticação tem as seguintes quatro opções:

    • None. Sem autenticação.
    • Contas individuais. Essas autenticações são armazenadas em um banco de dados local ou baseado no Azure.
    • plataforma de identidade da Microsoft. Essa opção usa o Active Directory, Azure AD ou Microsoft 365 para autenticação.
    • Windows. Adequada para aplicativos da intranet.

    Deixe a caixa Habilitar Docker desmarcada e selecione Nenhum para Tipo de Autenticação. Em seguida, selecione Criar.

    Screenshot shows the default settings in the Additional information window. The Framework value is .NET 6.0.

    Visual Studio abrirá seu novo projeto.

Sobre sua solução

Esta solução segue o padrão de design da Página do Razor. Ele é diferente do padrão de design Model-View-Controller (MVC) que é simplificado para incluir o código do modelo e do controlador na própria página do Razor.

Fazer tour da sua solução

  1. O modelo de projeto cria uma solução com um único projeto ASP.NET Core chamado MyCoreApp. Selecione a guia Gerenciador de Soluções para exibir seu conteúdo.

    Screenshot shows the MyCoreApp project selected in the Solution Explorer in Visual Studio.

  2. Expanda a pasta Páginas .

    Screenshot shows the contents of the Pages folder in the the Solution Explorer in Visual Studio..

  3. Selecione o arquivo Index.cshtml e exiba o editor de código.

    Screenshot shows the Index dot c s h t m l file open in the Visual Studio code editor.

  4. Cada arquivo .cshtml tem um arquivo de código associado. Para abrir o arquivo de código no editor, expanda o nó Index.cshtml em Gerenciador de Soluções e selecione o arquivo Index.cshtml.cs.

    Screenshot shows Index dot c s h t m l file selected in the Solution Explorer in Visual Studio.

  5. Exiba o arquivo Index.cshtml.cs no editor de código.

    Screenshot shows the Index dot c s h t m l dot c s file open in the Visual Studio code editor.

  6. O projeto também contém a pasta wwwroot que é a raiz do site. Expanda a pasta para exibir seu conteúdo.

    Screenshot shows the w w w root folder selected in the Solution Explorer in Visual Studio.

    Você pode colocar conteúdo de site estático, como CSS, imagens e bibliotecas JavaScript, diretamente nos caminhos em que deseja.

  7. O projeto também contém arquivos de configuração que gerenciam o aplicativo Web em tempo de execução. A configuração de aplicativo padrão é armazenada em appsettings.json. No entanto, você pode substituir essas configurações usando appsettings.Development.json. Expanda o arquivo appsettings.json para exibir o arquivo appsettings.Development.json.

    Screenshot shows appsettings dot j son selected and expanded in the Solution Explorer in Visual Studio.

Executar, depurar e fazer alterações

  1. Selecione o botão IIS Express na barra de ferramentas para compilar e executar o aplicativo no modo de depuração. Como alternativa, pressione F5 ou vá para Depurar>Iniciar Depuração na barra de menus.

    Screenshot shows the I I S Express button highlighted in the toolbar in Visual Studio.

    Observação

    Se você receber uma mensagem de erro que diz Não é possível se conectar ao servidor Web 'IIS Express', feche Visual Studio e, em seguida, relança o programa como administrador. Você pode fazer isso clicando com o botão direito do mouse no ícone Visual Studio no Menu Iniciar e selecionando a opção Executar como administrador no menu de contexto.

    Você também pode obter uma mensagem perguntando se deseja aceitar um certificado SSL do IIS Express. Para exibir o código em um navegador da Web, selecione Sim e selecione Sim se você receber uma mensagem de aviso de segurança de acompanhamento.

  2. O Visual Studio abre uma janela do navegador. Em seguida, você deverá ver páginasPáginas de Privacidade e Páginas de Privacidade na barra de menus.

  3. Selecione Privacidade na barra de menus. A página Privacidade no navegador renderiza o texto definido no arquivo Privacy.cshtml .

    Screenshot shows the MyCoreApp Privacy page with the following text: Use this page to detail your site's privacy policy.

  4. Volte para Visual Studio e pressione Shift+F5 para interromper a depuração. Essa ação fecha o projeto na janela do navegador.

  5. Em Visual Studio, abra Privacy.cshtml para edição. Em seguida, exclua a frase, use esta página para detalhar a política de privacidade do seu site e substituí-la por Esta página está em construção a partir de @ViewData["TimeStamp"].

    Screenshot shows the Privacy dot c s h t m l file open in the Visual Studio code editor with the updated text.

  6. Agora, vamos fazer uma alteração de código. Selecione Privacy.cshtml.cs. Em seguida, limpe as using diretivas na parte superior do arquivo usando o seguinte atalho:

    Passe o mouse ou selecione uma diretiva esmaeceda using . Uma lâmpada de Ações Rápidas aparecerá logo abaixo do ponto ou na margem esquerda. Selecione a lâmpada e selecione Remover usos desnecessários.

    Screenshot shows the Privacy dot c s h t m l file in the Visual Studio code editor with the Quick Actions tooltip exposed for a greyed out using directive.

    Agora, selecione Visualizar alterações para ver o que mudará.

    Screenshot shows the Preview Changes dialog box. The dialog box shows the directive being removed, and previews the code change after the removal.

    Escolha Aplicar. O Visual Studio exclui as diretivas using desnecessárias do arquivo.

  7. Em seguida, no método OnGet(), altere o corpo para o código a seguir:

    public void OnGet()
{
   string dateTime = DateTime.Now.ToShortDateString();
   ViewData["TimeStamp"] = dateTime;
}

  8. Observe que um sublinhado ondulado aparece em DateTime. O sublinhado ondulado aparece porque esse tipo não está no escopo.

    Screenshot shows an error mark, in the form of a wavy underline, for DateTime in the Visual Studio code editor.

    Abra a barra de ferramentas Lista de Erros para ver os mesmos erros listados. Se você não vir a barra de ferramentas Lista de Erros , vá para Exibir>Lista de Erros na barra de menus superior.

    Screenshot shows the Error List toolbar in Visual Studio with DateTime listed.

  9. Vamos corrigir esse erro. No editor de código, coloque o cursor na linha que contém o erro e selecione a lâmpada Ações Rápidas na margem esquerda. Em seguida, no menu suspenso, selecione usando o Sistema; para adicionar essa diretiva à parte superior do arquivo e resolver os erros.

    Screenshot shows the Quick Actions options from its drop-down menu with a mouseover on using System.

  10. Pressione F5 para abrir seu projeto no navegador da Web.

  11. Na parte superior do site, selecione Privacidade para exibir suas alterações.

    Screenshot showing the updated Privacy page that includes the changes you made.

  12. Feche o navegador da Web, pressione Shift+F5 para interromper a depuração.

Alterar sua home page

  1. No Gerenciador de Soluções, expanda a pasta Páginas e selecione Index.cshtml.

    Screenshot shows Index dot c s h t m l selected under the Pages node in the Solution Explorer.

    O arquivo Index.cshtml corresponde à home page no aplicativo Web, que é executado em um navegador da Web.

    Screenshot shows the Home page for the web app in the browser window.

    No editor de código, você verá o código HTML do texto que aparece na home page .

    Screenshot shows the Index dot c s h t m l file for the Home page in the Visual Studio code editor.

  2. Substitua o texto de boas-vindas por Olá, Mundo!

    Screenshot shows the Index dot c s h t m l file in the Visual Studio code editor with the Welcome text changed to Hello World!.

  3. Selecione IIS Express ou pressione Ctrl+F5 para executar o aplicativo e abri-lo em um navegador da Web.

    Screenshot shows the IIS Express button highlighted in the toolbar for Visual Studio.

  4. No navegador da Web, você verá suas novas alterações na home page.

    Screenshot shows the Home page for the web app in the browser window. The updated text says Hello World!

  5. Feche o navegador da Web, pressione Shift+F5 para interromper a depuração e salve seu projeto. Agora você pode fechar Visual Studio.

Fazer tour da sua solução

  1. O modelo de projeto cria uma solução com um único projeto ASP.NET Core chamado MyCoreApp. Selecione a guia Gerenciador de Soluções para exibir seu conteúdo.

    Screenshot shows the MyCoreApp project selected and its content in the Solution Explorer in Visual Studio.

  2. Expanda a pasta Páginas .

    Screenshot shows the contents of the Pages folder in the Solution Explorer.

  3. Selecione o arquivo Index.cshtml e exiba o editor de código.

    Screenshot shows the Index.cshtml file open in the Visual Studio code editor.

  4. Cada arquivo .cshtml tem um arquivo de código associado. Para abrir o arquivo de código no editor, expanda o nó Index.cshtml em Gerenciador de Soluções e selecione o arquivo Index.cshtml.cs.

    Screenshot shows Index.cshtml file selected in the Solution Explorer in Visual Studio.

  5. Exiba o arquivo Index.cshtml.cs no editor de código.

    Screenshot shows the Index.cshtml.cs file open in the Visual Studio code editor.

  6. O projeto também contém a pasta wwwroot que é a raiz do site. Expanda a pasta para exibir seu conteúdo.

    Screenshot shows the w w w root folder selected in the Solution Explorer in Visual Studio.

    Você pode colocar conteúdo de site estático, como CSS, imagens e bibliotecas JavaScript, diretamente nos caminhos em que deseja.

  7. O projeto também contém arquivos de configuração que gerenciam o aplicativo Web em tempo de execução. A configuração de aplicativo padrão é armazenada em appsettings.json. No entanto, você pode substituir essas configurações usando appsettings.Development.json. Expanda o arquivo appsettings.json para exibir o arquivo appsettings.Development.json.

    Screenshot shows appsettings.json selected and expanded, which exposes appsettings.Development.json, in the Solution Explorer in Visual Studio.

Executar, depurar e fazer alterações

  1. Selecione o botão IIS Express na barra de ferramentas para criar e executar o aplicativo no modo de depuração. Como alternativa, pressione F5 ou vá para Depurar>Iniciar Depuração na barra de menus.

    Screenshot shows the I I S Express button highlighted in the toolbar in Visual Studio.

    Observação

    Se você receber uma mensagem de erro que diz Não é possível se conectar ao servidor Web 'IIS Express', feche Visual Studio e, em seguida, relança o programa como administrador. Você pode fazer isso clicando com o botão direito do mouse no ícone Visual Studio no Menu Iniciar e selecionando a opção Executar como administrador no menu de contexto.

    Você também pode obter uma mensagem perguntando se deseja aceitar um certificado SSL do IIS Express. Para exibir o código em um navegador da Web, selecione Sim e selecione Sim se você receber uma mensagem de aviso de segurança de acompanhamento.

  2. O Visual Studio abre uma janela do navegador. Em seguida, você deverá ver páginasPáginas de Privacidade e Páginas de Privacidade na barra de menus.

  3. Selecione Privacidade na barra de menus. A página Privacidade no navegador renderiza o texto definido no arquivo Privacy.cshtml .

    Screenshot shows the MyCoreApp Privacy page with the following text: Use this page to detail your site's privacy policy.

  4. Volte para Visual Studio e pressione Shift+F5 para interromper a depuração. Essa ação fecha o projeto na janela do navegador.

  5. Em Visual Studio, abra Privacy.cshtml para edição. Em seguida, exclua a frase, use esta página para detalhar a política de privacidade do seu site e substituí-la por Esta página está em construção a partir de @ViewData["TimeStamp"].

    Screenshot shows the Privacy.cshtml file open in the Visual Studio code editor with the updated text.

  6. Agora, vamos fazer uma alteração de código. Selecione Privacy.cshtml.cs. Em seguida, limpe as using diretivas na parte superior do arquivo selecionando o seguinte atalho:

    Passe o mouse ou selecione uma diretiva esmaeceda using . Uma lâmpada de Ações Rápidas aparecerá logo abaixo do ponto ou na margem esquerda. Selecione a lâmpada e selecione Remover usos desnecessários.

    Screenshot shows the Privacy.cshtml file in the Visual Studio code editor with the Quick Actions tooltip open and Preview changes highlighted.

    Agora, selecione Visualizar alterações para ver o que mudará.

    Screenshot shows the Preview Changes dialog box. The dialog box shows the directive being removed, and previews the code change after the removal.

    Escolha Aplicar. O Visual Studio exclui as diretivas using desnecessárias do arquivo.

  7. Em seguida, crie uma cadeia de caracteres para a data atual formatada para sua cultura ou região usando o método DateTime.ToString .

    • O primeiro argumento para o método especifica como a data deve ser exibida. Este exemplo usa o especificador de formato (d) que indica o formato de data curta.
    • O segundo argumento é o objeto CultureInfo que especifica a cultura ou a região para a data. O segundo argumento determina, entre outras coisas, a linguagem de qualquer palavra na data e o tipo de separadores usados.

Altere o corpo do OnGet() método para o seguinte código:

public void OnGet()
{
   string dateTime = DateTime.Now.ToString("d", new CultureInfo("en-US"));
   ViewData["TimeStamp"] = dateTime;
}

  1. Observe que um sublinhado ondulado aparece em CultureInfo. O sublinhado ondulado aparece porque esse tipo não está no escopo.

    Screenshot shows an error mark, in the form of a wavy underline, for CultureInfo in the Visual Studio code editor.

    Abra a barra de ferramentas Lista de Erros para ver o mesmo erro listado lá. Se você não vir a barra de ferramentas Lista de Erros , vá para Exibir>Lista de Erros na barra de menus superior.

    Screenshot shows the Error List toolbar in Visual Studio with CultureInfo listed, and is missing a using directive.

  2. Vamos corrigir esse erro. No editor de código, coloque o cursor na linha que contém o erro e selecione a lâmpada Ações Rápidas na margem esquerda. Em seguida, no menu suspenso, selecione usar System.Globalization; para adicionar essa diretiva à parte superior do arquivo e resolver os erros.

    Screenshot shows the Quick Actions options from its drop-down menu with a mouseover on System.Globalization directive.

  3. Pressione F5 para abrir seu projeto no navegador da Web.

  4. Na parte superior do site, selecione Privacidade para exibir suas alterações.

    Screenshot showing the Privacy page of the MyCoreApp that includes the changes made to add the date.

  5. Feche o navegador da Web, pressione Shift+F5 para interromper a depuração.

Alterar sua home page

  1. No Gerenciador de Soluções, expanda a pasta Páginas e selecione Index.cshtml.

    Screenshot shows Index.cshtml selected under the Pages node in the Solution Explorer.

    O arquivo Index.cshtml corresponde à home page no aplicativo Web, que é executado em um navegador da Web.

    Screenshot shows the Home page for the web app in the browser window.

    No editor de código, você verá o código HTML do texto que aparece na home page .

    Screenshot shows the Index.cshtml file for the Home page in the Visual Studio code editor.

  2. Substitua o texto de boas-vindas por Olá, Mundo!

    Screenshot shows the Index.cshtml file in the Visual Studio code editor with the 'Welcome' text changed to 'Hello World!'.

  3. Selecione IIS Express ou pressione Ctrl+F5 para executar o aplicativo e abri-lo em um navegador da Web.

    Screenshot shows the IIS Express button highlighted in the toolbar for Visual Studio.

  4. No navegador da Web, você verá suas novas alterações na home page.

    Screenshot shows the Home page for the web app in the browser window. The updated text says 'Hello World!'

  5. Feche o navegador da Web, pressione Shift+F5 para interromper a depuração e salve seu projeto. Agora você pode fechar Visual Studio.

Próximas etapas

Parabéns por concluir este tutorial. Esperamos que você tenha gostado de aprender sobre C#, ASP.NET Core e o Visual Studio IDE. Para saber mais sobre como criar um aplicativo Web ou site com C# e ASP.NET, continue com o seguinte tutorial:

Criar um aplicativo Web Razor Pages com ASP.NET Core

Ou saiba como colocar seu aplicativo Web em contêineres com o Docker:

Ferramentas de Contêiner no Visual Studio

Confira também

Publicar seu aplicativo Web no Serviço de Aplicativo do Azure usando o Visual Studio