HtmlSelect サーバー コントロール宣言構文
<select> HTML 要素に割り当てるサーバー側のコントロールを作成し、リスト コントロールを作成できるようにします。
<select
DataSourceID="string"
DataTextField="string"
EnableViewState="False|True"
Id="string"
Visible="False|True"
OnDataBinding="OnDataBinding event handler"
OnDisposed="OnDisposed event handler"
OnInit="OnInit event handler"
OnLoad="OnLoad event handler"
OnPreRender="OnPreRender event handler"
OnServerChange="OnServerChange event handler"
OnUnload="OnUnload event handler"
runat="server"
>
<option>value1</option>
<option>value2</option>
</select>
解説
HtmlSelect コントロールを使用して、<select> HTML 要素をプログラムで制御します。 既定では、このコントロールはドロップダウン リスト ボックスとして表示されます。 ただし、複数選択を許可するか (Multiple 属性を指定)、Size プロパティに 1 を超える値を指定すると、コントロールはリスト ボックスとして表示されます。
コントロールをデータ ソースにバインドすることもできます。 DataSource プロパティを設定して、コントロールにバインドするデータ ソースを指定します。 コントロールにデータ ソースをバインドした後、DataValueField プロパティおよび DataTextField プロパティを設定して、それぞれ Value プロパティおよび Text プロパティにバインドするフィールドを指定できます。
使用例
HtmlSelect コントロールのエントリを使用して span コントロールの背景色を設定する例を示します。 Items プロパティを使用して、新しいオプション項目を選択リストに追加する方法も示します。 このプロパティは ListItemCollection 型であるため、そのクラスの Add メソッドにアクセスできます。 コード例では、AddToList_Click イベント ハンドラーで これを行っています。
<%@ 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" >
<head>
<title>HtmlSelect Control</title>
<script runat="server">
Sub Apply_Click(Source As Object, e As EventArgs)
Span1.Style("background-color") = ColorSelect.Value
End Sub
Sub AddToList_Click(Source As Object, e As EventArgs)
ColorSelect.Items.Add(Text1.Value)
End Sub
</script>
</head>
<body>
<h3>HtmlSelect Sample</h3>
<form id="Form1" runat="server">
Select a color:<br />
<select id="ColorSelect" runat="server">
<option>SkyBlue</option>
<option>LightGreen</option>
<option>Gainsboro</option>
<option>LemonChiffon</option>
</select>
<input id="Button1" type="button" runat="server"
value="Apply" onserverclick="Apply_Click" />
<p />
Don't see your color in the list above? You can add it here:<br />
<input type="text" id="Text1" runat="server" />
<input id="Button2" type="button" runat="server"
value="Add to List" onserverclick="AddToList_Click" />
<p />
<span id="Span1" runat="server">
Click the button to apply a background color to this span.
</span>
</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" >
<head>
<title>HtmlSelect Control</title>
<script runat="server">
void Apply_Click(object Source, EventArgs e)
{
Span1.Style["background-color"] = ColorSelect.Value;
}
void AddToList_Click(object Source, EventArgs e)
{
ColorSelect.Items.Add(Text1.Value);
}
</script>
</head>
<body>
<h3>HtmlSelect Sample</h3>
<form id="Form1" runat="server">
Select a color:<br />
<select id="ColorSelect" runat="server">
<option>SkyBlue</option>
<option>LightGreen</option>
<option>Gainsboro</option>
<option>LemonChiffon</option>
</select>
<input id="Button1" type="button" runat="server"
value="Apply" onserverclick="Apply_Click" />
<p />
Don't see your color in the list above? You can add it here:<br />
<input type="text" id="Text1" runat="server" />
<input id="Button2" type="button" runat="server"
value="Add to List" onserverclick="AddToList_Click" />
<p />
<span id="Span1" runat="server">
Click the button to apply a background color to this span.
</span>
</form>
</body>
</html>
次の例は、HtmlSelect コントロールを、Page_Load イベントで宣言されている ArrayList にバインドする方法を示しています。 表示されたページの HtmlInputButton コントロールがクリックされたときに、選択されたデータにバインドされた値を表示する SubmitBtn_Click イベントも含まれています。
選択コントロールの Id プロパティは、StateSelect です。コントロールの DataSource プロパティは、ページが読み込まれたときに ArrayList で作成された値に設定されます。 次に、選択コントロールの DataBind メソッドによって、ArrayList の値がコントロール自体にバインドされます。
<%@ 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" >
<head>
<title>HtmlSelect Control</title>
<script runat="server">
Sub Page_Load(Sender As Object, e As EventArgs)
If Not IsPostBack Then
Dim values As New ArrayList()
values.Add("IN")
values.Add("KS")
values.Add("MD")
values.Add("MI")
values.Add("OR")
values.Add("TN")
StateSelect.DataSource = values
StateSelect.DataBind()
End If
End Sub
Sub SubmitBtn_Click(sender As Object, e As EventArgs)
Span1.InnerHtml = "You chose: " & StateSelect.Value
End Sub
</script>
</head>
<body>
<h3>Data Binding to an HtmlSelect Control</h3>
<form id="Form1" runat="server">
Select a state:<br />
<select id="StateSelect" runat="server" />
<input id="Submit1" type="submit" value="Display Selected State"
onserverclick="SubmitBtn_Click" runat="server" />
<p />
<span id="Span1" runat="server" />
</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" >
<head>
<title>HtmlSelect Control</title>
<script runat="server">
void Page_Load(Object Sender, EventArgs e)
{
if (!IsPostBack)
{
ArrayList values = new ArrayList();
values.Add ("IN");
values.Add ("KS");
values.Add ("MD");
values.Add ("MI");
values.Add ("OR");
values.Add ("TN");
StateSelect.DataSource = values;
StateSelect.DataBind();
}
}
void SubmitBtn_Click(Object sender, EventArgs e)
{
Span1.InnerHtml = "You chose: " + StateSelect.Value;
}
</script>
</head>
<body>
<h3>Data Binding to an HtmlSelect Control</h3>
<form id="Form1" runat="server">
Select a state:<br />
<select id="StateSelect" runat="server" />
<input id="Submit1" type="submit" value="Display Selected State"
onserverclick="SubmitBtn_Click" runat="server" />
<p />
<span id="Span1" runat="server" />
</form>
</body>
</html>