이번 포스트에서는 ASP.NET의 컨트롤 중 하나인 DropDownList 컨트롤에 대해서 알아보도록 하겠습니다.
DropDownList 컨트롤은 HTML 컨트롤은 select 와 동일한 기능을 하는 컨트롤로써, 여러 개의 아이템 중에 하나의 아이템을 선택하게 하는 컨트롤입니다. DropDownList 컨트롤은 하위에 ListItem 컨트롤을 포함함으로써 사용자에게 아이템을 보여줄 수 있습니다. 가장 기본적인 DropDownList 컨트롤의 소스는 다음과 같이 구성됩니다.
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Text="ASP.NET" Value="ASP.NET"></asp:ListItem>
<asp:ListItem Text="C#" Value="C#"></asp:ListItem>
<asp:ListItem Text="ADO.NET" Value="ADO.NET"></asp:ListItem>
</asp:DropDownList>
또는 다음과 같이 작성하여도 동일한 효과를 나타냅니다.
<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true">
<asp:ListItem>ASP.NET</asp:ListItem>
<asp:ListItem>C#</asp:ListItem>
<asp:ListItem>ADO.NET</asp:ListItem>
</asp:DropDownList>
DropDownList 컨트롤을 가지고 선택한 값을 포스트백 이후에도 그대로 표현하게 하려면 AutoPostBack 속성을 "true"로 설정하여야 합니다. AutoPostBack 속성이 false이면 포스트백 이후에 선택한 값의 상태가 유지되지 않게 됩니다.
DropDownList 컨트롤의 가장 주요한 이벤트는 SelectedIndexChanged 이벤트입니다. DropDownList 컨트롤의 아이템을 변경했을 때 발생되는 이벤트입니다. DropDownList 컨트롤의 아이템을 변경했을 때에 발생되는 SelectedIndexChanged 이벤트의 코드에 다음과 같이 작성합니다.
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem Text="ASP.NET" Value="ASP.NET"></asp:ListItem>
<asp:ListItem Text="C#" Value="C#"></asp:ListItem>
<asp:ListItem Text="ADO.NET" Value="ADO.NET"></asp:ListItem>
</asp:DropDownList>
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
Response.Write("선택된 항목은 " + DropDownList1.SelectedValue + "이고, 선택된 인덱스는 " + DropDownList1.SelectedIndex.ToString() + "입니다.");
}
웹 브라우저에서 아이템을 변경하면 다음과 같이 선택된 아이템의 값과 인덱스가 표시됩니다.
코드 비하인드에서 동적으로 ListItem을 추가하는 방법은 다음과 같습니다.
protected void Page_Load(object sender, EventArgs e)
{
if (! Page.IsPostBack)
{
string[] strArray = new string[5] {"List1", "List2", "List3", "List4", "List5"};
ListItem li = null;
foreach (string str in strArray)
{
li = new ListItem(str);
DropDownList2.Items.Add(li);
li = null;
}
}
}
string 배열을 통해서, ListItem의 인스턴스를 생성하여, string의 값을 넣어준 후, DropDownList.Items.Add() 메소드를 이용하여 DropDownList 컨트롤에 아이템을 추가하였습니다. 꼭 string 배열뿐만이 아니라, 다른 배열이나 데이터 소스를 통해서도 위와 같이 DropDownList 컨트롤과 데이터바인딩 시켜줄 수 있습니다.
마지막으로, 동적으로 ListItem을 추가하고, 삭제하는 방법에 대해서 알아보도록 하겠습니다. 다음과 같이 코드를 작성합니다.
<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true"></asp:DropDownList>
<br /><br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_OnClick" Width="120" Text="추 가" />
<asp:Button ID="Button2" runat="server" OnClick="Button2_OnClick" Width="120" Text="삭 제" />
protected void Button1_OnClick(object sender, EventArgs e)
{
int iIndex = DropDownList2.Items.Count + 1;
ListItem li = new ListItem("List" + iIndex.ToString());
DropDownList2.Items.Add(li);
li = null;
Response.Write("DropDownList2에 " + "List" + iIndex.ToString() + "이 추가되었습니다.");
}
protected void Button2_OnClick(object sender, EventArgs e)
{
if (DropDownList2.Items.Count > 0)
{
DropDownList2.Items.RemoveAt(0);
Response.Write("DropDownList2의 아이템이 삭제되었습니다.");
}
}
"추가" 버튼을 누르면, DropDownList 컨트롤에 아이템이 하나 추가되고, "삭제" 버튼을 클릭하면, DropDownList 아이템 중 최상단의 아이템이 삭제되게 됩니다. 브라우저에서 보면 다음과 같습니다.
이상으로 DropDownList 컨트롤에 대한 설명을 마치도록 하겠습니다.
감사합니다. ^^;;
포스팅을 마치며... ----------------------------------------------------------------------------
DropDownList 컨트롤은 HTML 컨트롤의 select와 동일한 역할을 하는 컨트롤입니다. 그러므로, 자바스크립트에서의 제어도 동일합니다. 다만, DropDownList 컨트롤에서 select 컨트롤의 이벤트처럼 onchange 이벤트를 이용하기 위해서는 코드 비하인드에서 DropDownList.Attributes.Add("onchange", "자바스크립트 함수명"); 처럼 onchange 이벤트를 할당해주어야 사용이 가능합니다.
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.