Crie seu primeiro aplicativo Web com o ASP.NET Core usando o Blazor

Windows Linux macOS

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:

A página Contador possui um botão de clicar para incrementar a contagem mostrada na página.

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.

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;

    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. A diretiva @rendermode habilita a renderização interativa do servidor no componente para que ele possa manipular os eventos de interface do usuário do navegador.

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