Vinculação de dados e eventos

Concluído

Vamos explorar como definir a lógica de renderização de componentes e lidar com eventos de interface do usuário.

Renderizar valores de expressão C#

Quando você quiser renderizar o valor de uma expressão C# no Razor, use um caractere à esquerda @. Por exemplo, um componente Counter pode renderizar o valor de seu campo currentCount assim:

<p role="status">Current count: @currentCount</p>

O Razor normalmente pode descobrir quando uma expressão C# termina e você volta a escrever HTML. Mas você também pode ser explícito sobre o início e o término da expressão usando parênteses.

<p role="status">Current count: @(currentCount)</p>

Adicionar fluxo de controle

Você pode adicionar o fluxo de controle à lógica de renderização do componente usando instruções em C# normais. Por exemplo, você pode renderizar condicionalmente algum conteúdo usando uma instrução if em C#, assim:

@if (currentCount > 3)
{
    <p>You win!</p>
}

Você também pode usar C# para executar um loop sobre dados e renderizar uma lista de itens:

<ul>
    @foreach (var item in items)
    {
        <li>@item.Name</li>
    }
</ul>

Tratar eventos

Os componentes Blazor geralmente lidam com eventos de interface do usuário. Para especificar um retorno de chamada de evento para um evento de um elemento de interface do usuário, use um atributo que começa com @on e termina com o nome do evento. Por exemplo, você pode especificar o método IncrementCount como um manipulador para um evento de clique de botão usando o atributo @onclick, assim:

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

Você pode especificar manipuladores de eventos em C# para outros eventos HTML também, como @onchange, @oninput e assim por diante. Os métodos de tratamento de eventos podem ser síncronos ou assíncronos. Você também pode definir manipuladores de eventos embutidos usando expressões lambda em C#:

<button class="btn btn-primary" @onclick="() => currentCount++">Click me</button>

Os métodos do manipulador de eventos podem opcionalmente usar um argumento de evento com informações sobre o evento. Por exemplo, você pode acessar o valor de um elemento de entrada que foi alterado, assim:

<input @onchange="InputChanged" />
<p>@message</p>

@code {
    string message = "";

    void InputChanged(ChangeEventArgs e)
    {
        message = (string)e.Value;
    }
}

Depois que um manipulador de eventos for executado, o Blazor renderizará automaticamente o componente com seu novo estado, para que a mensagem seja exibida após as alterações de entrada.

Vinculação de dados

Geralmente, você deseja que o valor de um elemento de interface do usuário seja associado a um valor específico no código. Quando o valor do elemento de interface do usuário é alterado, o valor do código deve ser alterado, e quando o valor do código é alterado, o elemento de interface do usuário deve exibir o novo valor. O suporte à associação de dados do Blazor facilita a configuração desse tipo de associação de dados bidirecional.

Você associa um elemento de interface do usuário a um valor específico no código usando o atributo @bind. Por exemplo:

<input @bind="text" />
<button @onclick="() => text = string.Empty">Clear</button>
<p>@text</p>

@code {
    string text = "";
}

Quando você altera o valor da entrada, o campo text é atualizado com o novo valor. E quando você altera o valor do campo text clicando no botão Limpar, o valor da entrada também é limpo.

Diretivas Razor

As diretivas Razor são palavras-chave reservadas na sintaxe Razor que influenciam a forma como um arquivo Razor é compilado. As diretivas Razor sempre começam com o caractere @. Algumas diretivas Razor aparecem no início de uma nova linha, como @page e @code, enquanto outras são atributos que podem ser aplicados a elementos como atributos, como @bind. Você pode encontrar uma lista completa das diretivas Razor na referência de sintaxe Razor.

Habilitar interatividade

Para lidar com eventos de interface do usuário de um componente e usar a associação de dados, o componente deve ser interativo. Por padrão, os componentes Blazor são renderizados estaticamente do servidor, o que significa que eles geram HTML em resposta a solicitações e, de outra forma, não conseguem lidar com eventos de interface do usuário. Para tornar um componente interativo, você deve aplicar um modo de renderização interativo usando a diretiva @rendermode.

Você pode aplicar a diretiva @rendermode a uma definição de componente:

@rendermode InteractiveServer

Ou para uma instância de componente:

<Counter @rendermode="InteractiveServer" />

Atualmente, o componente Counter é o único componente interativo em nosso aplicativo e usa a renderização interativa do servidor. A renderização interativa do servidor manipula eventos de interface do usuário do servidor por meio de uma conexão WebSocket com o navegador. O Blazor envia eventos de interface do usuário para o servidor por esta conexão para que os componentes do aplicativo possam lidar com eles. Em seguida, o Blazor manipula a atualização do DOM do navegador com as atualizações renderizadas.

Como alternativa, os componentes do Blazor podem usar o modo de renderização InteractiveWebAssembly para renderizar interativamente a partir do cliente. Nesse modo, o código do componente é baixado no navegador e executado no lado do cliente usando um runtime do .NET baseado em WebAssembly.

Qual modo de renderização interativo você escolhe usar depende dos requisitos do aplicativo. Atualmente, o nosso projeto do Blazor só está configurado para renderização baseada em servidor – portanto, para este módulo, usaremos a renderização de servidor estática e interativa.