Componentes do Razor

Concluído

Agora que você configurou o ambiente de desenvolvimento, vamos explorar a estrutura de um projeto Blazor e aprender como adicionar novas páginas.

A Página inicial

A home page do aplicativo é definida pelo arquivo Home.razor localizado dentro do diretório Components/Pages. O arquivo Home.razor contém o seguinte código:

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

A diretiva @page na parte superior especifica a rota para esta página, para que o componente Home seja exibido quando o usuário navegar até a raiz do aplicativo. A marca PageTitle é um componente do Blazor que define o título da página atual, fazendo com que ele apareça na guia do navegador. O restante do arquivo é um HTML normal que define o conteúdo da página.

O que é o Razor?

O Razor é uma sintaxe de marcação baseada em HTML e C#. Um arquivo Razor (.razor) contém HTML sem formatação e, em seguida, C# para definir qualquer lógica de renderização, como condicionais, fluxo de controle e avaliação de expressão. Os arquivos Razor são então compilados em classes C# que encapsulam a lógica de renderização do componente.

O que são os componentes do Razor?

Se você explorar os arquivos no projeto Blazor, poderá ver que a maioria dos arquivos que compõem o projeto são arquivos .razor. No Blazor, um arquivo Razor define um componente reutilizável que compõe uma parte da interface do usuário do aplicativo. Os componentes definem qual HTML renderizar e como lidar com eventos do usuário.

Em tempo de compilação, cada componente do Razor é transformado em uma classe C#. A classe pode incluir elementos comuns da interface do usuário como estado, lógica de renderização, métodos de ciclo de vida e manipuladores de eventos. Como os componentes do Blazor criados em Razor são apenas classes C#, você pode usar código .NET arbitrário de seus componentes.

Usar os componentes

Para usar um componente de outro componente, adicione uma marca de estilo HTML com um nome que corresponda ao nome do componente. Por exemplo, se você tiver um componente chamado MyButton.razor, poderá adicionar um componente MyButton a outro componente adicionando uma marca <MyButton />.

Parâmetros do componente

Os componentes também podem ter parâmetros, o que permite que você passe dados para o componente quando ele é utilizado. Os parâmetros de componente são definidos adicionando uma propriedade C# pública ao componente que também tem um atributo [Parameter]. Em seguida, você pode especificar um valor para um parâmetro de componente usando um atributo no estilo HTML que corresponda ao nome da propriedade. O valor do parâmetro pode ser qualquer expressão C#.

O bloco @code

O bloco @code em um arquivo Razor é usado para adicionar membros da classe C# (campos, propriedades e métodos) a um componente. Você pode usar o @code para acompanhar o estado do componente, adicionar parâmetros de componente, implementar eventos do ciclo de vida do componente e definir manipuladores de eventos.

Experimentar o Contador

No aplicativo em execução, navegue até a página Contador clicando na guia Contador na barra lateral à esquerda. A página abaixo será exibida a seguir:

Selecione o botão Clique aqui para incrementar a contagem sem uma atualização de página. O incremento de um contador em uma página da Web normalmente exige a escrita em JavaScript, mas com o Blazor, é possível usar C#.

Encontre a implementação do componente Counter em 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 para /counter no navegador, conforme especificado pela diretiva @page no início, faz com que o componente Counter renderize o conteúdo. A diretiva @rendermode permite a renderização interativa no servidor para o componente, para que ele possa lidar com eventos da interface do usuário vindos do navegador.

Sempre que você clica no botão Clique aqui, acontece o seguinte:

• O evento onclick é acionado.
• O método IncrementCount é chamado.
• O currentCount é incrementado.
• O componente é renderizado para mostrar a contagem atualizada.