Contrôles ASP.NET : vérifierBox, RadioButton, ListeBox, Zone de texte, Étiquette
Jacob Lee
Ajout de contrôles ASP.Net aux formulaires Web
ASP.Net a la possibilité d'ajouter des contrôles à un formulaire tels que des zones de texte et des étiquettes.
Examinons les autres contrôles disponibles pour les formulaires Web et voyons certaines de leurs propriétés communes.
Dans notre exemple, nous allons créer un formulaire qui aura les fonctionnalités suivantes.
- La possibilité pour l'utilisateur de saisir son nom.
- Une option pour choisir la ville dans laquelle réside l'utilisateur
- La possibilité pour l'utilisateur de saisir une option pour le sexe.
- Une option pour choisir un cours que l'utilisateur souhaite apprendre. Il y aura des choix pour les deux C# et ASP.Net
Examinons chaque contrôle en détail. Ajoutons-les pour créer le formulaire avec les fonctionnalités mentionnées ci-dessus.
Étape 1) La première étape consiste à ouvrir le Concepteur de formulaires pour le formulaire Web de démonstration. Une fois cela fait, vous pourrez faire glisser les contrôles de la boîte à outils vers le Formulaire Web.
Pour ouvrir le formulaire Web Designer,
- Cliquez avec le bouton droit sur le fichier Demo.aspx dans l'Explorateur de solutions et
- Choisissez l'option de menu Concepteur de vues.
Une fois que vous avez effectué l'étape ci-dessus, vous pourrez voir votre concepteur de formulaires comme indiqué ci-dessous.
Commençons maintenant à ajouter nos contrôles un par un
Contrôle des étiquettes
Le contrôle label permet d'afficher un texte ou un message à l'utilisateur sur le formulaire. Le contrôle label est normalement utilisé avec d’autres contrôles. Des exemples courants sont ceux où une étiquette est ajoutée avec le contrôle de zone de texte. L'étiquette donne une indication à l'utilisateur sur ce qui est censé remplir la zone de texte. Voyons comment nous pouvons implémenter cela avec un exemple ci-dessous. Nous utiliserons une étiquette appelée « nom ». Ceci sera utilisé conjointement avec les contrôles de zone de texte, qui seront ajoutés dans la section ultérieure.
Étape 1) La première étape consiste à faire glisser le contrôle « étiquette » sur le formulaire Web à partir de la boîte à outils, comme indiqué ci-dessous.
Étape 2) Une fois l'étiquette ajoutée, suivez les étapes suivantes.
- Accédez à la fenêtre des propriétés en cliquant avec le bouton droit sur le contrôle d'étiquette
- Choisissez l'option de menu Propriétés
Étape 3) Dans la fenêtre des propriétés, remplacez le nom de la propriété Text par Name.
De même, modifiez également la valeur de la propriété ID du contrôle en lblName. En spécifiant un identifiant significatif aux contrôles, il devient plus facile d'y accéder pendant la phase de codage. Ceci est illustré ci-dessous.
Une fois que vous avez apporté les modifications ci-dessus, vous verrez le résultat suivant
Production:-
Vous verrez que l'étiquette Nom apparaît sur le formulaire Web.
Zone de texte
Une zone de texte est utilisée pour permettre à un utilisateur de saisir du texte sur l'application de formulaire Web. Voyons comment nous pouvons implémenter cela avec un exemple ci-dessous. Nous ajouterons une zone de texte au formulaire dans laquelle l'utilisateur pourra saisir son nom.
Étape 1) La première étape consiste à faire glisser le contrôle de zone de texte sur le formulaire Web à partir de la boîte à outils, comme indiqué ci-dessous.
Vous trouverez ci-dessous à quoi cela ressemblerait dans le concepteur de formulaires une fois le contrôle Textbox présent sur le formulaire.
Étape 2) Une fois la Textbox ajoutée, vous devez modifier la propriété ID.
- Accédez à la fenêtre des propriétés en cliquant avec le bouton droit sur le contrôle Textbox et
- Choisissez ensuite les propriétés
- Remplacez la propriété id de la zone de texte par txtName.
Une fois que vous avez apporté les modifications ci-dessus, vous voyez le résultat suivant.
Production:-
Zone de liste
Une zone de liste est utilisée pour présenter une liste d'éléments sur le formulaire Web. Voyons comment nous pouvons implémenter cela avec un exemple ci-dessous. Nous ajouterons une zone de liste au formulaire pour stocker certains emplacements de villes.
Étape 1) La première étape consiste à faire glisser le contrôle de la zone de liste sur le formulaire Web à partir de la boîte à outils, comme indiqué ci-dessous.
Étape 2) Une fois que vous avez fait glisser la zone de liste vers le formulaire, un menu latéral distinct apparaîtra. Dans ce menu, choisissez le menu « Modifier les éléments ».
Étape 3) Une boîte de dialogue vous sera maintenant présentée dans laquelle vous pourrez ajouter les éléments de la liste à la liste.
- Cliquez sur le bouton Ajouter pour ajouter un élément de liste.
- Donnez un nom à la valeur textuelle de l'élément de liste – Dans notre cas Mumbai. Répétez les étapes 1 et 2 pour ajouter des éléments de liste pour Mangalore et Hyderabad.
- Cliquez sur le bouton OK
Étape 4) Accédez à la fenêtre des propriétés et modifiez la valeur de la propriété ID du contrôle en lstEmplacement.
Une fois que vous avez apporté les modifications ci-dessus, vous verrez le résultat suivant
Production:-
À partir du résultat, vous pouvez clairement voir que les zones de liste ont été ajoutées au formulaire.
Radiobutton
Un bouton radio est utilisé pour présenter une liste d'éléments parmi lesquels l'utilisateur peut en choisir un. Voyons comment nous pouvons implémenter cela avec un exemple ci-dessous. Nous ajouterons un bouton radio pour une option mâle/femelle.
Étape 1) La première étape consiste à faire glisser le contrôle « bouton radio » sur le formulaire Web à partir de la boîte à outils. (voir image ci-dessous). Assurez-vous d'ajouter 2 boutons radio, un pour l'option « Homme » et l'autre pour « Femme ».
Étape 2) Une fois le bouton radio ajouté, modifiez la propriété 'text'.
- Accédez à la fenêtre des propriétés en cliquant sur le 'Contrôle Radiobutton'.
- Modifiez la propriété de texte du bouton radio en « Mâle ».
- Répétez la même étape pour le changer en « Femme ».
- Modifiez également les propriétés ID des contrôles respectifs en rdMale et rdFemale.
Une fois que vous avez apporté les modifications ci-dessus, vous verrez le résultat suivant
Production:-
À partir du résultat, vous pouvez clairement voir que le bouton radio a été ajouté au formulaire
Case à cocher
Une case à cocher est utilisée pour fournir une liste d'options dans laquelle l'utilisateur peut choisir plusieurs choix. Voyons comment nous pouvons implémenter cela avec un exemple ci-dessous. Nous ajouterons 2 cases à cocher à nos formulaires Web. Ces cases à cocher offriront à l'utilisateur la possibilité de savoir s'il souhaite apprendre C# ou ASP.Net.
Étape 1) La première étape consiste à faire glisser le contrôle de case à cocher sur le formulaire Web à partir de la boîte à outils, comme indiqué ci-dessous.
Étape 2) Une fois les cases à cocher ajoutées, modifiez la propriété id de la case à cocher en « chkASP ».
- Accédez à la fenêtre des propriétés en cliquant sur le contrôle Checkbox.
- Modifiez les propriétés d'ID des contrôles respectifs en « chkC » et « chkASP ».
Modifiez également la propriété text du contrôle Checkbox en « C# ». Faites de même pour l’autre contrôle Checkbox et remplacez-le par « ASP.Net ».
- Changez la propriété ID de la case à cocher en 'chkASP'
- Changez la propriété ID de la case à cocher en chkC
Une fois que vous avez apporté les modifications ci-dessus, vous verrez le résultat suivant
Production:-
À partir du résultat, vous pouvez clairement voir que les cases à cocher ont été ajoutées au formulaire.
Bouton
Un bouton permet à l'utilisateur de cliquer sur un bouton qui lancerait alors le traitement du formulaire. Voyons comment nous pouvons implémenter cela avec notre exemple actuel, comme indiqué ci-dessous. Nous ajouterons un simple bouton appelé « Soumettre ». Ceci sera utilisé pour soumettre toutes les informations sur le formulaire.
Étape 1) La première étape consiste à faire glisser le contrôle bouton sur le formulaire Web à partir de la boîte à outils, comme indiqué ci-dessous.
Étape 2) Une fois le bouton ajouté, accédez à la fenêtre des propriétés en cliquant sur le contrôle du bouton. Modifiez la propriété text du contrôle bouton en Soumettre. Modifiez également la propriété ID du bouton en « btnSubmit ».
Une fois que vous avez apporté les modifications ci-dessus, vous verrez le résultat suivant
Production:-
À partir du résultat, vous pouvez clairement voir que le bouton a été ajouté au formulaire.
Gestionnaire d'événements dans ASP.Net
Lorsque vous travaillez avec un formulaire Web, vous pouvez ajouter des événements aux contrôles. Un événement est quelque chose qui se produit lorsqu'une action est effectuée. L’action la plus courante est probablement le clic sur un bouton d’un formulaire.
Dans les formulaires Web, vous pouvez ajouter du code au fichier aspx.cs correspondant. Ce code peut être utilisé pour effectuer certaines actions lorsqu'un bouton est enfoncé sur le formulaire. Il s'agit généralement de l'événement le plus courant dans les formulaires Web. Voyons comment nous pouvons y parvenir.
Nous allons rendre cela simple. Ajoutez simplement un événement au contrôle du bouton pour afficher le nom saisi par l'utilisateur. Suivons les étapes ci-dessous pour y parvenir.
Étape 1) Vous devez d’abord double-cliquer sur le bouton du formulaire Web. Cela fera apparaître le code d'événement pour le bouton dans Visual Studio.
L'événement btnSubmit_Click est automatiquement ajouté par Visual Studio lorsque vous double-cliquez sur le bouton dans le concepteur de formulaires Web.
Étape 2) Ajoutons maintenant du code à l'événement submit pour afficher la valeur de la zone de texte du nom et l'emplacement choisi par l'utilisateur.
protected void btnSubmit_Click(object sender,EventArgs e)
{
Response.Write(txtName.Text + "</br>");
Response.Write(lstLocation.SelectedItem.Text + "</br>");
lblName.Visible = false;
txtName.Visible = false;
lstLocation.Visible = false;
chkC.Visible = false;
chkASP.Visible = false;
rdFemale.Visible = false;
btnSubmit.Visible = false;
}
Explication du code : -
- La ligne de code ci-dessus fait la chose la plus simple. Il prend la valeur du contrôle Name textbox et l'envoie au client via l'objet Response. Donc, si vous souhaitez saisir la chaîne « Guru99 » dans la zone de texte du nom, la valeur de txtName. Un texte serait « Guru99 ».
- La ligne de code suivante prend la valeur sélectionnée de la listbox via la propriété 'lstLocation.SelectedItem.text'. Il écrit ensuite cette valeur via la méthode Response.Write au client.
- Enfin, nous rendons invisibles tous les contrôles du formulaire. Si nous ne le faisons pas, tous les contrôles ainsi que nos valeurs de réponse seront affichés ensemble. Normalement, lorsqu'une personne saisit toutes les informations sur le formulaire telles que le nom, l'emplacement, le sexe, etc. La page suivante présentée à l'utilisateur ne devrait contenir que les informations qui n’ont pas été saisies. L’utilisateur ne souhaite plus voir les contrôles Nom, Sexe et emplacement. Mais ASP.Net ne le sait pas et, par conséquent, par défaut, il affichera à nouveau tous les contrôles lorsque l'utilisateur clique sur le bouton Soumettre. Par conséquent, nous devons écrire du code pour garantir que tous les contrôles sont masqués afin que l'utilisateur ne voie que le résultat souhaité.
Une fois que vous apportez les modifications ci-dessus, vous verrez le résultat suivant
Production:-
Dans l'écran Sortie, effectuez les étapes suivantes
- Donnez le nom de Guru99 dans la zone de texte du nom
- Choisissez un emplacement dans la liste de Bangalore
- Cliquez sur le bouton Soumettre
Une fois cela fait, vous verrez « Guru99 » et l’emplacement « Bangalore » s’affichera sur la page.
Résumé
- In ASP.Net, vous pouvez ajouter les contrôles standards à un formulaire tels que des étiquettes, des zones de texte, des zones de liste, etc.
- Chaque contrôle peut être associé à un événement. L'événement le plus courant est l'événement de clic sur le bouton. Ceci est utilisé lorsque des informations doivent être soumises au serveur Web.
