Associação de dados e eventos no Blazor Hybrid
Você definiu a interface do usuário para seu aplicativo Web. Agora, explore como adicionar lógica ao aplicativo. Em um aplicativo Blazor, você pode adicionar o código C# em arquivos .cs separados ou embutidos nos componentes Razor.
C# embutido em componentes
É uma prática comum misturar HTML e C# em um 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 Razor.
O que são diretivas do Razor?
As diretivas do Razor são marcações de componente usadas para adicionar C# embutido com HTML. Com as diretivas, os desenvolvedores pode 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 em páginas.
Você pode usar @expression()
para adicionar uma instrução C# simples embutida com HTML. Caso precise de mais código, use a diretiva @code
para adicionar várias instruções delimitadas por parênteses.
Adicione também uma seção @functions
ao modelo para métodos e propriedades. Elas são adicionadas à parte superior da classe gerada, onde o documento pode referenciá-las.
Associação de dados do Razor
Nos componentes Razor, você pode associar elementos HTML a dados em campos C#, propriedades e valores de expressão do Razor. A associação de dados permite a sincronização bidirecional entre o HTML e seu código.
Os dados são enviados por push do HTML para o .NET quando um componente é renderizado. Como os componentes são renderizados após a execução do código do manipulador de eventos, as atualizações de propriedade são refletidas na IU imediatamente após o disparo de um manipulador de eventos.
Use a marcação @bind
para associar uma variável do C# a uma entrada HTML. Você verá um exemplo de associação de dados no próximo exercício.