HtmlSelect 서버 컨트롤 선언 구문
업데이트: 2007년 11월
<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 컨트롤을 사용하여 HTML <select> 요소를 프로그래밍할 수 있습니다. 이 컨트롤은 기본적으로 드롭다운 목록 상자로 렌더링됩니다. 그러나 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>
다음 예제에서는 Page_Load 이벤트에 선언된 ArrayList에 HtmlSelect 컨트롤을 바인딩하는 방법을 보여 줍니다. 또한 렌더링된 페이지에 있는 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>