Durante a instalação, a carga de trabalho ASP.NET e desenvolvimento Web deve estar selecionada (o link de instalação acima já pré-seleciona essa opção).
Já tem o Visual Studio 2022?
Se você já tiver o Visual Studio 2022, poderá adicionar a carga de trabalho ASP.NET e desenvolvimento Web:
Selecione a tecla Windows, digite Instalador do Visual Studio e pressione Enter.
Se solicitado, permita que o instalador se atualize.
Se uma atualização do Visual Studio 2022 estiver disponível, um botão Atualizar será mostrado. Selecione-o para atualizar antes de modificar a instalação.
Localize sua instalação do Visual Studio 2022 e selecione o botão Modificar.
Se ainda não estiver selecionado, selecione a carga de trabalho ASP.NET e desenvolvimento Web e selecione o botão Modificar. Caso contrário, basta fechar a janela de diálogo.
Para começar a criar aplicativos .NET, baixe e instale o SDK do .NET (Kit de desenvolvimento de software).
Se você estiver em um Mac com um chip Apple M1, precisará instalar a versão Arm64 do SDK.
Verifique se tudo foi instalado corretamente
Depois de instalar, abra um novo terminal e execute o seguinte comando:
Command prompt
dotnet
Se a instalação for bem-sucedida, você deverá ver uma saída semelhante à seguinte:
Command prompt
Usage: dotnet [options]Usage: dotnet [path-to-application]Options:-h|--help Display help.--info Display .NET information.--list-sdks Display the installed SDKs.--list-runtimes Display the installed runtimes.path-to-application:The path to an application .dll file to execute.
Se tudo estiver certo, selecione o botão Continuar abaixo para ir para a próxima etapa.
Encontrou um erro?
Se você receber um erro zsh: comando não encontrado: dotnet, verifique se você abriu uma nova janela de terminal. Se o problema não for resolvido, use o botão Ocorreu um problema para obter ajuda para corrigir o problema.
Se você receber um erro dotnet: comando não encontrado, verifique se você abriu uma nova janela de terminal. Se o problema não for resolvido, use o botão Ocorreu um problema para obter ajuda para corrigir o problema.
Criar seu aplicativo
Inicie o Visual Studio e selecione Criar um novo projeto.
Na janela Criar um novo projeto, digite Blazor na caixa de pesquisa e pressione Enter.
Selecione o modelo Aplicativo Blazor Server e selecione Avançar.
Na janela Configurar seu novo projeto, insira BlazorApp como o nome do projeto e selecione Avançar.
Na janela Informações adicionais, selecione .NET 7.0 (Standard Term Support) no menu suspenso Estrutura, se ainda não estiver selecionado, e clique no botão Criar.
Seu projeto é criado e carregado no Visual Studio. Dê uma olhada no conteúdo do seu projeto usando o Gerenciador de Soluções.
Vários arquivos foram criados para fornecer a você um aplicativo Blazor simples pronto para ser executado.
Program.cs é o ponto de entrada para o aplicativo que inicia o servidor e onde você configura os serviços de aplicativo e middleware.
O App.razor é o componente raiz do aplicativo.
O diretório Pages contém algumas páginas da Web de exemplo para o aplicativo.
BlazorApp.csproj define o projeto do aplicativo e suas dependências. Ele pode ser exibido clicando duas vezes no nó do projeto BlazorApp no Gerenciador de Soluções.
O arquivo launchSettings.json dentro do diretório Properties define diferentes configurações de perfil para o ambiente de desenvolvimento local. Um número de porta é atribuído automaticamente na criação do projeto e salvo neste arquivo.
Se tudo estiver certo, selecione o botão Continuar abaixo para ir para a próxima etapa.
Em seu terminal, execute o seguinte comando para criar seu aplicativo:
Command prompt
dotnet new blazorserver -o BlazorApp --no-https -f net7.0
Esse comando cria seu novo projeto do aplicativo Blazor e o coloca em um novo diretório chamado BlazorApp dentro do seu local atual.
Navegue até o novo BlazorApp criado pelo comando anterior:
Command prompt
cd BlazorApp
Dê uma olhada no conteúdo do diretório do BlazorApp. Vários arquivos foram criados no diretório do BlazorApp, para oferecer a você um aplicativo simples e mais rápido que está pronto para execução.
Program.cs é o ponto de entrada para o aplicativo que inicia o servidor e onde você configura os serviços de aplicativo e middleware.
O App.razor é o componente raiz do aplicativo.
O diretório Pages contém algumas páginas da Web de exemplo para o aplicativo.
O BlazorApp.csproj define o projeto do aplicativo e suas dependências.
O arquivo launchSettings.json dentro do diretório Properties define diferentes configurações de perfil para o ambiente de desenvolvimento local. Um número de porta variando entre 5000 e 5300 é atribuído automaticamente na criação do projeto e salvo neste arquivo.
Anote o caminho do diretório do BlazorApp, pois você o usará posteriormente no tutorial.
Se tudo estiver certo, selecione o botão Continuar abaixo para ir para a próxima etapa.
Executar seu aplicativo
Clique no botão Iniciar depuração (seta verde) na barra de ferramentas de depuração no Visual Studio para executar seu aplicativo.
Depois que o aplicativo estiver em execução, você poderá aplicar alterações de código ao aplicativo em execução clicando no botão Recarga Dinâmica.
Você pode parar o aplicativo a qualquer momento clicando no botão Parar na barra de ferramentas superior.
Na primeira vez que você executar um aplicativo Web no Visual Studio, ele criará um certificado de desenvolvimento para hospedar o aplicativo em HTTPS e, em seguida, solicitará que você confie no certificado. Recomendamos que você concorde em confiar no certificado. O certificado será usado somente para desenvolvimento local e sem ele a maioria dos navegadores reclamarão sobre a segurança do site.
Aguarde até que o aplicativo seja iniciado no navegador. Após acessar a página a seguir, você terá executado com êxito seu primeiro aplicativo Blazor!
Em seu terminal, execute o seguinte comando:
Command prompt
dotnet watch
O comando dotnet watch criará e iniciará o aplicativo e, em seguida, atualizará o aplicativo sempre que você fizer alterações de código. Você pode parar o aplicativo a qualquer momento selecionando Ctrl+C.
Aguarde que o aplicativo exiba que está ouvindo em http://localhost:<port number> e que o navegador seja iniciado nesse endereço.
Aguarde até que o aplicativo exiba que está ouvindo em http://localhost:<port number> e, em seguida, abra um navegador e navegue até esse endereço. Neste exemplo, o dotnet watch mostrou que estava ouvindo em http://localhost:7178
Depois de acessar a página a seguir, você terá executado com êxito seu primeiro aplicativo Blazor!
A página exibida é definida pelo arquivo Index.razor localizado dentro do diretório Pages. Esta é a aparência de seu conteúdo:
Pages/Index.razor
@page "/"<PageTitle>Index</PageTitle><h1>Hello, world!</h1>Welcome to your new app.<SurveyPrompt Title="How is Blazor working for you?" />
Ele já contém o código que o define como a página inicial e exibe o texto Hello, world! e Welcome to your new app. Ele também inclui um componente SurveyPrompt que renderiza um link para a pesquisa de comentário da Blazor.
Encontrou um erro?
Se você receber uma mensagem de erro dizendo "Sua conexão não é privada" com o código de erro NET::ERR_CERT_INVALID, tente reiniciar todas as janelas do navegador para que o novo certificado possa ser obtido pelo navegador e execute o aplicativo novamente.
Se o problema não for resolvido, selecione o botão Ocorreu um problema abaixo para obter ajuda para corrigir o problema.
Experimente o contador
No aplicativo em execução, navegue até a página Contador clicando na guia Contador na barra lateral à esquerda. A página a seguir deve ser exibida:
Selecione o botão Clique em mim para incrementar a contagem sem uma atualização de página. Incrementar um contador em uma página da Web normalmente requer escrever JavaScript, mas com o Blazor, você pode usar C#.
Você pode encontrar a implementação do componente Counter no arquivo Counter.razor localizado no diretório Pages.
Uma solicitação de /counter no navegador, conforme especificado pela diretiva @page na parte superior, faz com que o componente Counter renderize seu conteúdo.
Sempre que o botão clicar em mim é selecionado:
O evento onclick é acionado.
O método IncrementCount é chamado.
O currentCount é incrementado.
O componente é renderizado para mostrar a quantidade atualizada.
Adicionar um componente
Cada um dos arquivos .razor define um componente de interface do usuário que pode ser reutilizado.
Abra o arquivo Index.razor no Visual Studio. O arquivo Index.razor já existe e foi criado quando você criou o projeto. Ele está localizado na pasta Pages dentro do diretório BlazorApp criado anteriormente.
Abra o arquivo Index.razor em um editor de texto de sua escolha. O arquivo Index.razor já existe e foi criado quando você executou o comando dotnet new. Ele está localizado na pasta Pages dentro do diretório BlazorApp que foi criado anteriormente.
Adicione um componente Counter à Home Page do aplicativo adicionando um elemento <Counter /> no final do arquivo Index.razor.
Pages/Index.razor
@page "/"<PageTitle>Index</PageTitle><h1>Hello, world!</h1>Welcome to your new app.<SurveyPrompt Title="How is Blazor working for you?" /><Counter />
Clique na Recarga Dinâmica para aplicar a alteração ao aplicativo em execução. O componente Counter será exibido na home page.
Depois que essa alteração for salva, o comando dotnet watch aplicará a alteração ao aplicativo em execução para que o componente Counter seja exibido na home page.
Modificar um componente
Os parâmetros de componente são especificados usando atributos ou conteúdo filho, que permitem definir propriedades no componente filho. Defina um parâmetro no componente Counter para especificar o quanto ele é incrementado a cada clique no botão:
Adicione uma propriedade pública para IncrementAmount com um atributo [Parameter].
Altere o método IncrementCount para usar IncrementAmount ao incrementar o valor de currentCount.
O código a seguir mostra como obtê-lo. As linhas realçadas mostram as alterações.
Em Index.razor, atualize o elemento <Counter> para adicionar um atributo IncrementAmount que altera o valor do incremento para dez, conforme mostrado pela linha realçada no seguinte código:
Pages/Index.razor
@page "/"<h1>Hello, world!</h1>Welcome to your new app.<SurveyPrompt Title="How is Blazor working for you?" /><Counter IncrementAmount="10" />
Aplique a alteração no aplicativo ao clicar no botão Recarga Dinâmica. O componente Index agora tem seu próprio contador que incrementa em dez sempre que o botão Clique-me estiver selecionado, como mostrado na imagem a seguir. O componente Counter (Counter.razor) em /counter continua a incrementar em um.
O componente Index agora tem seu próprio contador que incrementa em dez sempre que o botão Clique-me estiver selecionado, como mostrado na imagem a seguir. O componente Counter (Counter.razor) em /counter continua a incrementar em um.
Próximas etapas
Parabéns, você criou e executou seu primeiro aplicativo Blazor!
Continuar aprendendo
Agora que você tem as noções básicas, continue criando seu primeiro aplicativo Blazor com o módulo de aprendizado autoguiado do Blazor no Microsoft Learn onde você criará um aplicativo de lista de tarefas pendentes.
Veja a série Introdução ao Desenvolvimento para a Web em 6 partes com .NET! Aqui, você criará projetos incríveis e aprenderá tudo sobre Razor Pages, APIs Mínimas, Blazor e muito mais.
