DropDownList Web 伺服器控制項宣告式語法
更新：2007 年 11 月
讓使用者能夠從單一選取式的下拉式清單中選取。下拉式清單可以含有任何數目的項目。
<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>
備註
請使用 DropDownList 控制項來建立單一選取式的下拉式清單控制項。只要設定 BorderColor、BorderStyle 和 BorderWidth 屬性，即可控制 DropDownList 控制項的外觀。
若要指定出現在 DropDownList 控制項中的項目 (Item)，請將每個項目 (Entry) 的 ListItem 項目 (Element) 置於 DropDownList 控制項的開頭和結尾標記之間。
DropDownList 控制項也支援資料繫結。若要將控制項繫結至資料來源，請先建立資料來源，像是 ArrayList，並在其中包含要在控制項中顯示的項目。接下來，使用 DataBind 方法，將資料來源繫結至 DropDownList 控制項。您可以使用 DataTextField 和 DataValueField 屬性來指定資料來源中的欄位，以分別繫結至控制項中每個清單項目的 Text 和 Value 屬性。DropDownList 控制項現在將會顯示來自資料來源的資訊。
請使用 SelectedIndex 屬性，以程式設計的方式來判斷使用者在 DropDownList 控制項中所選取項目的索引。然後，這個索引就可以用來從控制項的 Items 集合擷取選取的項目。
如需 DropDownList Web 伺服器控制項之屬性和事件的詳細資訊，請參閱 DropDownList 文件。
範例
下列程式碼範例會示範如何建立包含四個項目的 DropDownList 控制項。
<%@ 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>
下列程式碼範例會示範如何透過宣告式資料繫結，填入 (Populate) DropDownList 控制項。
<%@ 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>
下列程式碼範例會示範如何透過程式設計資料繫結，建立 DropDownList 控制項。
<%@ 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>