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

  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 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, 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 o .NET 9.0 aparece no campo Estrutura .

    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) 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 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 w w w 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 Home 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 Pré-visualização de Alterações. A caixa de diálogo mostra a diretiva sendo removida e exibe a alteração de código após a remoção.

    Selecione 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, a linguagem 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 ver 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 à sua página Página Inicial no aplicativo web, que é executado em um navegador de internet.

    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.

Fazer tour da 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 w w w 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 Home 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 Pré-visualização de Alterações. A caixa de diálogo mostra a diretiva sendo removida e exibe a alteração de código após a remoção.

    Selecione 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, a linguagem 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 ver 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 à sua página Página Inicial no aplicativo web, que é executado em um navegador de internet.

    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: