Vinculaçã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 do Razor.

C# embutido em componentes

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

O que são diretivas Razor?

As diretivas Razor são marcações de componentes usadas para adicionar C# em linha com HTML. Com diretivas, os desenvolvedores podem definir instruções únicas, métodos ou blocos de código maiores.

Diretivas de código

As diretivas de código devem ser familiares aos desenvolvedores que usaram o Razor no MVC ou no Pages.

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

Você também pode adicionar uma seção @functions ao modelo para métodos e propriedades. Eles são adicionados ao topo da classe gerada, onde o documento pode fazer referência a eles.

Vinculação de dados no framework Razor

Nos componentes do Razor, você pode vincular elementos HTML a dados em campos C#, propriedades e valores de expressão do Razor. A vinculaçã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 são renderizados a si mesmos 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 acionado.

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