Eventos y enlaces de datos
Vamos a explorar cómo definir la lógica de representación de componentes y controlar los eventos de la interfaz de usuario.
Representación de valores de expresión de C#
Cuando quiere representar el valor de una expresión de C# en Razor, usa un carácter @ inicial. Por ejemplo, un componente Counter puede representar el valor de su campo currentCount de la siguiente manera:
<p role="status">Current count: @currentCount</p>
Razor normalmente puede averiguar cuándo finaliza una expresión de C# y vuelva a escribir HTML. Pero también puede ser explícito sobre el principio y el final de la expresión usando paréntesis.
<p role="status">Current count: @(currentCount)</p>
Agregación de un flujo de control
Puede agregar un flujo de control a la lógica de representación de componentes mediante instrucciones normales de C#. Por ejemplo, puede representar condicionalmente algún contenido mediante una instrucción if de C#, de la siguiente manera:
@if (currentCount > 3)
{
<p>You win!</p>
}
También puede usar C# para recorrer en bucle los datos y representar una lista de elementos:
<ul>
@foreach (var item in items)
{
<li>@item.Name</li>
}
</ul>
Control de eventos
Los componentes de Blazor suelen controlar los eventos de la interfaz de usuario. Para especificar una devolución de llamada de evento para un evento de un elemento de interfaz de usuario, se usa un atributo que comienza por @on y termina con el nombre del evento. Por ejemplo, puede especificar el método IncrementCount como controlador para un evento de clic de botón mediante el atributo @onclick, de la siguiente manera:
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
También puede especificar controladores de eventos de C# para otros eventos HTML, como @onchange, @oninput, etc. Los métodos de control de eventos pueden ser sincrónicos o asincrónicos. También puede definir controladores de eventos insertados usando expresiones lambda de C#:
<button class="btn btn-primary" @onclick="() => currentCount++">Click me</button>
Opcionalmente, los métodos de los controladores de eventos pueden tomar un argumento de evento con información sobre este. Por ejemplo, puede acceder al valor de un elemento de entrada que ha cambiado del siguiente modo:
<input @onchange="InputChanged" />
<p>@message</p>
@code {
string message = "";
void InputChanged(ChangeEventArgs e)
{
message = (string)e.Value;
}
}
Una vez que se ejecute un controlador de eventos, Blazor representará automáticamente el componente con su nuevo estado, por lo que el mensaje se mostrará una vez cambiada la entrada.
Enlace de datos
A menudo, quiere que el valor de un elemento de interfaz de usuario esté enlazado a un valor determinado en el código. Cuando cambia el valor del elemento de la interfaz de usuario, el valor de código debe cambiar y cuando el valor de código cambia, el elemento de la interfaz de usuario debe mostrar el nuevo valor. La compatibilidad con los enlaces de datos de Blazor facilita la configuración de este tipo de enlace de datos bidireccional.
Enlaza un elemento de interfaz de usuario a un valor determinado en el código mediante el atributo @bind. Por ejemplo:
<input @bind="text" />
<button @onclick="() => text = string.Empty">Clear</button>
<p>@text</p>
@code {
string text = "";
}
Al cambiar el valor de la entrada, el campo text se actualiza con el nuevo valor. Y al cambiar el valor del campo text haciendo clic en el botón Borrar, también se borra el valor de la entrada.
Directivas de Razor
Las directivas de Razor son palabras clave reservadas en la sintaxis de Razor que influyen en cómo se compila un archivo de Razor. Las directivas de Razor siempre comienzan con el carácter @. Algunas directivas de Razor aparecen al principio de una nueva línea, como @page o @code, mientras que otras son atributos que se pueden aplicar a elementos como atributos, como @bind. Encontrará una lista completa de las directivas de Razor en la referencia de sintaxis de Razor.
Habilitación de la interactividad
Para controlar eventos de interfaz de usuario de un componente y usar el enlace de datos, el componente debe ser interactivo. De forma predeterminada, los componentes de Blazor se representan estáticamente desde el servidor, lo que significa que generan HTML en respuesta a las solicitudes y, de lo contrario, no pueden controlar los eventos de la interfaz de usuario. Para que un componente sea interactivo, debe aplicar un modo de representación interactivo mediante la directiva @rendermode.
Puede aplicar la directiva @rendermode a una definición de componente:
@rendermode InteractiveServer
O en una instancia de componente:
<Counter @rendermode="InteractiveServer" />
Actualmente, el componente Counter es el único componente interactivo de nuestra aplicación y usa la representación interactiva del servidor. La representación interactiva del servidor controla los eventos de la interfaz de usuario del servidor a través de una conexión de WebSocket con el explorador. Blazor envía eventos de interfaz de usuario al servidor a través de esta conexión para que los componentes de la aplicación puedan controlarlo. A continuación, Blazor controla la actualización del DOM del explorador con las actualizaciones representadas.
Como alternativa, los componentes de Blazor pueden usar el modo de representación InteractiveWebAssembly para representar de forma interactiva desde el cliente. En este modo, el código del componente se descarga en el explorador y se ejecuta el lado cliente mediante un entorno de ejecución de .NET basado en WebAssembly.
El modo de representación interactivo que use dependerá de los requisitos de la aplicación. Actualmente, nuestro proyecto de Blazor solo está configurado para la representación basada en servidor, así que para este módulo seguimos con la representación estática e interactiva del servidor.