Syntaxe déclarative du contrôle serveur Web DropDownList
Mise à jour : novembre 2007
Permet aux utilisateurs d'opérer une sélection dans une liste déroulante à sélection simple. La liste déroulante peut contenir n'importe quel nombre d'éléments.
<asp:DropDownList
AccessKey="string"
AppendDataBoundItems="True|False"
AutoPostBack="True|False"
BackColor="color name|#dddddd"
BorderColor="color name|#dddddd"
BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge|
Inset|Outset"
BorderWidth="size"
CausesValidation="True|False"
CssClass="string"
DataMember="string"
DataSource="string"
DataSourceID="string"
DataTextField="string"
DataTextFormatString="string"
DataValueField="string"
Enabled="True|False"
EnableTheming="True|False"
EnableViewState="True|False"
Font-Bold="True|False"
Font-Italic="True|False"
Font-Names="string"
Font-Overline="True|False"
Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|Medium|
Large|X-Large|XX-Large"
Font-Strikeout="True|False"
Font-Underline="True|False"
ForeColor="color name|#dddddd"
Height="size"
ID="string"
OnDataBinding="DataBinding event handler"
OnDataBound="DataBound event handler"
OnDisposed="Disposed event handler"
OnInit="Init event handler"
OnLoad="Load event handler"
OnPreRender="PreRender event handler"
OnSelectedIndexChanged="SelectedIndexChanged event handler"
OnTextChanged="TextChanged event handler"
OnUnload="Unload event handler"
runat="server"
SelectedIndex="integer"
SelectedValue="string"
SkinID="string"
Style="string"
TabIndex="integer"
ToolTip="string"
ValidationGroup="string"
Visible="True|False"
Width="size"
>
<asp:ListItem
Enabled="True|False"
Selected="True|False"
Text="string"
Value="string"
/>
</asp:DropDownList>
Notes
Utilisez le contrôle DropDownList pour créer un contrôle de liste déroulante à sélection simple. Vous pouvez modifier l'apparence du contrôle DropDownList en définissant les propriétés BorderColor, BorderStyle et BorderWidth.
Pour spécifier les éléments qui apparaissent dans le contrôle DropDownList, insérez un élément ListItem pour chaque entrée entre les balises d'ouverture et de fermeture du contrôle DropDownList.
Le contrôle DropDownList prend également en charge la liaison de données. Pour lier le contrôle à une source de données, commencez par créer une source de données, par exemple ArrayList, qui contient les éléments à afficher dans le contrôle. Ensuite, utilisez la méthode DataBind pour lier la source de données au contrôle DropDownList. Utilisez les propriétés DataTextField et DataValueField pour spécifier le champ de la source de données à lier respectivement aux propriétés Text et Value de chaque élément de liste du contrôle. Le contrôle DropDownList affichera désormais les informations à partir de la source de données.
Utilisez la propriété SelectedIndex pour déterminer par programme l'index de l'élément sélectionné par l'utilisateur dans le contrôle DropDownList. L'index peut être ensuite utilisé pour récupérer l'élément sélectionné dans la collection Items du contrôle.
Pour plus d'informations sur les propriétés et événements du contrôle serveur Web DropDownList, consultez la documentation de DropDownList.
Exemple
L'exemple de code suivant montre comment créer un contrôle DropDownList qui contient quatre éléments.
<%@ Page Language="VB" AutoEventWireup="True" %>
<!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" >
<script runat="server" >
Sub Selection_Change(sender As Object, e As EventArgs)
' Set the background color for days in the Calendar control
' based on the value selected by the user from the
' DropDownList control.
Calendar1.DayStyle.BackColor = _
System.Drawing.Color.FromName(ColorList.SelectedItem.Value)
End Sub
</script>
<head runat="server">
<title> DropDownList Example </title>
</head>
<body>
<form id="form1" runat="server">
<h3> DropDownList Example </h3>
Select a background color for days in the calendar.
<br /><br />
<asp:Calendar id="Calendar1"
ShowGridLines="True"
ShowTitle="True"
runat="server"/>
<br /><br />
<table cellpadding="5">
<tr>
<td>
Background color:
</td>
</tr>
<tr>
<td>
<asp:DropDownList id="ColorList"
AutoPostBack="True"
OnSelectedIndexChanged="Selection_Change"
runat="server">
<asp:ListItem Selected="True" Value="White"> White </asp:ListItem>
<asp:ListItem Value="Silver"> Silver </asp:ListItem>
<asp:ListItem Value="DarkGray"> Dark Gray </asp:ListItem>
<asp:ListItem Value="Khaki"> Khaki </asp:ListItem>
<asp:ListItem Value="DarkKhaki"> Dark Khaki </asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</table>
</form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="True" %>
<!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" >
<script runat="server" >
void Selection_Change(Object sender, EventArgs e)
{
// Set the background color for days in the Calendar control
// based on the value selected by the user from the
// DropDownList control.
Calendar1.DayStyle.BackColor =
System.Drawing.Color.FromName(ColorList.SelectedItem.Value);
}
</script>
<head runat="server">
<title> DropDownList Example </title>
</head>
<body>
<form id="form1" runat="server">
<h3> DropDownList Example </h3>
Select a background color for days in the calendar.
<br /><br />
<asp:Calendar id="Calendar1"
ShowGridLines="True"
ShowTitle="True"
runat="server"/>
<br /><br />
<table cellpadding="5">
<tr>
<td>
Background color:
</td>
</tr>
<tr>
<td>
<asp:DropDownList id="ColorList"
AutoPostBack="True"
OnSelectedIndexChanged="Selection_Change"
runat="server">
<asp:ListItem Selected="True" Value="White"> White </asp:ListItem>
<asp:ListItem Value="Silver"> Silver </asp:ListItem>
<asp:ListItem Value="DarkGray"> Dark Gray </asp:ListItem>
<asp:ListItem Value="Khaki"> Khaki </asp:ListItem>
<asp:ListItem Value="DarkKhaki"> Dark Khaki </asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</table>
</form>
</body>
</html>
L'exemple de code suivant montre comment remplir un contrôle DropDownList à l'aide d'une liaison de données déclarative.
<%@ Page Language="VB"%>
<%@ Import Namespace="System.Drawing" %>
<!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 runat="server">
<title>DropDownList Declarative DataBinding Sample</title>
<script runat="server">
Sub Selection_Change(ByVal sender As Object, ByVal e As EventArgs)
'' Set the background color for days in the Calendar control
'' based on the value selected by the user from the
'' DropDownList control.
Calendar1.DayStyle.BackColor = _
Color.FromName(ColorList.SelectedItem.Value)
End Sub
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:XmlDataSource ID="Colors" runat="server">
<Data>
<Colors>
<Color ColorID="White" ColorName="White" />
<Color ColorID="Silver" ColorName="Silver" />
<Color ColorID="DarkGray" ColorName="Dark Gray" />
<Color ColorID="Khaki" ColorName="Khaki" />
<Color ColorID="DarkKhaki" ColorName="Dark Khaki" />
</Colors>
</Data>
</asp:XmlDataSource>
Colors: <asp:DropDownList ID="ColorList"
DataSourceID="Colors"
DataTextField="ColorName"
DataValueField="ColorID"
runat="server"
AutoPostBack="true"
OnSelectedIndexChanged="Selection_Change" />
<p />
<asp:Calendar ID="Calendar1" runat="server" />
</form>
</body>
</html>
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Drawing" %>
<!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 runat="server">
<title>DropDownList Declarative DataBinding Sample</title>
<script runat="server">
void Selection_Change(Object sender, EventArgs e)
{
// Set the background color for days in the Calendar control
// based on the value selected by the user from the
// DropDownList control.
Calendar1.DayStyle.BackColor =
Color.FromName(ColorList.SelectedItem.Value);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:XmlDataSource ID="Colors" runat="server">
<Data>
<Colors>
<Color ColorID="White" ColorName="White" />
<Color ColorID="Silver" ColorName="Silver" />
<Color ColorID="DarkGray" ColorName="Dark Gray" />
<Color ColorID="Khaki" ColorName="Khaki" />
<Color ColorID="DarkKhaki" ColorName="Dark Khaki" />
</Colors>
</Data>
</asp:XmlDataSource>
Colors: <asp:DropDownList ID="ColorList"
DataSourceID="Colors"
DataTextField="ColorName"
DataValueField="ColorID"
runat="server"
AutoPostBack="true"
OnSelectedIndexChanged="Selection_Change" />
<p />
<asp:Calendar ID="Calendar1" runat="server" />
</form>
</body>
</html>
L'exemple de code suivant montre comment créer un contrôle DropDownList à l'aide d'une liaison de données par programme.
<%@ Page Language="VB" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
<!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" >
<script runat="server" >
Sub Selection_Change(sender as Object, e As EventArgs)
' Set the background color for days in the Calendar control
' based on the value selected by the user from the
' DropDownList control.
Calendar1.DayStyle.BackColor = _
System.Drawing.Color.FromName(ColorList.SelectedItem.Value)
End Sub
Sub Page_Load(sender as Object, e As EventArgs)
' Load data for the DropDownList control only once, when the
' page is first loaded.
If Not IsPostBack Then
' Specify the data source and field names for the Text
' and Value properties of the items (ListItem objects)
' in the DropDownList control.
ColorList.DataSource = CreateDataSource()
ColorList.DataTextField = "ColorTextField"
ColorList.DataValueField = "ColorValueField"
' Bind the data to the control.
ColorList.DataBind()
' Set the default selected item, if desired.
ColorList.SelectedIndex = 0
End If
End Sub
Function CreateDataSource() As ICollection
' Create a table to store data for the DropDownList control.
Dim dt As DataTable = New DataTable()
' Define the columns of the table.
dt.Columns.Add(new DataColumn("ColorTextField", GetType(String)))
dt.Columns.Add(new DataColumn("ColorValueField", GetType(String)))
' Populate the table with sample values.
dt.Rows.Add(CreateRow("White", "White", dt))
dt.Rows.Add(CreateRow("Silver", "Silver", dt))
dt.Rows.Add(CreateRow("Dark Gray", "DarkGray", dt))
dt.Rows.Add(CreateRow("Khaki", "Khaki", dt))
dt.Rows.Add(CreateRow("Dark Khaki", "DarkKhaki", dt))
' Create a DataView from the DataTable to act as the data source
' for the DropDownList control.
Dim dv As DataView = New DataView(dt)
Return dv
End Function
Function CreateRow(Text As String, Value As String, dt As DataTable) As DataRow
' Create a DataRow using the DataTable defined in the
' CreateDataSource method.
Dim dr As DataRow = dt.NewRow()
' This DataRow contains the ColorTextField and ColorValueField
' fields, as defined in the CreateDataSource method. Set the
' fields with the appropriate value. Remember that column 0
' is defined as ColorTextField, and column 1 is defined as
' ColorValueField.
dr(0) = Text
dr(1) = Value
Return dr
End Function
</script>
<head runat="server">
<title> DropDownList Data Binding Example </title>
</head>
<body>
<form id="form1" runat="server">
<h3> DropDownList Data Binding Example </h3>
Select a background color for days in the calendar.
<br /><br />
<asp:Calendar id="Calendar1"
ShowGridLines="True"
ShowTitle="True"
runat="server"/>
<br /><br />
<table cellpadding="5">
<tr>
<td>
Background color:
</td>
</tr>
<tr>
<td>
<asp:DropDownList id="ColorList"
AutoPostBack="True"
OnSelectedIndexChanged="Selection_Change"
runat="server"/>
</td>
</tr>
</table>
</form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
<!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" >
<script runat="server" >
void Selection_Change(Object sender, EventArgs e)
{
// Set the background color for days in the Calendar control
// based on the value selected by the user from the
// DropDownList control.
Calendar1.DayStyle.BackColor =
System.Drawing.Color.FromName(ColorList.SelectedItem.Value);
}
void Page_Load(Object sender, EventArgs e)
{
// Load data for the DropDownList control only once, when the
// page is first loaded.
if(!IsPostBack)
{
// Specify the data source and field names for the Text
// and Value properties of the items (ListItem objects)
// in the DropDownList control.
ColorList.DataSource = CreateDataSource();
ColorList.DataTextField = "ColorTextField";
ColorList.DataValueField = "ColorValueField";
// Bind the data to the control.
ColorList.DataBind();
// Set the default selected item, if desired.
ColorList.SelectedIndex = 0;
}
}
ICollection CreateDataSource()
{
// Create a table to store data for the DropDownList control.
DataTable dt = new DataTable();
// Define the columns of the table.
dt.Columns.Add(new DataColumn("ColorTextField", typeof(String)));
dt.Columns.Add(new DataColumn("ColorValueField", typeof(String)));
// Populate the table with sample values.
dt.Rows.Add(CreateRow("White", "White", dt));
dt.Rows.Add(CreateRow("Silver", "Silver", dt));
dt.Rows.Add(CreateRow("Dark Gray", "DarkGray", dt));
dt.Rows.Add(CreateRow("Khaki", "Khaki", dt));
dt.Rows.Add(CreateRow("Dark Khaki", "DarkKhaki", dt));
// Create a DataView from the DataTable to act as the data source
// for the DropDownList control.
DataView dv = new DataView(dt);
return dv;
}
DataRow CreateRow(String Text, String Value, DataTable dt)
{
// Create a DataRow using the DataTable defined in the
// CreateDataSource method.
DataRow dr = dt.NewRow();
// This DataRow contains the ColorTextField and ColorValueField
// fields, as defined in the CreateDataSource method. Set the
// fields with the appropriate value. Remember that column 0
// is defined as ColorTextField, and column 1 is defined as
// ColorValueField.
dr[0] = Text;
dr[1] = Value;
return dr;
}
</script>
<head runat="server">
<title> DropDownList Data Binding Example </title>
</head>
<body>
<form id="form1" runat="server">
<h3> DropDownList Data Binding Example </h3>
Select a background color for days in the calendar.
<br /><br />
<asp:Calendar id="Calendar1"
ShowGridLines="True"
ShowTitle="True"
runat="server"/>
<br /><br />
<table cellpadding="5">
<tr>
<td>
Background color:
</td>
</tr>
<tr>
<td>
<asp:DropDownList id="ColorList"
AutoPostBack="True"
OnSelectedIndexChanged="Selection_Change"
runat="server"/>
</td>
</tr>
</table>
</form>
</body>
</html>
Voir aussi
Concepts
Référence
Vue d'ensemble du contrôle serveur Web DropDownList