Crie seu primeiro aplicativo Web com o ASP.NET Core usando o Blazor
Intro
Finalidade
Crie seu primeiro aplicativo Web com o ASP.NET Core usando o Blazor.
Pré-requisitos
Nenhum.
macOS 10.15 ou versões posteriores.
Tempo até a conclusão:
10 a 15 minutos
Situação
Criar, usar e modificar um componente de contador simples.
Prefere usar o Visual Studio?
Experimente nosso tutorial do Visual Studio.
Baixar e instalar
Para começar a criar aplicativos .NET, baixe e instale o SDK do .NET.
Baixar o SDK do .NET 8 (64 bits)
Download de 32 bits
|
Download do Arm64
Você precisa instalar dependências adicionais nas versões mais antigas do Windows. Consulte Windows 7/8.1/Server 2012 para obter mais informações.
Download do SDK do .NET 8 x64 (Intel)
Download do SDK do .NET 8 Arm64 (Apple Silicon)
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:
dotnet --version
Se a instalação tiver sido bem-sucedida, você deverá ver a versão 8.0.100 ou superior sendo exibida:
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:
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:
cd BlazorApp
Dê uma olhada no conteúdo do diretório do BlazorApp
.
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
- O
BlazorApp.csproj
define o projeto do aplicativo e suas dependências. - O arquivo
launchSettings.json
dentro do diretórioProperties
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:
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:
@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
.
@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;
private void IncrementCount()
{
currentCount++;
}
}
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
.
@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 usarIncrementAmount
ao incrementar o valor decurrentCount
.
O código a seguir mostra como obtê-lo. As linhas realçadas mostram as alterações.
@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:
@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.
Microsoft Learn: crie um aplicativo de lista de tarefas pendentes do Blazor
Blazor para iniciantes
Saiba como criar um aplicativo Blazor completo do início ao fim:
Você também pode estar interessado em...