Lier des contrôles à des données dans des applications Blazor

• 7 minutes

Blazor vous permet de lier des contrôles HTML à des propriétés, afin que les valeurs changeantes s’affichent automatiquement dans l’interface utilisateur.

Supposons que vous développiez une page qui collecte des informations auprès de clients sur leurs préférences de pizzas. Vous souhaitez charger les informations à partir d’une base de données et permettre aux clients d’apporter des modifications, comme l’enregistrement de leurs garnitures favorites. En cas de modification de l’utilisateur ou d’une mise à jour dans la base de données, vous souhaitez que les nouvelles valeurs s’affichent dans l’interface utilisateur le plus rapidement possible.

Dans cette leçon, vous allez apprendre à utiliser la liaison de données dans Blazor pour lier des éléments d’interface utilisateur à des valeurs de données, des propriétés ou des expressions.

Qu’est-ce que la liaison de données ?

Si vous souhaitez qu’un élément HTML affiche une valeur, vous pouvez écrire du code pour modifier l’affichage. Vous devrez écrire du code supplémentaire pour mettre à jour l’affichage lorsque la valeur change. Dans Blazor, vous pouvez utiliser la liaison de données pour connecter un élément HTML à un champ, une propriété ou une expression. Ainsi, lorsque la valeur change, l’élément HTML est automatiquement mis à jour. La mise à jour se produit généralement rapidement après la modification et vous n’avez pas besoin d’écrire de code de mise à jour.

Pour lier un contrôle, vous utilisez la directive @bind :

@page "/"

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

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

Dans la page précédente, chaque fois que la variable customerEmail change de valeur, la valeur <input> est mise à jour.

Lier des éléments à des événements spécifiques

La directive @bind est intelligente et comprend les contrôles qu’elle utilise. Par exemple, lorsque vous liez une valeur à une zone de texte <input>, elle lie l'attribut value. Une case à cocher <input> HTML possède un attribut checked au lieu d’un attribut value. L’attribut @bind utilise automatiquement cet attribut checked à la place. Par défaut, le contrôle est lié à l'événement onchange DOM. Prenons par exemple cette page :

@page "/"

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

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

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

Lorsque la page est affichée, la valeur par défaut Margherita s’affiche à la fois dans l'élément <h1> et dans la zone de texte. Lorsque vous entrez une nouvelle pizza favorite dans la zone de texte, l’élément <h1> ne change pas tant que vous ne sortez pas de la zone de texte ou que vous sélectionnez Entrée, car c’est à ce moment-là que l’événement onchange DOM est déclenché.

Il s’agit souvent du comportement que vous souhaitez. Mais supposons que vous souhaitiez que l’élément <h1> soit mis à jour dès que vous entrez un caractère dans la zone de texte. Vous pouvez obtenir ce résultat en liant à l'événement oninput DOM à la place. Pour lier à cet événement, vous devez utiliser les directives @bind-value et @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"
}

Dans ce cas, le titre change dès que vous tapez un caractère dans la zone de texte.

Mettre en forme les valeurs liées

Si vous présentez des dates à l’utilisateur, vous souhaiterez peut-être utiliser un format de données localisé. Par exemple, supposons que vous écriviez une page spécialement dédiée aux utilisateurs au Royaume-Uni, qui préfèrent écrire les dates avec le jour en premier. Vous pouvez utiliser la directive @bind:format pour spécifier une chaîne de format de date unique :

@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);
}

En guise d’alternative à l’utilisation de la directive @bind:format, vous pouvez écrire du code C# pour mettre en forme une valeur liée. Utilisez les accesseurs get et set dans la définition de membre, comme dans cet exemple :

@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);
            }
        }
    }
}

Dans la prochaine leçon, vous allez appliquer les connaissances acquises.