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 コントロールを使用して、単一選択ドロップダウン リスト コントロールを作成できます。DropDownList コントロールの外観を制御するには、BorderColor、BorderStyle、BorderWidth の各プロパティを設定します。
DropDownList コントロールに表示される項目を指定するには、ListItem コントロールの開始タグと終了タグの間に、各エントリの DropDownList 要素を挿入します。
DropDownList コントロールは、データ バインディングもサポートします。コントロールをデータ ソースにバインドするには、まず ArrayList など、コントロールに表示するアイテムが含まれるデータ ソースを作成します。次に、DataBind メソッドを使用して、データ ソースを DropDownList コントロールにバインドします。DataTextField プロパティと DataValueField プロパティを使用して、コントロール内の各リスト項目の Text プロパティと Value プロパティにバインドするデータ ソース フィールドをそれぞれ指定します。これで、DropDownList コントロールに、データ ソースの情報が表示されるようになります。
SelectedIndex プロパティを使用して、ユーザーが DropDownList コントロールから選択した項目のインデックスをプログラムによって判断します。次に、このインデックスを使用して、選択されている項目をコントロールの Items コレクションから取得します。
DropDownList Web サーバー コントロールのプロパティとイベントの詳細については、DropDownList のドキュメントを参照してください。
使用例
4 つのアイテムを含む 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>
宣言によるデータ バインディングを行って、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>
参照
概念
参照
DropDownList Web サーバー コントロールの概要