Associação de dados e eventos no Blazor Hybrid

Você definiu a interface do usuário para seu aplicativo Web. Agora, vamos explorar como adicionar lógica ao aplicativo. Em um aplicativo Blazor, você pode adicionar código C# em arquivos .cs separados ou embutidos em seus componentes razor.

Embutido em C# em componentes

É uma prática comum misturar HTML e C# em um único arquivo de componente razor. Para componentes simples com requisitos de código mais leves, essa abordagem funciona bem. Para adicionar código a um arquivo Razor, você usará a sintaxe Razor.

O que são diretivas razor?

As diretivas razor são marcação de componente usada para adicionar C# embutido com HTML. Com as diretivas, os desenvolvedores podem definir instruções individuais, métodos ou blocos de código maiores.

Diretivas de código

As diretivas de código devem ser familiares para desenvolvedores que usaram Razor em MVC ou Páginas.

Você pode usar @expression() para adicionar uma instrução C# embutida com HTML. Se você precisar de mais código, use a @code diretiva para adicionar várias instruções entre parênteses.

Você também pode adicionar uma @functions seção ao modelo para métodos e propriedades. Eles são adicionados à parte superior da classe gerada, onde o documento pode referenciá-los.

Associação de dados razor

Dentro dos componentes do Razor, você pode associar elementos HTML a dados em campos, propriedades e valores de expressão Razor em C#. A associação de dados permite a sincronização bidirecional entre HTML e seu código.

Os dados são enviados por push de HTML para .NET quando um componente é renderizado. Os componentes se renderizam após a execução do código do manipulador de eventos, e é por isso que as atualizações de propriedade são refletidas na interface do usuário imediatamente após um manipulador de eventos ser disparado.

Use @bind a marcação para associar uma variável C# a uma entrada HTML. Você verá um exemplo de associação de dados no próximo exercício.