Executando o projeto iremos obter no navegador o seguinte resultado:

No menu lateral temos 3 opções que irão acionar as 3 páginas na pasta Pages. Sendo que estas páginas são implementadas pelo componente Razor nos arquivos:  Index.razor, Counter.razor e FetchData.razor

E cada um desses arquivos implementa um componente Blazor que é compilado e executado no lado do cliente no navegador.

1. Home

Arquivo Index.razor

Neste código temos um link que aciona o arquivo SurveyPrompt.razor que esta na pasta Shared.

2. Counter

Arquivo Counter.razor

Neste código a página exibe um Button(Click me) que ao ser clicando incrementa o contador. Assim, cada vez que o botão for clicado, o contador é incrementado sem uma atualização de página. Normalmente, esse tipo de comportamento do lado do cliente é tratado via JavaScript; mas aqui, ele é implementado em C# e .NET pelo componente Counter.

A interface do usuário para o componente Counter é definida usando código HTML normal.

Uma requisição para /counter no navegador, conforme especificado pela diretiva @page na parte superior, faz com que o componente Counter renderize seu conteúdo. Os componentes são renderizados em uma representação na memória da árvore de renderização que pode ser usada para atualizar a interface do usuário de maneira flexível e eficiente.

Cada vez que o botão Click me for selecionado:

- O evento onclick é disparado.
- O método IncrementCount é chamado.
- O currentCount é incrementado.
- O componente é renderizado novamente.

O runtime compara o novo conteúdo com o conteúdo anterior e aplica apenas o conteúdo alterado ao DOM (Document Object Model).

Depois que um componente é definido, o componente pode ser usado para implementar outros componentes. A marcação para usar um componente se parece com uma tag HTML em que o nome da tag é o tipo de componente.

Assim, podemos usar o componente Counter em outro componente. Vamos incluir o componente Counter na página inicial definida pelo componente Index.

Executando o projeto novamente iremos obter:

Usando parâmetros de Componentes

Os componentes também podem ter parâmetros, que são definidos usando propriedades privadas na classe de componentes decorada com o atributo [Parameter]. Use atributos para especificar argumentos para um componente na marcação.

Vamos agora atualizar o componente Counter para ter uma propriedade IncrementaQuantidade cujo valor padrão seja igual a 2.

Abra o arquivo Counter.razor e altere o código conforme abaixo:

Após isso abra o arquivo Index.razor e altere a quantidade de incremento do Counter para 10 definindo um atributo que corresponda ao nome da propriedade do componente para IncrementaQuantidade.

Executando novamente veremos o parâmetro em ação:

Roteamento para componentes

A diretiva @page na parte superior do arquivo Counter.razor especifica que o componente Counter é um endpoint de roteamento. O componente Counter manipula requisições enviadas para /Counter. Sem a diretiva @page, um componente não manipula solicitações roteadas, mas o componente ainda pode ser usado por outros componentes.

Injeção de dependência

Os serviços registrados com o provedor de serviços do aplicativo estão disponíveis para os componentes por meio de injeção de dependência (DI). Os serviços podem ser injetados em um componente usando a diretiva @inject.

Dê uma olhada na implementação do componente FetchData em FetchData.razor. A diretiva @inject é usada para injetar uma instância HttpClient no componente.

3. Fetch data

Arquivo FecthData.razor

@page "/fetchdata"
@inject HttpClient Http

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetJsonAsync<WeatherForecast[]>("sample-data/weather.json");
    }

    public class WeatherForecast
    {
        public DateTime Date { get; set; }
        public int TemperatureC { get; set; }
        public string Summary { get; set; }
        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}

Nos bastidores, o HttpClient fornecido pelo runtime do Blazor é implementado usando interop JavaScript para chamar a API de busca do navegador subjacente para enviar a requisição (a partir de C#, é possível chamar qualquer biblioteca JavaScript ou API do navegador).

Os dados recuperados são desserializados na variável C# forecasts como uma matriz de objetos do WeatherForecast.

A seguir um laço foreach é usado para renderizar cada instância de forecast como uma linha na tabela.

No próximo artigo veremos como criar um componente em nossa aplicação.

"Porque o reino de Deus não é comida nem bebida, mas justiça, e paz, e alegria no Espírito Santo."
Romanos 14:17