Enlace de controles a datos en aplicaciones Blazor

Completado

Blazor permite enlazar controles HTML a propiedades para que los valores que cambien se muestren automáticamente en la interfaz de usuario.

Supongamos que está desarrollando una página que recopila información de los clientes sobre sus preferencias de pizza. Quiere cargar la información de una base de datos y permitir que los clientes realicen cambios, como registrar sus ingredientes favoritos. Cuando hay un cambio del usuario o una actualización en la base de datos, quiere que los nuevos valores se muestren en la interfaz de usuario lo más rápido posible.

En esta unidad, aprenderá a usar el enlace de datos en Blazor para vincular elementos de interfaz de usuario a valores de datos, propiedades o expresiones.

¿Qué es el enlace de datos?

Si desea que un elemento HTML muestre un valor, puede escribir código para modificar la presentación. Deberá escribir código adicional para actualizar lo que se muestra cuando cambie el valor. En Blazor puede usar el enlace de datos para conectar un elemento HTML a un campo, propiedad o expresión. De este modo, cuando cambia el valor, el elemento HTML se actualiza automáticamente. La actualización se suele producir rápidamente después del cambio y no tiene que escribir ningún código de actualización.

Para enlazar un control, usaría la directiva @bind:

@page "/"

<p>
    Your email address is:
    <input @bind="customerEmail" />
</p>

@code {
    private string customerEmail = "user@contoso.com"
}

En la página anterior, cada vez que la variable customerEmail cambia su valor, el valor <input> se actualiza.

Nota:

Solo se actualiza la visualización de los controles, como <input>, cuando se representa el componente y no cuando cambia el valor de un campo. Dado que los componentes de Blazor se representan después de ejecutar cualquier código de controlador de eventos, en la práctica las actualizaciones suelen mostrarse rápidamente.

Enlace de elementos a eventos específicos

La directiva @bind es inteligente y entiende los controles que usa. Por ejemplo, al enlazar un valor a un cuadro de texto <input>, enlaza el atributo value. Una casilla HTML <input> tiene un atributo checked en lugar de un atributo value. El atributo @bind usa automáticamente este atributo checked en su lugar. De forma predeterminada, el control está enlazado al evento onchange de DOM. Por ejemplo, considere esta página:

@page "/"

<h1>My favorite pizza is: @favPizza</h1>

<p>
    Enter your favorite pizza:
    <input @bind="favPizza" />
</p>

@code {
    private string favPizza { get; set; } = "Margherita"
}

Cuando se representa la página, el valor predeterminado Margherita se muestra en el elemento <h1> y en el cuadro de texto. Cuando escribe una nueva pizza favorita en el cuadro de texto, el elemento <h1> no cambia hasta que sale del cuadro de texto o selecciona Entrar porque es cuando se activa el evento de DOM onchange.

A menudo, ese es el comportamiento que desea. Pero supongamos que quiere que el elemento <h1> se actualice en cuanto escriba cualquier carácter en el cuadro de texto. Puede lograr este resultado enlazando al evento de DOM oninput en su lugar. Para enlazar a este evento, debe usar las directivas @bind-value y @bind-value:event:

@page "/"

<h1>My favorite pizza is: @favPizza</h1>

<p>
    Enter your favorite pizza:
    <input @bind-value="favPizza" @bind-value:event="oninput" />
</p>

@code {
    private string favPizza { get; set; } = "Margherita"
}

En este caso, el título cambia en cuanto escribe cualquier carácter en el cuadro de texto.

Aplicación de formato a los valores enlazados

Si muestra fechas al usuario, es posible que desee usar un formato de datos localizado. Por ejemplo, supongamos que escribe una página específicamente para los usuarios del Reino Unido, que prefieren escribir las fechas especificando el día primero. Puede usar la directiva @bind:format para especificar una cadena de formato de fecha única:

@page "/ukbirthdaypizza"

<h1>Order a pizza for your birthday!</h1>

<p>
    Enter your birth date:
    <input @bind="birthdate" @bind:format="dd-MM-yyyy" />
</p>

@code {
    private DateTime birthdate { get; set; } = new(2000, 1, 1);
}

Nota:

En el momento de escribir esto, las cadenas de formato solo se admiten con valores de fecha. Puede que se agreguen los formatos de moneda, de número y otros en el futuro. Para comprobar la información más reciente sobre los formatos de enlace, consulte Formato de cadenas en la documentación de Blazor.

Como alternativa al uso de la directiva @bind:format, puede escribir código C# para dar formato a un valor enlazado. Use los descriptores de acceso get y set en la definición de miembro, como en este ejemplo:

@page "/pizzaapproval"
@using System.Globalization

<h1>Pizza: @PizzaName</h1>

<p>Approval rating: @approvalRating</p>

<p>
    <label>
        Set a new approval rating:
        <input @bind="ApprovalRating" />
    </label>
</p>

@code {
    private decimal approvalRating = 1.0;
    private NumberStyles style = NumberStyles.AllowDecimalPoint | NumberStyles.AllowLeadingSign;
    private CultureInfo culture = CultureInfo.CreateSpecificCulture("en-US");
    
    private string ApprovalRating
    {
        get => approvalRating.ToString("0.000", culture);
        set
        {
            if (Decimal.TryParse(value, style, culture, out var number))
            {
                approvalRating = Math.Round(number, 3);
            }
        }
    }
}

En la siguiente unidad, aplicará lo que ha aprendido.