ASP:CHECKBOXLIST |
ASP : Liste de case à cocher |
|---|---|
| ASP.NET | |
Syntaxe
|
<asp:CheckBoxList paramètres> <asp:ListItem>valeurs 1</asp:ListItem> <asp:ListItem>valeurs 2</asp:ListItem> <asp:ListItem>valeurs 3</asp:ListItem> ... </asp:CheckBoxList> |
Paramètres
| Paramètre | Description | ||
|---|---|---|---|
| AccessKey=valeur | Ce paramètre de balise permet d'indiquer un touche de raccourci à associer avec cette balise. | ||
| AppendDataBoundItems=valeur | Ce paramètre permet d'indiquer si les éléments de la liste sont effacés avant la liaison des données ou non : | ||
| Constante | Description | ||
| "False" | Cette constante permet d'indiquer qu'ils ne sont pas effacés. | ||
| "True" | Cette constante permet d'indiquer qu'ils sont effacés. | ||
| AutoPostBack=valeur | Ce paramètre permet d'indiquer s'il faut poster immédiatement après avoir coché ou non : | ||
| Constante | Description | ||
| "False" | Cette constante permet d'indiquer qu'il ne faut pas poster. | ||
| "True" | Cette constante permet d'indiquer qu'il faut poster. | ||
| BackColor=valeur | Ce paramètre permet d'indiquer la couleur d'arrière plan de la balise. | ||
| BorderColor=valeur | Ce paramètre permet d'indiquer la couleur de bordure de la balise. | ||
| BorderStyle=valeur | Ce paramètre permet d'indiquer le style de bordure de la balise : NotSet, None, Dotted, Dashed, Solid, Double, Groove, Ridge, Inset ou Outset. | ||
| BorderWidth=valeur | Ce paramètre permet d'indiquer la largeur de la bordure de la balise. | ||
| CausesValidation=valeur | Ce paramètre permet d'indiquer s'il faut effectuer la validation ou non : | ||
| Constante | Description | ||
| "False" | Cette constante permet d'indiquer qu'il ne faut pas valider. | ||
| "True" | Cette constante permet d'indiquer qu'il faut valider. | ||
| CssClass=valeur | Ce paramètre permet d'indiquer la classe de feuille de style CSS de la balise. | ||
| CellPadding=valeur | Ce paramètre permet d'indiquer l'espace d'empattement d'une cellule. | ||
| CellSpacing=valeur | Ce paramètre permet d'indiquer l'espacement entre les cellules. | ||
| DataMember=valeur | Ce paramètre permet d'indiquer les données du membre de la balise. | ||
| DataSource=valeur | Ce paramètre permet d'indiquer le contrôle où sont situés les données. | ||
| DataSourceID=valeur | Ce paramètre permet d'indiquer l'identificateur de contrôle où sont situés les données. | ||
| DataTextField=valeur | Ce paramètre permet d'indiquer le champ de données texte. | ||
| DataTextFormatString=valeur | Ce paramètre permet d'indiquer la chaine de caractères de formatage du champ de données texte. | ||
| DataValueField=valeur | Ce paramètre permet d'indiquer la valeur du champ de données. | ||
| Enabled=valeur | Ce paramètre permet d'indiquer si la balise doit être active ou non : | ||
| Constante | Description | ||
| "False" | Cette constante permet d'indiquer que la balise n'est pas active. | ||
| "True" | Cette constante permet d'indiquer que la balise n'est pas active. | ||
| EnableTheming=valeur | Ce paramètre permet d'indiquer si le thème de la balise doit être affiché ou non : | ||
| Constante | Description | ||
| "False" | Cette constante permet d'indiquer que le thème de la balise n'est pas affiché. | ||
| "True" | Cette constante permet d'indiquer que le thème de la balise est affiché. | ||
| EnableViewState=valeur | Ce paramètre permet d'indiquer si le ViewState de la balise doit être activé ou non : | ||
| Constante | Description | ||
| "False" | Cette constante permet d'indiquer que le ViewState de la balise n'est pas actif. | ||
| "True" | Cette constante permet d'indiquer que le ViewState de la balise est actif. | ||
| Font-Bold=valeur | Ce paramètre permet d'indiquer si la police de caractères de la balise doit être en gras ou non : | ||
| Constante | Description | ||
| "False" | Cette constante permet d'indiquer que la police de caractères n'est pas en gras. | ||
| "True" | Cette constante permet d'indiquer que la police de caractères est en gras. | ||
| Font-Italic=valeur | Ce paramètre permet d'indiquer si la police de caractères de la balise doit être en italique ou non : | ||
| Constante | Description | ||
| "False" | Cette constante permet d'indiquer que la police de caractères n'est pas en italique. | ||
| "True" | Cette constante permet d'indiquer que la police de caractères est en italique. | ||
| Font-Names=valeur | Ce paramètre permet d'indiquer les noms de la police de caractères. | ||
| Font-Overline=valeur | Ce paramètre permet d'indiquer si la police de caractères de la balise doit être surligné ou non : | ||
| Constante | Description | ||
| "False" | Cette constante permet d'indiquer que la police de caractères n'est pas surligné. | ||
| "True" | Cette constante permet d'indiquer que la police de caractères est surligné. | ||
| Font-Size=valeur | Ce paramètre permet d'indiquer la taille de la police de caractères de la balise : Smaller, Larger, XX-Small, X-Small, Small, Medium, Large, X-Large ou XX-Large. | ||
| Font-Strikeout=valeur | Ce paramètre permet d'indiquer si la police de caractères de la balise doit être barré ou non : | ||
| Constante | Description | ||
| "False" | Cette constante permet d'indiquer que la police de caractères n'est pas barré. | ||
| "True" | Cette constante permet d'indiquer que la police de caractères est barré. | ||
| Font-Underline=valeur | Ce paramètre permet d'indiquer si la police de caractères de la balise doit être souligné ou non : | ||
| Constante | Description | ||
| "False" | Cette constante permet d'indiquer que la police de caractères n'est pas souligné. | ||
| "True" | Cette constante permet d'indiquer que la police de caractères est souligné. | ||
| ForeColor=valeur | Ce paramètre permet d'indiquer la couleur de premier plan de la balise. | ||
| Height=valeur | Ce paramètre permet d'indiquer la hauteur de la balise. | ||
| ID=valeur | Ce paramètre permet d'indiquer l'identificateur de la balise. | ||
| OnDataBinding=valeur | Ce paramètre permet d'indiquer le gestionnaire d'événement de DataBinding. | ||
| OnDataBound=valeur | Ce paramètre permet d'indiquer le gestionnaire d'événement de DataBound. | ||
| OnDisposed=valeur | Ce paramètre permet d'indiquer le gestionnaire d'événement de disposition. | ||
| OnInit=valeur | Ce paramètre permet d'indiquer le gestionnaire d'événement d'initialisation. | ||
| OnLoad=valeur | Ce paramètre permet d'indiquer le gestionnaire d'événement de chargement. | ||
| OnPreRender=valeur | Ce paramètre permet d'indiquer le gestionnaire d'événement de pré-rendu. | ||
| OnSelectedIndexChanged=valeur | Ce paramètre permet d'indiquer le gestionnaire d'événement de changement d'index sélectionné. | ||
| OnTextChanged=valeur | Ce paramètre permet d'indiquer le gestionnaire d'événement de changement de texte. | ||
| OnUnload=valeur | Ce paramètre permet d'indiquer le gestionnaire d'événement de déchargement. | ||
| RepeatColumns=valeur | Ce paramètre permet d'indiquer le nombre de colonnes par de répétitions. | ||
| RepeatDirection=valeur | Ce paramètre permet d'indiquer la direction de la répétition de colonne : | ||
| Constante | Description | ||
| "Horizontal" | Cette constante permet d'indiquer qu'il faut effectuer la répétition des colonnes dans le sens horizontal. | ||
| "Vertical" | Cette constante permet d'indiquer qu'il faut effectuer la répétition des colonnes dans le sens vertical. | ||
| RepeatLayout=valeur | Ce paramètre permet d'indiquer la couche de la répétition : | ||
| Constante | Description | ||
| "Table" | Cette constante permet d'indiquer une couche en tableau. | ||
| "Flow" | Cette constante permet d'indiquer une couche en flux de données. | ||
| "OrderedList" | Cette constante permet d'indiquer une couche en une liste ordonnée. | ||
| "UnorderedList" | Cette constante permet d'indiquer une couche en une liste désordonnée. | ||
| runat=valeur | Ce paramètre permet d'indiquer où doit être exécuté la balise : | ||
| Constante | Description | ||
| "server" | Cette constante permet d'indiquer qu'il faut exécuter la balise du côté serveur. | ||
| SelectedIndex=valeur | Ce paramètre permet d'indiquer la position d'index sélectionné. | ||
| SelectedValue=valeur | Ce paramètre permet d'indiquer la valeur sélectionné. | ||
| SkinID=valeur | Ce paramètre permet d'indiquer l'identificateur de Skin. | ||
| Style=valeur | Ce paramètre de balise permet d'indiquer des paramètres de feuille de style associé avec cette balise. | ||
| TabIndex=valeur | Ce paramètre de balise permet d'indiquer l'ordre de sélection des champs et éléments dans un formulaire. | ||
| TextAlign=valeur | Ce paramètre de balise permet d'indiquer l'alignement du texte à côté de la case à cocher. | ||
| Constante | Description | ||
| "Left" | Cette constante permet d'indiquer que l'alignement s'effectue à gauche. | ||
| "Right" | Cette constante permet d'indiquer que l'alignement s'effectue à droite. | ||
| ToolTip=valeur | Ce paramètre de balise permet d'indiquer l'info-bulle. | ||
| ValidationGroup=valeur | Ce paramètre de balise permet d'indiquer le groupe de validation. | ||
| Visible=valeur | Ce paramètre permet d'indiquer si la balise doit être affiché ou non : | ||
| Constante | Description | ||
| "False" | Cette constante permet d'indiquer que la balise n'est pas affiché. | ||
| "True" | Cette constante permet d'indiquer que la balise est affiché. | ||
| Width=valeur | Ce paramètre de balise permet d'indiquer la largeur de la balise. | ||
Description
Cette balise permet de définir une liste de contrôle de case à cocher et comprenant des balises «ASP:LISTITEM».
Remarques
- Le contrôle <asp:CheckBoxList> permet d'afficher une liste de cases à cocher liées entre elles, tout en laissant à l'utilisateur la possibilité de sélectionner plusieurs options en même temps. Il est idéal pour représenter des choix multiples dans un formulaire.
- Chaque option est définie à l'aide de balises <asp:ListItem>, ce qui permet de spécifier à la fois un étiquette (Text) et une valeur interne (Value). Cela facilite le traitement des choix côté serveur lors de la soumission du formulaire.
- Le contrôle peut être lié à une source de données via la propriété DataSource, ce qui permet de générer dynamiquement une liste de cases à cocher depuis une base de données, une collection ou un tableau.
- Par défaut, toutes les cases sont affichées verticalement, mais on peut changer la disposition avec la propriété RepeatDirection, acceptant les valeurs Vertical ou Horizontal pour un meilleur contrôle de l'agencement visuel.
- La propriété RepeatLayout permet de choisir l'agencement des éléments, soit en Table, soit en Flow. L'option Flow est souvent préférée pour les mises en page modernes plus souples et plus compatibles avec les styles CSS.
- Il est possible de définir le nombre de colonnes dans lesquelles répartir les cases à cocher via la propriété RepeatColumns. Cela est pratique pour les longues listes d'options, qu'on souhaite présenter de façon plus compacte.
- On peut récupérer les éléments cochés dans le code-behind en parcourant la collection Items et en vérifiant la propriété Selected de chaque élément. Ce mécanisme est simple à utiliser et très flexible pour le traitement des données.
- Le contrôle prend en charge le ViewState, ce qui permet de conserver l'état des cases cochées après un postback. Cela évite de devoir recharger ou recalculer les sélections précédentes manuellement.
- Chaque élément de la liste peut être activé ou désactivé individuellement grâce à la propriété Enabled sur chaque ListItem. Cela permet de restreindre certaines options selon la logique métier ou les autorisations de l'utilisateur.
- La présentation visuelle du contrôle peut être personnalisée avec des styles CSS globaux (CssClass, Font, BackColor,...) ou directement sur les ListItem. Cela permet de respecter l'identité graphique du site tout en améliorant la lisibilité.
- La propriété ID permet d'identifier le contrôle pour pouvoir y accéder dans le code serveur ou le manipuler via JavaScript côté client. Cela est essentiel pour gérer les interactions ou effectuer des tests unitaires.
- Le contrôle est compatible avec les événements de validation, bien qu'il ne déclenche pas de postback par défaut comme un bouton. Il peut cependant être combiné avec d'autres contrôles comme un Button ou un LinkButton pour traiter les sélections.
- L'ajout ou la suppression dynamique d'éléments dans la liste peut se faire via la méthode Items.Add() ou Items.RemoveAt() dans le code-behind. Cela permet de générer une liste adaptée à chaque utilisateur ou situation.
- Chaque case à cocher est rendue en HTML avec l'élément <input type="checkbox">, ce qui garantit une compatibilité maximale avec les navigateurs. Le contrôle est aussi interprété facilement par les technologies d'assistance (accessibilité).
- On peut aussi utiliser le contrôle CheckBoxList dans un UpdatePanel pour des interactions asynchrones (AJAX), ce qui permet de soumettre ou rafraîchir partiellement la page sans rechargement complet, améliorant ainsi l'expérience utilisateur.
Exemple
Voici un exemple permettant d'afficher 5 cases à cocher :
- <%@ Page Language="vb" %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <body>
- <form id="MonFormulaire" runat="server">
- <asp:CheckBoxList id="MaListeCaseACocher" runat="server">
- <asp:ListItem>Case à cocher 1</asp:ListItem>
- <asp:ListItem>Case à cocher 2</asp:ListItem>
- <asp:ListItem>Case à cocher 3</asp:ListItem>
- <asp:ListItem>Case à cocher 4</asp:ListItem>
- <asp:ListItem>Case à cocher 5</asp:ListItem>
- </asp:CheckBoxList>
- </form>
- </body>
- </html>
on obtiendra le résultat semblable suivant :
|
|
Voir également
Articles - Les géants de l'informatique - Microsoft
Dernière mise à jour : Samedi, le 31 août 2017