Compartilhar via


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

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

Este tutorial mostra como:

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

Pré-requisitos

Para concluir este tutorial, você precisa:

  • Visual Studio instalado. Visite a página de downloads do Visual Studio para obter uma versão gratuita. Para obter mais informações sobre como atualizar para a versão mais recente do Visual Studio, consulte atualizações do Visual Studio.
  • A carga de trabalho para ASP.NET e desenvolvimento da Web instalada. Para verificar ou instalar essa carga de trabalho no Visual Studio, selecione Ferramentas>Obter Ferramentas e Recursos. Para obter mais informações, consulte Modificar cargas de trabalho ou componentes individuais.

Criar um projeto

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

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

    Captura de tela mostra a janela inicial do Visual Studio. A opção Criar um novo projeto está realçada.

  2. Na janela Criar um novo projeto, selecione C# na lista de idiomas. Em seguida, selecione o Windows na lista de plataformas e 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 Web App e, em seguida, selecione Avançar.

    Captura de tela que mostra o modelo de projeto do ASP.NET Core Web App realçado na caixa de diálogo Novo Projeto no Visual Studio.

  3. Na janela Configurar seu novo projeto, insira MyCoreApp no campo Nome do Projeto. Em seguida, selecione Próximo.

    Captura de tela que mostra a janela Configurar seu novo projeto no Visual Studio com MyCoreApp inserido no campo Nome do Projeto.

  4. Na janela Informações adicionais, verifique se .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 do Tipo de Autenticação tem as quatro opções a seguir:

    • Nenhum: nenhuma 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 a ID do Microsoft Entra ou o Microsoft 365 para autenticação.
    • Windows: adequado para aplicativos de intranet.

    Deixe a caixa Habilitar Docker desmarcada e selecione Nenhum em Tipo de Autenticação.

    Captura de tela que mostra as configurações padrão na janela Informações adicionais em que a estrutura de destino está definida como .NET Core 3.1.

  5. Selecione Criar.

O Visual Studio abre seu novo projeto.

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

    Captura de tela mostra a janela inicial do Visual Studio. A opção Criar um novo projeto está realçada.

  2. Na janela Criar um novo projeto, selecione C# na lista Linguagem. Em seguida, selecione Windows na lista Todas as plataformas, e Web na lista Todos os tipos de projeto.

    Depois de aplicar os filtros de idioma, plataforma e tipo de projeto, selecione o modelo ASP.NET Core Web App (Razor Pages) e em seguida selecione Avançar.

    Captura de tela que mostra o modelo de projeto do ASP.NET Core Web App selecionado e realçado na página Criar um novo projeto.

  3. Na janela Configurar seu novo projeto, digite MyCoreApp no campo Nome do projeto. Em seguida, selecione Próximo.

    Captura de tela que mostra a janela Configurar seu novo projeto no Visual Studio com MyCoreApp inserido no campo Nome do Projeto.

  4. Na janela Informações adicionais, verifique se o .NET 8.0 aparece no campo Estrutura de destino.

    Nesta janela, você pode habilitar o suporte ao contêiner e adicionar suporte à autenticação. O menu suspenso do Tipo de Autenticação tem as quatro opções a seguir:

    • Nenhum: nenhuma 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 a ID do Microsoft Entra ou o Microsoft 365 para autenticação.
    • Windows: adequado para aplicativos de intranet.

    Deixe a caixa Habilitar suporte ao contêiner desmarcada e selecione Nenhum em Tipo de Autenticação.

    Captura de tela que mostra as configurações padrão na janela Informações adicionais em que a estrutura de destino está definida como .NET 8.0.

  5. Selecione Criar.

O Visual Studio abre 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), pois é simplificado para incluir o modelo e o código do controlador dentro da própria Página Razor.

Fazer um tour pela sua solução

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

    Captura de tela mostra o projeto MyCoreApp selecionado no Gerenciador de Soluções no Visual Studio.

  2. Expanda a pasta Páginas.

    Captura de tela mostra o conteúdo da pasta Páginas no Gerenciador de Soluções no Visual Studio.

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

    Captura de tela mostra o arquivo Index dot c s h t m l aberto no editor de código do Visual Studio.

  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 no Gerenciador de Soluções e selecione o arquivo Index.cshtml.cs.

    Captura de tela mostra o arquivo Index dot c s h t m l selecionado no Gerenciador de Soluções no Visual Studio.

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

    Captura de tela mostra o arquivo Index dot c s h t m l dot c s aberto no editor de código do Visual Studio.

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

    A captura de tela mostra a pasta raiz www selecionada no Gerenciador de Soluções no Visual Studio.

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

    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 de é armazenada em appsettings.json. No entanto, você pode substituir essas configurações usando appsettings.Development.json.

  7. Expanda o arquivo appsettings.json para exibir o arquivo appsettings.Development.json.

    Captura de tela mostra appsettings.json selecionado e expandido no Gerenciador de Soluções do Visual Studio.

Executar, depurar e fazer alterações

  1. Na barra de ferramentas, selecione o botão IIS Express 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.

    Captura de tela mostra o botão I S Express realçado na barra de ferramentas no Visual Studio.

    Nota

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

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

  2. O Visual Studio inicia uma janela do navegador. Em seguida, você deverá ver as páginas Página inicial e 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.

    Captura de tela mostra a página Privacidade do MyCoreApp com o seguinte texto: Use esta página para detalhar a política de privacidade do seu site.

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

  5. No 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 site e substituí-la por Esta página está em construção a partir de @ViewData["TimeStamp"].

    Captura de tela mostra o arquivo Privacy dot c s h t m l aberto no editor de código do Visual Studio com o texto atualizado.

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

    Diretiva mouseover or select a greyed out using. Uma lâmpada de Ações Rápidas aparece abaixo do cursor ou na margem esquerda. Selecione a lâmpada e, em seguida, Remover usings desnecessários.

    A captura de tela mostra o arquivo Privacy.cshtml no editor Visual Studio Code com a dica de ferramenta Ações Rápidas exposta para uma diretiva using esmaecida.

    Agora, selecione Pré-visualizar alterações para ver as alterações.

    Captura de tela mostra a caixa de diálogo Pré-visualização de Alterações. A caixa de diálogo mostra a diretiva sendo removida e mostra a alteração no código após a remoção.

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

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

    public void OnGet()
    {
       string dateTime = DateTime.Now.ToShortDateString();
       ViewData["TimeStamp"] = dateTime;
    }
    
  8. Observe que um sublinhado ondulado será exibido em DateTime. O sublinhado ondulado será exibido porque esse tipo não está no escopo.

    Captura de tela mostra uma marca de erro, na forma de um sublinhado ondulado, para DateTime no editor de código do Visual Studio.

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

    A captura de tela mostra a barra de ferramentas Lista de Erros no Visual Studio com DateTime listado.

  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. No menu suspenso, selecione using System; para adicionar essa diretiva no topo do arquivo e resolver os erros.

    A captura de tela mostra as opções de Ações Rápidas no menu suspenso com um mouseover on using System.

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

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

    Captura de tela mostrando a página privacidade atualizada que inclui as alterações feitas.

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

Alterar sua home page

  1. No Explorador de Soluções, expanda a pasta Pages e selecione Index.cshtml.

    A captura de tela mostra o Index.cshtml selecionado no nó Páginas no Gerenciador de Soluções.

    O arquivo Index.cshtml corresponde à página Inicial no aplicativo Web, que é executado em um navegador da Web.

     Captura de tela mostra a home page do aplicativo Web na janela do navegador.

    No editor de código, você vê o código HTML do texto que aparece na página inicial .

    Captura de tela mostrando o arquivo index.c s h t m l para a página inicial no editor de código do Visual Studio.

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

    Captura de tela mostra o arquivo Index dot c s h t m l no editor de código do Visual Studio com o texto de boas-vindas alterado para Hello World!.

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

    Captura de tela mostra o botão IIS Express realçado na barra de ferramentas do Visual Studio.

  4. No navegador da Web, você verá suas novas alterações na Página inicial.

    Captura de tela mostra a home page do aplicativo Web na janela do navegador. O texto atualizado diz Olá, Mundo!

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

Fazer um tour pela sua solução

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

    Captura de tela mostra o projeto MyCoreApp selecionado e seu conteúdo no Gerenciador de Soluções no Visual Studio.

  2. Expanda a pasta Páginas.

    Captura de tela mostra o conteúdo da pasta Páginas no Gerenciador de Soluções.

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

    Captura de tela mostra o arquivo Index.cshtml aberto no editor do Visual Studio Code.

  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 no Gerenciador de Soluções e selecione o arquivo Index.cshtml.cs.

    Captura de tela mostra o arquivo Index.cshtml selecionado no Gerenciador de Soluções no Visual Studio.

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

    Captura de tela mostra o arquivo Index.cshtml.cs aberto no editor do Visual Studio Code.

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

    A captura de tela mostra a pasta raiz www selecionada no Gerenciador de Soluções no Visual Studio.

    Você pode colocar conteúdo de site estático, como CSS, imagens e bibliotecas JavaScript diretamente nos caminhos onde 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.

    Captura de tela mostra appsettings.json selecionado e expandido, o que expõe appsettings.Development.jsonno Gerenciador de Soluções no Visual Studio.

Executar, depurar e fazer alterações

  1. Na barra de ferramentas, selecione o botão https 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.

    Captura de tela mostra o botão https realçado na barra de ferramentas no Visual Studio.

    Nota

    Você também pode receber uma mensagem que pergunta se deseja aceitar um certificado SSL do ASP.NET Core. Para exibir o código em um navegador da Web, selecione Sime selecione Sim se receber uma mensagem de aviso de segurança de acompanhamento. Saiba mais sobre a imposição de SSL no ASP.NET Core.

  2. O Visual Studio inicia uma janela do navegador. Em seguida, você deverá ver as páginas Página inicial e 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.

    Captura de tela mostra a página Privacidade do MyCoreApp com o seguinte texto: Use esta página para detalhar a política de privacidade do seu site.

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

  5. No 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 site e substituí-la por Esta página está em construção a partir de @ViewData["TimeStamp"].

    Captura de tela mostra o arquivo Privacy.cshtml aberto no editor do Visual Studio Code com o texto atualizado.

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

    Diretiva mouseover or select a greyed out using. Uma lâmpada de Ações Rápidas aparece abaixo do cursor ou na margem esquerda. Selecione o ícone de lâmpada e a seta de expansão ao lado de Remover usos desnecessários.

    A captura de tela mostra o arquivo Privacy.cshtml no editor de Visual Studio Code com a dica de ferramenta de Ações Rápidas aberta e a opção Visualizar alterações realçada.

    Agora, selecione Pré-visualizar alterações para ver as alterações.

    Captura de tela mostra a caixa de diálogo Visualizar Alterações. A caixa de diálogo mostra a diretiva sendo removida e exibe a alteração no código após a remoção.

    Selecione e Aplicar. O Visual Studio exclui as diretivas de 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 da data. O segundo argumento determina, entre outras coisas, o idioma das palavras na data e o tipo de separadores usados.

    Altere o corpo do método OnGet() em Privacy.cshtml.cs para o seguinte código:

    public void OnGet()
    {
       string dateTime = DateTime.Now.ToString("d", new CultureInfo("en-US"));
       ViewData["TimeStamp"] = dateTime;
    }
    
  8. Observe que a seguinte diretiva de using é adicionada automaticamente à parte superior do arquivo:

    using System.Globalization;
    

    System.Globalization contém a classe CultureInfo.

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

  10. Na parte superior do site, selecione Privacidade para visualizar suas alterações.

    Captura de tela mostrando a página Privacidade do MyCoreApp que inclui as alterações feitas para adicionar a data.

  11. 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.

    A captura de tela mostra o Index.cshtml selecionado no nó Páginas no Gerenciador de Soluções.

    O arquivo Index.cshtml corresponde à página Inicial no aplicativo Web, que é executado em um navegador da Web.

    Captura de tela mostra a home page do aplicativo Web na janela do navegador.

    No editor de código, você verá o código HTML para o texto que aparece na Página inicial.

    Captura de tela mostra o arquivo Index.cshtml para a home page no editor do Visual Studio Code.

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

    Captura de tela mostra o arquivo Index.cshtml no editor do Visual Studio Code com o texto 'Bem-vindo' alterado para 'Olá, Mundo!'.

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

    Captura de tela mostra o botão https realçado na barra de ferramentas do Visual Studio.

  4. No navegador da Web, você verá suas novas alterações na Página inicial.

    Captura de tela mostra a home page do aplicativo Web na janela do navegador. O texto atualizado diz

  5. Feche o navegador da Web, pressione Shift+ F5 para interromper a depuração e salvar seu projeto. Agora você pode fechar o 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 IDE do Visual Studio. Para saber mais sobre como criar um aplicativo Web ou site com C# e ASP.NET, continue com o seguinte tutorial:

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