Traduction▲
Cet article est la traduction la plus fidèle possible de l'article original : How do I use the ComboBox Control?
Introduction▲
Le but de ce tutoriel est d'expliquer le contrôle ComboBox de l'AJAX Control Toolkit. La ComboBox fonctionne comme la combinaison d'un contrôle DropDownList standard et un contrôle TextBox. Vous pouvez choisir parmi une liste pré-existante d'éléments ou de saisir un nouvel élément.
La ComboBox est similaire à l'extenseur de contrôle AutoComplete, mais les contrôles sont utilisés dans des scénarios différents. L'extenseur de contrôle AutoComplete effectue des requêtes auprès de services Web pour obtenir des informations correspondant aux entrées de l'utilisateur. Le contrôle ComboBox, en revanche, est initialisé avec un ensemble d'éléments. L'utilisation de l'extenseur de l'extenseur de contrôle AutoComplete à du sens lorsque vous travaillez avec un grand ensemble de données (millions de pièces de voiture), alors qu'utiliser le contrôle ComboBox est plus logique lorsque l'on travaille avec un petit ensemble de données (plusieurs dizaines de pièces de voiture).
Sélection d'une liste d'éléments statiques ▲
Commençons par un exemple simple d'utilisation du contrôle ComboBox. Imaginez que vous souhaitez afficher une liste statique d'éléments dans une liste déroulante. Cependant, vous voulez laisser ouverte la possibilité que cette liste ne soit pas complète. Vous souhaitez permettre à un utilisateur d'entrer une valeur supplémentaire dans la liste.
Nous allons créer une nouvelle page ASP.NET Web Forms, et utiliser le contrôle ComboBox dans la page. Ajoutez la nouvelle page ASP.NET à votre projet, et passez en mode Design.
Si vous voulez utiliser le contrôle ComboBox dans la page, alors vous devez ajouter un contrôle ScriptManager à la page. Faites glisser le ScriptManager depuis l'onglet AJAX sur la surface du concepteur. Vous devez ajouter le contrôle ScriptManager en haut de la page, vous pouvez l'ajouter immédiatement au-dessous de l'ouverture de la balise <form>.
Ensuite, faites glisser le contrôle ComboBox sur la page. Vous pouvez trouver le contrôle ComboBox dans la boîte à outils, avec les autres contrôles d'AJAX Control Toolkit (voir la figure 01).
Nous allons utiliser le contrôle ComboBox pour afficher une liste statique de choix. L'utilisateur peut choisir une quantité d'épices pour son alimentation à partir d'une liste de trois choix: Mild (légère), Medium (moyenne), et Hot (chaud) (voir Figure 02).
Il y'a deux façons pour ajouter ces choix au contrôle ComboBox. Tout d'abord, vous pouvez sélectionner l'option tâches Combobox la souris se trouve sur le contrôle en mode Design, puis ouvrir l'éditeur de collections (voir Figure 03).
La deuxième option est d'ajouter la liste des éléments entre l'ouverture et la fermeture des balises <asp:ComboBox> dans la vue Source. La page du Listing 1 contient une Combobox mise à jour avec la liste des éléments.
<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void btnSubmit_Click(object sender, EventArgs e)
{
lblSelection.Text = "You picked " + ComboBox1.SelectedItem.Text;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Static</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
Describe how spicy you like your food:
<br />
<cc1:ComboBox ID="ComboBox1" runat="server">
<asp:ListItem Text="Mild" Value="0" />
<asp:ListItem Text="Medium" Value="1" />
<asp:ListItem Text="Hot" Value="2" />
</cc1:ComboBox>
<asp:Button
ID="btnSubmit"
Text="Submit"
Runat="server" OnClick="btnSubmit_Click" />
<hr />
<asp:Label
ID="lblSelection"
Runat="server" />
</div>
</form>
</body>
</html>Lorsque vous ouvrez la page dans le Listing 1, vous pouvez sélectionner l'une des options pré-existantes de la ComboBox. En d'autres termes, la ComboBox fonctionne comme un contrôle DropDownList.
Cependant, vous avez aussi la possibilité d'entrer un nouveau choix (par exemple, Super Hot), qui ne figure pas dans la liste existante. Ainsi, le ComboBox fonctionne aussi comme un contrôle TextBox.
Peu importe que vous choisissiez un élément pré-existant ou que vous entriez un élément personnalisé, lorsque vous soumettez le formulaire, votre choix apparaît dans l'étiquette de contrôle. Lorsque vous soumettez le formulaire, le gestionnaire btnSubmit_Click est exécuté et met à jour le label (voir figure 04).
La ComboBox prend en charge les mêmes propriétés que le contrôle DropDownList pour récupérer l'élément sélectionné après qu'un formulaire ait été soumis:
- SelectedItem.Text - Affiche la valeur de la propriété Text de l'élément sélectionné.
- SelectedItem.Value - Affiche la valeur de la propriété Value de l'élément sélectionné, ou affiche le texte tapé dans la zone de liste déroulante.
- SelectedValue - Identique à SelectedItem.Value, sauf que cette propriété vous permet de spécifier la valeur par défaut (initial) de l'élément sélectionné.
Si vous entrez un nouveau choix dans la ComboBox, ce choix est attribué à la fois aux propriétés SelectedItem.Text et SelectedItem.Value.
Sélectionner la liste d'éléments depuis la base de données ▲
Vous pouvez récupérer la liste des éléments que la ComboBox affiche depuis une base de données. Par exemple, vous pouvez lier une ComboBox à un contrôle SqlDataSource, un contrôle ObjectDataSource, un LinqDataSource ou un EntityDataSource.
Imaginez que vous souhaitez afficher une liste de films dans une ComboBox. Vous voulez récupérer la liste des films à partir de la table Movies de votre base de données. Suivez ces étapes :
- Créez une page nommée Movies.aspx
- Ajoutez un contrôle ScriptManager à la page en faisant glisser le ScriptManager depuis l'onglet Extensions AJAX sur la page.
- Ajoutez un contrôle ComboBox à la page en le faisant glisser sur la page.
- En mode Design, placez votre souris sur le contrôle ComboBox et sélectionnez l'option "Choisir la source de données" (voir figure 05). L'Assistant configuration de source de données est lancé.
- Dans l'étape "Choisir une source de données", sélectionnez l'option "<Nouvelle source de données....>"
- Dans l'étape "Choisir un type de source de données", sélectionnez "Base de données".
- Dans l'étape "Choisir votre connexion de données", sélectionnez votre base de données (par exemple, MoviesDB.mdf).
- Dans l'étape "Enregistrer la chaîne de connexion dans le fichier de configuration de l'application", sélectionnez l'option de sauvegarder votre chaîne de connexion.
- Dans l'étape "Configurer l'instruction Select", sélectionnez la table Films et sélectionnez toutes les colonnes.
- Dans l'étape "Tester la requête", cliquez sur le bouton Terminer.
- De retour à l'étape "Choisir une source de données", sélectionnez la colonne Title pour l'affichage et la colonne l'ID pour le champ de données (voir la figure 06).
- Cliquez sur le bouton OK pour fermer l'assistant.
Après avoir effectué les étapes ci-dessus, le contrôle ComboBox est lié à un contrôle SqlDataSource qui représente les films de la table Movies de la base de données. La source de la page ressemble au Listing 2 (j'ai nettoyé le formatage un peu).
<%@ Page Language="C#" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!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">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<br />
Select your favorite movie:
<br />
<cc1:ComboBox
ID="ComboBox1"
DataSourceID="SqlDataSource1"
DataTextField="Title"
DataValueField="Id"
MaxLength="0"
style="display: inline;"
runat="server" >
</cc1:ComboBox>
<asp:SqlDataSource
ID="SqlDataSource1"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [Movies]"
runat="server">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>Notez que le contrôle ComboBox a une propriété DataSourceID qui pointe vers le contrôle SqlDataSource. Lorsque vous ouvrez la page dans un navigateur, la liste des films de la base de données est affichée (voir Figure 07). Vous pouvez soit choisir un film à partir de la liste ou d'entrer un nouveau film en le tapant dans la liste déroulante.
Réglage de la propriété DropDownStyle ▲
Vous pouvez utiliser la propriété DropDownStyle d'une ComboBox afin de modifier le comportement de la ComboBox. Cette propriété accepte les valeurs suivantes :
- Dropdown - (valeur par défaut) La ComboBox affiche une liste déroulante lorsque vous cliquez sur la flèche et vous pouvez entrer une nouvelle valeur.
- Simple - La ComboBox affiche une liste déroulante automatiquement et vous pouvez entrer une nouvelle valeur.
- DropDownList - La ComboBox fonctionne comme un contrôle DropDownList.
La différence entre Dropdown et Simple, c'est la façon dont la liste des éléments est affichée. Dans le cas de Simple, la liste est affichée immédiatement lorsque vous mettez le focus sur la ComboBox. Dans le cas de DropDown, vous devez cliquer sur la flèche pour voir la liste des éléments.
La valeur DropDownList fait que le contrôle ComboBox fonctionne comme un contrôle DropDownList standard. Cependant, il existe une différence importante ici. Les anciennes versions d'Internet Explorer affichent un contrôle DropDownList avec un z-index infini, de sorte que le contrôle apparaîtra au-dessus de tout contrôle placé devant elle. Comme la ComboBox rend un tag HTML <div> au lieu d'une balise HTML <select>, lw ComboBox respecte l'ordonnancement selon les niveaux de z.
Réglage de la propriété AutoCompleteMode ▲
Vous utilisez la propriété AutoCompleteMode de la ComboBox pour préciser ce qui se passe quand quelqu'un entre du texte dans la ComboBox. Cette propriété accepte les valeurs suivantes:
- None - (valeur par défaut) La ComboBox ne fournit pas de comportement d'autocomplétion.
- Suggest - La ComboBox affiche la liste et met en évidence l'élément correspondant dans la liste (voir la figure 08).
- Append - Le ComboBox n'affiche pas la liste et affiche l'élément correspondant dans la liste à ce que vous avez tapé (voir la figure 09).
- SuggestAppend - La ComboBox affiche la liste et affiche l'élément correspondant dans la liste à ce que vous avez tapé (voir figure 10).
VII. Résumé▲
Dans ce tutoriel, vous avez appris comment utiliser le contrôle ComboBox pour afficher un ensemble fixe d'éléments. Nous avons lié le contrôle ComboBox à la fois à un ensemble d'éléments statiques et à une table de base de données. Enfin, vous avez appris comment modifier le comportement de la ComboBox en jouant sur ses propriétés DropDownStyle et AutoCompleteMode.
