Création de cases à cocher mutuellement exclusives (VB)

par Christian Wenz

Télécharger le PDF

Quand une seule option d’un ensemble peut être sélectionnée, les cases d’option sont généralement utilisées. Toutefois, il existe un inconvénient : une fois qu’une case d’option dans un groupe est sélectionnée, il n’est pas possible de décocher toutes les cases d’option. Les cases à cocher peuvent être décochées à tout moment, mais ne s’excluent pas mutuellement. Ce tutoriel fournit le meilleur des deux approches : case activée zones qui s’excluent mutuellement.

Vue d’ensemble

Quand une seule option d’un ensemble peut être sélectionnée, les cases d’option sont généralement utilisées. Toutefois, il existe un inconvénient : une fois qu’une case d’option dans un groupe est sélectionnée, il n’est pas possible de décocher toutes les cases d’option. Les cases à cocher peuvent être décochées à tout moment, mais ne s’excluent pas mutuellement. Ce tutoriel fournit le meilleur des deux approches : case activée zones qui s’excluent mutuellement.

Étapes

Le ASP.NET Kit de ressources de contrôle AJAX contient l’extendeur MutuallyExclusiveCheckBox. Cela permet aux programmeurs d’affecter une case à cocher à un nom de groupe (Key attribut). Dans toutes les zones case activée au sein du même groupe, une seule peut être sélectionnée à la fois.

Commençons par placer deux zones case activée sur une nouvelle page ASP.NET. Il peut y en avoir d’autres, mais deux d’entre elles suffisent pour démontrer le principe :

<asp:CheckBox ID="cbYes" runat="server" />Yes
<asp:CheckBox ID="cbNo" runat="server" />No

Pour les deux cases à cocher, un contrôle MutuallyExclusiveCheckBoxExtender doit être placé sur la page. Les deux attributs Key doivent avoir la même valeur, tout comme les attributs de valeur des éléments de case d’option HTML doivent être identiques pour désigner le groupe auquel ils appartiennent. La propriété TargetControlID de l’extendeur pointe vers l’ID de la zone case activée.

<ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="mecbe1" runat="server"
 TargetControlID="cbYes" Key="YesNo" />
<ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="mecbe2" runat="server"
 TargetControlID="cbNo" Key="YesNo" />

Enfin, incluez le ASP.NET AJAX ScriptManager requis par tous les éléments du ASP.NET AJAX Control Toolkit :

<asp:ScriptManager ID="asm" runat="server" />

Enregistrer et exécuter la page : vous pouvez case activée et décocher les deux cases case activée, mais à aucun moment les deux cases case activée ne peuvent être cochées.

Une seule case à cocher peut être cochée à la fois (cliquez pour afficher l’image en taille réelle)

Précédent