Enlaces de dados e eventos

Concluído

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

Renderizar valores de expressão em C#

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

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

O Razor normalmente pode descobrir quando uma expressão C# termina e você faz a transição de volta para escrever HTML. Mas você também pode ser explícito sobre o início e o fim da expressão usando parens.

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

Adicionar fluxo de controle

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

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

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

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

Processar eventos

Os componentes Blazor geralmente lidam com eventos da interface do usuário. Para especificar um retorno de chamada de evento para um evento de um elemento da 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 IncrementCount método como um manipulador para um evento de clique de botão usando o @onclick atributo, da seguinte forma:

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

Você também pode especificar manipuladores de eventos C# para outros eventos HTML, como @onchange, @oninpute assim por diante. Os métodos de manipulação 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 é executado, 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

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

Você vincula um elemento da interface do usuário a um valor específico no código usando o @bind atributo. 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 text campo é atualizado com o novo valor. E quando você altera o text valor do campo clicando no botão Limpar, o valor da entrada também é limpo.

Diretivas Navalha

As diretivas Razor são palavras-chave reservadas na sintaxe Razor que influenciam como um arquivo Razor é compilado. As diretivas de navalha sempre começam com o @ personagem. 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.

Habilite a interatividade

Para manipular eventos da 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 a partir do servidor, o que significa que geram HTML em resposta a solicitações e, de outra forma, não conseguem manipular eventos da interface do usuário. Você torna um componente interativo aplicando um modo de renderização interativo usando a @rendermode diretiva .

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

@rendermode InteractiveServer

Ou para uma instância de componente:

<Counter @rendermode="InteractiveServer" />

O Counter componente é atualmente o único componente interativo em nosso aplicativo e usa renderização interativa do servidor. A renderização interativa do servidor manipula eventos da interface do usuário do servidor por meio de uma conexão WebSocket com o navegador. Blazor envia eventos da interface do usuário para o servidor através dessa conexão para que os componentes do aplicativo possam manipulá-los. Blazor então lida com a atualização do navegador DOM com as atualizações renderizadas.

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

O modo de renderização interativo que você escolhe usar depende dos requisitos do seu aplicativo. Atualmente, nosso projeto Blazor está configurado apenas para renderização baseada em servidor, portanto, para este módulo, ficamos com a renderização estática e interativa do servidor.