Le contrôle RadioButton et le contrôle RadioButtonList permettent aux utilisateurs de sélectionner parmi un petit ensemble d’options prédéfinies mutuellement exclusives.
1. Fonction
Vous pouvez utiliser le contrôle CheckBox et le contrôle CheckBoxList pour effectuer les opérations suivantes :
· Provoque une publication de page lorsqu'un bouton radio est sélectionné.
· Capturez l'interaction de l'utilisateur lorsque l'utilisateur sélectionne un bouton radio.
· Liez chaque bouton radio aux données de la base de données.
2. Contexte
Lors de l'ajout de boutons radio à une page Web ASP.NET, vous pouvez utiliser deux contrôles serveur Web : un seul contrôle RadioButton ou un contrôle RadioButtonList. Les deux contrôles permettent à l'utilisateur de choisir parmi un petit ensemble d'options prédéfinies mutuellement exclusives. Vous pouvez utiliser ces commandes pour définir un nombre illimité de boutons radio étiquetés et les disposer horizontalement ou verticalement.
Vous pouvez ajouter des contrôles RadioButton individuels à la page et utiliser les contrôles individuellement. Habituellement, deux ou plusieurs boutons distincts sont regroupés.
Vous pouvez également utiliser le contrôle RadioButtonList, qui est un contrôle unique pouvant être utilisé comme contrôle parent pour un groupe d’éléments de liste de boutons radio. Ce contrôle est dérivé de la classe de base ListControl et fonctionne donc de manière très similaire aux contrôles serveur Web ListBox, DropDownList, BulletedList et CheckBoxList. La plupart des procédures d'utilisation du contrôle RadioButtonList sont les mêmes que pour les autres contrôles de serveur Web de liste.
Les deux types de contrôles ont leurs propres avantages. L’utilisation d’un seul contrôle RadioButton vous donne plus de contrôle sur la disposition du groupe de boutons radio que l’utilisation d’un contrôle RadioButtonList. Par exemple, vous pouvez inclure du texte autre qu'un bouton radio entre les boutons radio.
Si vous souhaitez créer un ensemble de boutons radio basés sur les données d'une source de données, le contrôle RadioButtonList est un meilleur choix. C'est également un peu plus simple en termes d'écriture de code pour vérifier quel bouton est sélectionné.
Remarque : Vous pouvez également utiliser le contrôle serveur HtmlInputRadioButton pour ajouter des boutons radio aux pages Web ASP.NET.
Si vous souhaitez fournir à l'utilisateur une longue liste d'options ou une liste dont la longueur peut changer au moment de l'exécution, utilisez le contrôle serveur Web ListBox ou DropDownList.
1. Boutons radio de groupe
Les boutons radio sont rarement utilisés seuls, mais sont regroupés pour fournir un ensemble d'options mutuellement exclusives. Au sein d'un groupe, un seul bouton radio peut être sélectionné à la fois. Vous pouvez créer des boutons radio groupés des manières suivantes :
Commencez par ajouter un seul contrôle de serveur Web RadioButton à la page, puis attribuez manuellement tous les contrôles à un groupe. Le nom du groupe peut être n'importe quoi ; tous les boutons radio portant le même nom de groupe sont considérés comme faisant partie d'un seul groupe.
Ajoutez un contrôle serveur Web RadioButtonList à la page. Les éléments de liste de ce contrôle sont automatiquement regroupés.
2. Événements RadioButton et RadioButtonList
Les événements fonctionnent différemment entre un seul contrôle RadioButton et un contrôle RadioButtonList.
3. Contrôle RadioButton unique
Un seul contrôle RadioButton déclenche l’événement CheckedChanged lorsque l’utilisateur clique sur le contrôle. (Cet événement est hérité du contrôle CheckBox.) Par défaut, cet événement n'entraîne pas l'envoi de la page au serveur. Toutefois, vous pouvez forcer le contrôle à effectuer une publication immédiatement en définissant la propriété AutoPostBack sur true.
Remarque : La fonctionnalité de publication automatique nécessite que le navigateur prenne en charge ECMAScript (Jscript ou JavaScript) et que les scripts soient activés sur le navigateur de l'utilisateur.
Vous devrez peut-être créer un gestionnaire d'événements pour l'événement CheckedChanged. Vous pouvez tester quel bouton radio est sélectionné dans n’importe quel code exécuté dans le cadre de la page. En règle générale, vous créez un gestionnaire d'événements pour l'événement CheckedChanged uniquement lorsque vous avez besoin de savoir qu'un bouton radio a changé, plutôt que de simplement lire la sélection actuelle.
4. Contrôle RadioButtonList
Le contrôle RadioButtonList déclenche l'événement SelectedIndexChanged lorsque l'utilisateur modifie le bouton radio sélectionné dans la liste. Par défaut, cet événement n'entraîne pas l'envoi de la page au serveur. Toutefois, vous pouvez forcer le contrôle à effectuer une publication immédiatement en définissant la propriété AutoPostBack sur true.
Remarque : La fonctionnalité de publication automatique nécessite que le navigateur prenne en charge ECMAScript (Jscript ou JavaScript) et que les scripts soient activés sur le navigateur de l'utilisateur.
Comme pour les contrôles RadioButton individuels, il est plus courant de tester l’état d’un contrôle RadioButtonList après que la page a été envoyée par d’autres moyens.
5. Attributs HTML du contrôle RadioButton
Lorsque le contrôle RadioButton est rendu au navigateur, il sera divisé en deux parties : un élément d'entrée représentant le bouton radio et un élément d'étiquette distinct représentant le titre du bouton radio. Ces deux éléments sont combinés dans un élément span.
Lorsque vous appliquez des styles ou des paramètres de propriété à un contrôle RadioButton, ces styles et propriétés sont appliqués à l’élément span externe. Par exemple, si vous définissez la propriété BackColor d'un contrôle, le paramètre s'applique à l'élément span. Par conséquent, cela affectera à la fois les éléments d’entrée internes et d’étiquette.
Parfois, vous devrez peut-être définir des paramètres distincts pour les boutons radio et les étiquettes. Le contrôle RadioButton prend en charge deux propriétés qui peuvent être définies au moment de l'exécution. L'attribut InputAttributes vous permet d'ajouter des attributs HTML à l'élément d'entrée et l'attribut LabelAttributes vous permet d'ajouter des attributs HTML à l'élément label. Les propriétés définies sont transmises au navigateur telles quelles. L'exemple suivant montre comment définir les propriétés d'un élément d'entrée de sorte que lorsque l'utilisateur pointe le pointeur de la souris sur un bouton radio, seul le bouton radio change de couleur et non d'étiquette.
RadioButton1.InputAttributes.Add("onmouseover", "this.style.backgroundColor = 'red'");
RadioButton1.InputAttributes.Add("onmouseout", "this.style.backgroundColor = 'white'");
6. Lier les données aux contrôles
Vous pouvez lier un seul contrôle RadioButton à une source de données et vous pouvez lier n'importe quelle propriété d'un contrôle RadioButton à n'importe quel champ de la source de données. Par exemple, vous pouvez définir la propriété Text du contrôle en fonction des informations de la base de données.
Étant donné que les boutons radio sont utilisés en groupes, il est rare de lier un seul bouton radio à une source de données. Au lieu de cela, il est plus courant de lier le contrôle RadioButtonList à une source de données. Dans ce cas, la source de données génère dynamiquement des boutons radio (éléments de liste) pour chaque enregistrement de la source de données.
3. Comment : ajouter le contrôle serveur Web RadioButton à une page de formulaires Web
Il existe deux manières d'ajouter des boutons radio à une page Web Forms :
·Ajoutez un seul contrôle de serveur Web RadioButton.
·Ajoutez un contrôle serveur Web RadioButtonList, puis ajoutez un seul élément de liste au contrôle.
Lorsque vous utilisez un seul contrôle de serveur Web RadioButton, vous ajoutez généralement un ensemble de ces contrôles à la page, puis vous les regroupez. Plusieurs groupes de boutons différents peuvent être créés.
étape:
1. Depuis l'onglet "Standard" de la boîte à outils, faites glisser le champ RadioButton sur la page.
2. Dans la fenêtre "Propriétés", précisez le titre en définissant la propriété Text.
3. Vous pouvez également choisir de changer la direction du titre en définissant la propriété TextAlign.
4. Répétez les étapes 1 à 3 pour chaque bouton radio que vous souhaitez ajouter à la page.
Regrouper les contrôles individuels du serveur Web RadioButton
Définissez la propriété GroupName de chaque contrôle sur le même nom. Vous pouvez utiliser n'importe quelle chaîne comme nom, mais elle ne peut pas contenir d'espaces. Par exemple, vous pouvez attribuer la chaîne « RadioButtonGroup1 » à la propriété GroupName de tous les boutons.
Pour créer plusieurs groupes de boutons, utilisez un nom de groupe différent pour chaque groupe.
Remarque : à tout moment, vous pouvez ajouter des contrôles RadioButton à la page et les diviser en groupes existants.
4. Comment : ajouter le contrôle serveur Web RadioButtonList à une page de formulaires Web
Il existe deux manières d'ajouter des boutons radio à une page Web Forms :
·Ajoutez un contrôle serveur Web RadioButtonList, puis ajoutez un seul élément de liste au contrôle.
·Ajoutez un seul contrôle de serveur Web RadioButton.
Lorsque vous utilisez le contrôle RadioButtonList, vous pouvez ajouter des contrôles individuels à la page. L'ajout d'éléments à un contrôle est un processus distinct, selon que vous souhaitez afficher une liste statique dans le contrôle ou une liste générée dynamiquement au moment de l'exécution.
étape:
1. Depuis l'onglet "Standard" de la boîte à outils, faites glisser le contrôle RadioButtonList sur la page.
2. Vous pouvez également choisir de changer l'orientation du titre en définissant la propriété TextAlign dans la fenêtre "Propriétés".
3. Vous pouvez également choisir de modifier la disposition du contrôle pour afficher plusieurs colonnes.
4. Suivez l'une des méthodes suivantes pour créer un élément pour le contrôle :
·Créez chaque élément séparément.
·Lier les données au contrôle.
5. Comment : définir et obtenir la sélection dans le contrôle serveur Web RadioButton
Vous pouvez définir le bouton radio sélectionné au moment de la conception ou dans le code au moment de l'exécution. Si un bouton radio appartient à un groupe, le réglage du bouton effacera toutes les autres sélections du groupe.
Remarque : Si vous utilisez le contrôle RadioButtonList, le processus d'obtention et de définition de la valeur du bouton est différent.
1. Définissez le contrôle RadioButton sélectionné
Définissez la propriété Checked du contrôle sur true. Si vous sélectionnez plusieurs contrôles RadioButton dans un groupe, le navigateur détermine quel bouton est sélectionné.
Si vous définissez cette propriété sur false, la sélection est effacée mais aucun autre bouton radio n'est sélectionné. Par conséquent, vous pouvez effacer toutes les sélections en définissant la propriété Checked de tous les boutons radio d’un groupe sur false.
Déterminer quel contrôle RadioButton a été sélectionné consiste essentiellement à tester la propriété Checked.
public void Button1_Click (expéditeur d'objet, System.EventArgs e)
{
si (RadioButton1.Checked) {
Label1.Text = "Vous avez sélectionné " + RadioButton1.Text ;
}
sinon si (RadioButton2.Checked) {
Label1.Text = "Vous avez sélectionné " + RadioButton2.Text ;
}
sinon si (RadioButton3.Checked) {
Label1.Text = "Vous avez sélectionné " + RadioButton3.Text ;
}
}
6. Comment : définir la disposition dans le contrôle serveur Web RadioButtonList
Par défaut, le contrôle serveur Web RadioButtonList affiche uniquement une liste de boutons. Cependant, vous pouvez spécifier n'importe quel nombre de colonnes, et dans ces colonnes, vous pouvez également spécifier comment les éléments sont triés : verticalement (par défaut) ou horizontalement. Une disposition verticale à trois colonnes ressemble à ceci :
A D G
B.E.H.
C F
Une disposition horizontale des mêmes éléments produit la disposition suivante :
ABC
DEF
GH
Spécifier le nombre de colonnes et le tri
· Définissez la propriété RepeatColumns du contrôle RadioButtonList sur le nombre de colonnes souhaité.
· Utilisez l'énumération RepeatDirection pour définir la propriété RepeatDirection sur Vertical ou Horizontal, comme illustré dans l'exemple de code suivant.
protected void Button1_Click (expéditeur d'objet, System.EventArgs e)
{
// Créez cinq boutons radio.
string[] colours = {"Rouge", "Bleu", "Vert", "Jaune", "Orange"};
this.RadioButtonList1.Items.Clear();
pour(int i=0;i < couleurs.GetLength(0);i++){
this.RadioButtonList1.Items.Add(colors[i]);
}
// Disposez les boutons radio horizontalement.
this.RadioButtonList1.RepeatDirection =
RépéterDirection.Horizontal ;
}
7. Comment : répondre aux sélections des utilisateurs dans le groupe de contrôle du serveur Web RadioButton
Lorsque l'utilisateur sélectionne un contrôle RadioButton, le contrôle déclenche un événement auquel vous pouvez répondre.
Description : les événements déclenchés par le contrôle RadioButtonList sont différents des événements déclenchés par un seul contrôle RadioButton.
Vous n’aurez peut-être pas du tout besoin de répondre directement à l’événement de sélection du contrôle RadioButton. Répondez à cet événement uniquement s'il est nécessaire de savoir quand l'utilisateur a modifié la sélection dans le groupe de boutons radio.
Si vous voulez simplement savoir quel bouton radio a été sélectionné et ne voulez pas savoir si la sélection a changé, vous pouvez simplement tester la sélection du bouton radio après l'envoi du formulaire au serveur.
Étant donné que chaque contrôle serveur RadioButton est un contrôle distinct et que chaque contrôle peut déclencher des événements indépendamment, le groupe de boutons radio ne déclenche pas d'événements dans leur ensemble.
Créez un gestionnaire d'événements pour l'événement CheckedChanged du contrôle.
Par défaut, l'événement CheckedChanged n'entraîne pas immédiatement l'envoi de la page Web Forms au serveur. Au lieu de cela, l’événement est déclenché dans le code du serveur la prochaine fois que le formulaire est envoyé (par exemple lorsque l’utilisateur clique sur le contrôle serveur Button Web). Pour que l'événement CheckedChanged provoque une publication immédiate, définissez la propriété AutoPostBack du contrôle RadioButton sur true.
Remarque : Pour envoyer le contrôle RadioButton au serveur lorsqu'il est sélectionné, le navigateur doit prendre en charge ECMAScript (JScript, JavaScript) et le navigateur de l'utilisateur doit activer les scripts.
L'exemple de code suivant montre comment répondre lorsqu'un utilisateur sélectionne un contrôle RadioButton.
public void RadioButton1_CheckedChanged (expéditeur de l'objet,
System.EventArgse)
{
Label1.Text = "Vous avez sélectionné le bouton radio" + RadioButton1.Text ;