Enlace de datos y eventos en Blazor Hybrid

Ha definido la interfaz de usuario de la aplicación web. Ahora, vamos a explorar cómo agregar lógica a la aplicación. En una aplicación Blazor, puede agregar código de C# en archivos de .cs independientes o insertados en los componentes de Razor.

Componentes de C# insertados

Es habitual mezclar HTML y C# en un único archivo de componente de Razor. Para componentes simples con requisitos de código más ligeros, este enfoque funciona bien. Para agregar código a un archivo de Razor, usará la sintaxis de Razor.

¿Qué son las directivas de Razor?

Las directivas de Razor son marcas de componente utilizadas para agregar código de C# insertado con HTML. Con directivas, los desarrolladores pueden definir instrucciones, métodos o bloques de código más grandes.

Directivas de código

Las directivas de código deberían ser familiares para los desarrolladores que han usado Razor en MVC o Pages.

Puede usar @expression() para agregar una instrucción de C# en línea con HTML. Si necesita más código, use la @code directiva para agregar varias instrucciones entre paréntesis.

También puede agregar una @functions sección a la plantilla para métodos y propiedades. Se agregan a la parte superior de la clase generada, donde el documento puede hacer referencia a ellos.

Enlace de datos de Razor

En los componentes de Razor, puede enlazar elementos HTML a datos de campos de C#, propiedades y valores de expresión de Razor. El enlace de datos permite la sincronización bidireccional entre HTML y el código.

Los datos se insertan desde HTML a .NET cuando se representa un componente. Los componentes se representan después de que se ejecute el código del controlador de eventos, por lo que las actualizaciones de propiedades se reflejan en la interfaz de usuario inmediatamente después de que se desencadene un controlador de eventos.

Utiliza el marcador @bind para conectar una variable de C# a una entrada HTML. Verá un ejemplo de enlace de datos en el ejercicio siguiente.