Formulaires et interactions utilisateur

Dans notre exemple précédent, où nous avons un composant parent pour envelopper le composant Counter afin de lui donner une valeur initiale, il a été fait mention d’un attribut HTML sur un champ texte : @bind-value. Cet attribut joue un rôle prépondérant dans les formulaires.

1. Bindings

À l’exception des sites vitrines, toutes les applications web proposent un formulaire de saisie de données. Ce dernier permet à l’utilisateur de saisir des informations et il permet aussi de les envoyer à l’application pour traitement. Ces données vont, de ce fait, être ’’bindées’’, c’est-à-dire qu’on va les lier à un modèle qui permettra la lecture et l’écriture.

Il existe deux modes de binding : le one-way data binding, et le two-way data binding

a. One-way data binding

Ce mode permet d’indiquer que les données transitent dans un sens, mais pas dans l’autre. Le sens peut être depuis le DOM HTML vers le composant, ou inversement. D’ailleurs, ce mode a déjà été vu dans les deux sens sur le composant Counter. En effet, lorsque l’on affiche une valeur du composant directement dans le code HTML, grâce à l’instruction @, on réalise en fait un one-way data binding du composant vers le DOM :

<p>Current count: @CurrentCount</p>...
Pour consulter la suite, découvrez le livre suivant :
couv_EIBLAZ.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Analyse d'un composant
Suivant
Exercice