Se você estiver em um Mac com um chip Apple M1 ou M2, precisará instalar a versão Arm64 do SDK.
Verifique se tudo foi instalado corretamente
Depois de instalar, abra um novo prompt de comando e execute o seguinte comando:
Depois de instalar, abra um novo terminal e execute o seguinte comando:
Command prompt
dotnet --version
Se a instalação tiver sido bem-sucedida, você deverá ver a versão 8.0.100 ou superior sendo exibida:
Command prompt
8.0.100
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 'dotnet' não é reconhecido como um comando interno ou externo, verifique se você abriu um novo prompt de comando. Se a reinicialização do computador não resolver o problema, use o botão Encontrei um problema para obter ajuda para corrigir o problema.
Criar seu aplicativo
Em seu prompt de comando, execute o seguinte comando para criar seu aplicativo:
Command prompt
dotnet new blazor -o BlazorApp
Esse comando cria seu novo projeto do Aplicativo Web Blazor e o coloca em um novo diretório chamado BlazorApp na sua localização 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.
Command prompt
dir
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.
Dentro do diretório Components:
O App.razor é o componente raiz do aplicativo.
Routes.razor configura o roteador Blazor.
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 é 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.
Encontrou um erro?
Se você receber uma mensagem semelhante a O modelo "Blazor Web App" não pôde ser criado. O acesso ao caminho 'C:\Windows\System32\BlazorApp' foi negado, altere seu diretório atual para um em que você tenha permissões para criar uma nova pasta e tente executar o comando novamente.
Se o Windows não encontrar o SDK ao tentar criar o projeto e você tiver certeza de que instalou o SDK, seu computador poderá ter um problema com a variável de ambiente PATH. Confira esta postagem do Stack Overflow para obter instruções sobre como diagnosticar e corrigir esse problema.
Se o problema não for resolvido, selecione o botão Ocorreu um problema abaixo para obter ajuda para corrigir o problema.
Executar seu aplicativo
Em seu prompt de comando, 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.
Depois de acessar a página a seguir, você terá executado com êxito seu primeiro aplicativo Blazor!
A página exibida é definida pelo arquivo Home.razor localizado no diretório Components/Pages. Esta é a aparência do seu conteúdo:
Components/Pages/Home.razor
@page "/"<PageTitle>Home</PageTitle><h1>Hello, world!</h1>Welcome to your new app.
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. O componente PageTitle define o título da página atual para que ele seja exibido na guia do navegador.
Encontrou um erro?
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 Components/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 Home.razor em um editor de texto dHome.razor sua escolha. O arquivo Home.razor já existe e foi criado quando você executou o comando dotnet new. Ele está localizado na pasta Components/Pages no diretório BlazorApp criado anteriormente.
Adicione um componente Counter à página Inicial do aplicativo adicionando um elemento <Counter /> ao final do arquivo Home.razor.
Components/Pages/Home.razor
@page "/"<PageTitle>Home</PageTitle><h1>Hello, world!</h1>Welcome to your new app.<Counter />
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.
Components/Pages/Counter.razor
@page "/counter"@rendermode InteractiveServer<PageTitle>Counter</PageTitle><h1>Counter</h1><p role = "status">Current count: @currentCount</p><button class="btn btn-primary" @onclick="IncrementCount">Click me</button>@code { private int currentCount = 0; [Parameter] public int IncrementAmount { get; set; } = 1; private void IncrementCount() { currentCount += IncrementAmount; }}
Em Home.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 código a seguir:
Components/Pages/Home.razor
@page "/"<PageTitle>Home</PageTitle><h1>Hello, world!</h1>Welcome to your new app.<Counter IncrementAmount="10" />
O componente Home já tem seu respectivo contador que aumenta em dez cada vez que o botão Click me é selecionado, conforme mostrado na imagem a seguir. O componente Counter (Counter.razor) no /counter continua a ser incrementado 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.