Comment obtenir une variable à partir d'une entrée HTML dans Blazor C#

Blazor est un framework puissant pour créer des applications Web interactives avec C# plutôt qu'avec JavaScript. L'une des principales fonctionnalités de Blazor est la possibilité de lier du code C# à des éléments HTML, ce qui facilite la capture des entrées utilisateur et leur utilisation dans votre application. Dans cet article, nous explorerons comment obtenir une variable à partir d'un élément d'entrée HTML dans Blazor, à la fois dans les applications Blazor Server et Blazor WebAssembly.

Introduction à la liaison de données bidirectionnelle de Blazor

Blazor propose une fonctionnalité connue sous le nom de « liaison de données bidirectionnelle », qui permet aux modifications de l'interface utilisateur (UI) de mettre automatiquement à jour la variable C# sous-jacente, et vice versa. Ceci est extrêmement utile lorsque vous souhaitez capturer les données saisies par l'utilisateur dans un champ de saisie HTML et refléter immédiatement ces modifications dans votre code C#.

Commencer

Pour obtenir une variable à partir d'un champ de saisie HTML, vous avez besoin de quelques composants clés :

1. Entrée HTML : Le champ de saisie dans lequel l'utilisateur saisit les données.
2. Variable C# : La variable C# qui stocke les données de l'entrée.
3. Liaison de données : la connexion entre le champ de saisie et la variable C#, généralement via la directive @bind dans Blazor.

Dans les sections suivantes, nous passerons en revue divers exemples pour démontrer comment cela fonctionne.

Exemple 1 : liaison de saisie de texte simple

Le moyen le plus simple de capturer les entrées d'un utilisateur consiste à utiliser la directive @bind . Cela lie automatiquement un élément d'entrée HTML à une variable C#.

Exemple de code (composant Razor)

 @page "/input-example" <h3>Simple Input Binding in Blazor</h3> <label for="userName">Enter your name:</label> <input type="text" @bind="userName" /> <p>Hello, @userName!</p> @code { private string userName = string.Empty; }

Explication:

1. La directive @bind lie l'élément input à la variable userName en C#. Chaque fois que l'utilisateur tape dans le champ de saisie, la variable userName est automatiquement mise à jour.
2. Le paragraphe <p>Hello, @userName!</p> affiche dynamiquement la valeur de userName , affichant le texte mis à jour en temps réel au fur et à mesure que l'utilisateur tape.

Dans cet exemple, la variable userName est liée au champ de saisie et la liaison bidirectionnelle de Blazor garantit que chaque fois que l'utilisateur modifie le texte, la valeur de userName est mise à jour en temps réel.

Exemple 2 : obtenir et utiliser l'entrée lors d'un clic sur un bouton

Parfois, vous devez effectuer des actions sur les données saisies par l'utilisateur, comme cliquer sur un bouton pour soumettre la valeur ou la traiter davantage. Cela peut également être facilement réalisé dans Blazor.

Exemple de code (composant Razor)

 @page "/submit-input" <h3>Submit Input in Blazor</h3> <label for="age">Enter your age:</label> <input type="number" @bind="age" /> <button @>Submit</button> <p>You entered: @age</p> @code { private int age; private void SubmitAge() { // Do something with the age variable (eg, validation, submission, etc.) Console.WriteLine($"User's age is {age}"); } }

Explication:

1. La directive @bind="age" lie le champ de saisie à la variable age .
2. Le @ lie l'événement click du bouton à la méthode SubmitAge .
3. Lorsque l'utilisateur clique sur le bouton, la méthode SubmitAge est appelée, qui imprime l'âge saisi sur la console.

Dans cet exemple, l'utilisateur peut saisir son âge, et lorsqu'il clique sur le bouton « Soumettre », la méthode SubmitAge est déclenchée pour effectuer une action avec la variable age .

Exemple 3 : Validation des entrées

Blazor vous permet d'effectuer facilement la validation des entrées en combinant la liaison de données avec des composants de formulaire tels que <EditForm> .

Exemple de code (composant Razor)

 @page "/validation-example" <h3>Input Validation in Blazor</h3> <EditForm Model="@person" OnValidSubmit="HandleValidSubmit"> <DataAnnotationsValidator /> <ValidationSummary /> <label for="firstName">First Name:</label> <InputText @bind-Value="person.FirstName" /> <ValidationMessage For="@(() => person.FirstName)" /> <button type="submit">Submit</button> </EditForm> <p>You entered: @person.FirstName</p> @code { private Person person = new Person(); private void HandleValidSubmit() { // Process the valid input Console.WriteLine($"First Name: {person.FirstName}"); } public class Person { [Required] public string FirstName { get; set; } } }

Explication:

1. Le composant <EditForm> est utilisé pour envelopper les champs de saisie et effectuer la validation.
2. @bind-Value="person.FirstName" lie le champ de saisie à la propriété FirstName de l'objet person .
3. Le composant DataAnnotationsValidator utilise des annotations de données (telles que [Required] ) pour valider l'entrée.
4. Si l'entrée est valide et que le formulaire est soumis, la méthode HandleValidSubmit est appelée et traite les données.

Validation:

• Si l'utilisateur ne fournit pas de prénom (en raison de l'annotation [Required] ), le message de validation apparaîtra et le formulaire ne sera pas soumis tant que la saisie n'est pas valide.

Liaison avancée avec d'autres types d'entrée

Blazor prend en charge un large éventail de types d'entrée, tels que des zones de texte, des cases à cocher, des boutons radio, des listes déroulantes, etc. Vous pouvez lier des variables à n'importe lequel de ces éléments de la même manière.

Exemple : liaison de case à cocher

 @page "/checkbox-example" <h3>Checkbox Binding in Blazor</h3> <label for="subscribe">Subscribe to newsletter:</label> <input type="checkbox" @bind="isSubscribed" /> <p>You are @(isSubscribed ? "subscribed" : "not subscribed") to the newsletter.</p> @code { private bool isSubscribed = false; }

Dans cet exemple, la case à cocher est liée à la variable isSubscribed , et lorsque l'utilisateur coche ou décoche la case, la valeur de isSubscribed est automatiquement mise à jour.

Conclusion

Obtenir une variable à partir d'une entrée HTML dans Blazor est simple et efficace, grâce à la puissante liaison de données bidirectionnelle de Blazor. En utilisant la directive @bind , vous pouvez rapidement lier les champs de saisie aux variables C#, garantissant ainsi que les modifications apportées à l'interface utilisateur sont reflétées dans votre code et vice versa.

Que vous créiez des formulaires simples ou une logique de validation d'entrée complexe, les capacités de liaison de données de Blazor simplifient le processus de travail avec les entrées utilisateur. Des zones de texte aux cases à cocher, Blazor gère l'intégration entre HTML et C# de manière transparente, ce qui en fait un excellent choix pour créer des applications Web interactives.