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 .cs independientes o insertados en los componentes de Razor.
Componentes de C# en línea
Es habitual mezclar HTML y C# en un único archivo de componente de Razor. Para los componentes simples con requisitos de código más ligeros, este enfoque funciona bien. Para agregar código a un archivo Razor, usará la sintaxis Razor.
¿Qué son las directivas de Razor?
Las directivas de Razor son marcado de componente que se usa para agregar C# en línea con HTML. Con las 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 resultar familiares a los desarrolladores que han usado Razor en MVC o en páginas.
Puede usar @expression()
para agregar una instrucción de C# alineada con el código HTML. Si necesita más código, use la directiva @code
para agregar varias instrucciones entre paréntesis.
También puede agregar una sección @functions
a la plantilla para los métodos y las propiedades. Se agregan a la parte superior de la clase generada, donde el documento puede hacerles referencia.
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 el código HTML en .NET cuando se representa un componente. Los componentes se representan por sí solos 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 desencadenarse un controlador de eventos.
Use el marcado @bind
para enlazar una variable de C# a una entrada HTML. Verá un ejemplo de enlace de datos en el ejercicio siguiente.