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 prompt de comando e execute o seguinte comando:
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 'dotnet' não é reconhecido como um comando interno ou externo, verifique se você abriu um novo prompt de comando. Se você não puder resolver o problema, use o botão ocorreu um problema para obter ajuda para corrigir o problema.
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
Em seu prompt de comando, execute o seguinte comando para criar seu aplicativo:
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.
Encontrou um erro?
Não foi possível criar uma mensagem semelhante ao Template "Blazor Server App". 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:
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.
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.
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 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 />
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" />
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.
