ComboBox 컨트롤을 사용할 어떻게 할까요? 있나요? (C#)

아티클
07/13/2023

ComboBox는 TextBox의 유연성과 사용자가 선택할 수 있는 옵션 목록을 결합하는 ASP.NET AJAX 컨트롤입니다.

이 자습서의 목표는 AJAX 컨트롤 도구 키트 ComboBox 컨트롤을 설명하는 것입니다. ComboBox는 표준 ASP.NET DropDownList 컨트롤과 TextBox 컨트롤 간의 조합처럼 작동합니다. 기존 항목 목록에서 선택하거나 새 항목을 입력할 수 있습니다.

ComboBox는 AutoComplete 컨트롤 확장자와 유사하지만 컨트롤은 다양한 시나리오에서 사용됩니다. 자동 완성 확장기는 웹 서비스를 쿼리하여 일치하는 항목을 가져옵니다. 반면 ComboBox 컨트롤은 항목 집합으로 초기화됩니다. ComboBox 컨트롤을 사용하는 동안 큰 데이터 세트(수백만 대의 자동차 부품)로 작업할 때 자동 완성 확장기를 사용하는 것이 좋습니다( 수십 대의 자동차 부품).

정적 항목 목록에서 선택

ComboBox 컨트롤을 사용하는 간단한 샘플부터 살펴보겠습니다. 드롭다운 목록에 항목의 정적 목록을 표시하려는 경우를 상상해 보십시오. 그러나 목록이 완료되지 않을 가능성을 열어 두려고 합니다. 사용자가 목록에 사용자 지정 값을 입력하도록 허용하려고 합니다.

새 ASP.NET Web Forms 페이지를 만들고 페이지에서 ComboBox 컨트롤을 사용합니다. 프로젝트에 새 ASP.NET 페이지를 추가하고 디자인 보기로 전환합니다.

페이지에서 ComboBox 컨트롤을 사용하려면 ScriptManager 컨트롤을 페이지에 추가해야 합니다. AJAX 확장 탭 아래에서 ScriptManager 컨트롤을 Designer 화면으로 끌어옵니다. 페이지 맨 위에 ScriptManager 컨트롤을 추가해야 합니다. 여는 서버 쪽 <양식> 태그 바로 아래에 추가할 수 있습니다.

그런 다음 ComboBox 컨트롤을 페이지로 끌어다 놓습니다. 다른 AJAX 컨트롤 도구 키트 컨트롤 및 컨트롤 확장기가 있는 도구 상자에서 ComboBox 컨트롤을 찾을 수 있습니다(그림1 참조).

그림 01: 도구 상자에서 ComboBox 컨트롤 선택(전체 크기 이미지를 보려면 클릭)

ComboBox 컨트롤을 사용하여 선택 항목의 정적 목록을 표시합니다. 사용자는 세 가지 선택 항목 목록에서 음식에 대한 특정 수준의 매운 맛을 선택할 수 있습니다. 온화한, 중간 및 핫(그림 2 참조).

그림 02: 정적 항목 목록에서 선택(전체 크기 이미지를 보려면 클릭)

ComboBox 컨트롤에 이러한 선택 항목을 추가할 수 있는 두 가지 방법이 있습니다. 먼저 디자인 보기에서 컨트롤 위로 마우스를 가져가면 옵션 편집 작업 옵션을 선택하고 항목 편집기를 엽니다(그림 3 참조).

그림 03: ComboBox 항목 편집(전체 크기 이미지를 보려면 클릭)

두 번째 옵션은 원본 보기에서 열기 및 닫는 <asp:ComboBox> 태그 사이에 항목 목록을 추가하는 것입니다. 목록 1의 페이지에는 항목 목록이 있는 업데이트된 ComboBox가 포함되어 있습니다.

목록 1 - Static.aspx

<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        lblSelection.Text = "You picked " + ComboBox1.SelectedItem.Text;        
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Static</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        
        Describe how spicy you like your food:
        <br />
        <cc1:ComboBox ID="ComboBox1" runat="server">
            <asp:ListItem Text="Mild" Value="0" />
            <asp:ListItem Text="Medium" Value="1" />
            <asp:ListItem Text="Hot" Value="2" />
        </cc1:ComboBox>
        
        <asp:Button
            ID="btnSubmit"
            Text="Submit"
            Runat="server" OnClick="btnSubmit_Click" />

        <hr />
        <asp:Label
            ID="lblSelection"
            Runat="server" />
    
    </div>
    </form>
</body>
</html>

목록 1에서 페이지를 열면 ComboBox에서 기존 옵션 중 하나를 선택할 수 있습니다. 즉, ComboBox는 DropDownList 컨트롤처럼 작동합니다.

그러나 기존 목록에 없는 새 선택 항목(예: Super Spicy)을 입력할 수도 있습니다. 따라서 ComboBox는 TextBox 컨트롤처럼 작동합니다.

기존 항목을 선택하든 사용자 지정 항목을 입력하든 관계없이 양식을 제출하면 레이블 컨트롤에 선택 항목이 표시됩니다. 양식을 제출하면 btnSubmit_Click 처리기가 레이블을 실행하고 업데이트합니다(그림 4 참조).

그림 04: 선택한 항목 표시(전체 크기 이미지를 보려면 클릭)

ComboBox는 양식이 제출된 후 선택한 항목을 검색하기 위해 DropDownList 컨트롤과 동일한 속성을 지원합니다.

SelectedItem.Text - 선택한 항목의 Text 속성 값을 표시합니다.
SelectedItem.Value - 선택한 항목의 Value 속성 값을 표시하거나 ComboBox에 입력된 텍스트를 표시합니다.
SelectedValue - SelectedItem.Value와 동일하며, 이 속성을 사용하면 선택한 기본 항목(초기)을 지정할 수 있습니다.

ComboBox에 사용자 지정 선택을 입력하면 SelectedItem.Text 및 SelectedItem.Value 속성 모두에 사용자 지정 선택이 할당됩니다.

데이터베이스에서 항목 목록 선택

데이터베이스에서 ComboBox가 표시하는 항목 목록을 검색할 수 있습니다. 예를 들어 ComboBox를 SqlDataSource 컨트롤, ObjectDataSource 컨트롤, LinqDataSource 또는 EntityDataSource에 바인딩할 수 있습니다.

ComboBox에 영화 목록을 표시하려는 경우를 상상해 보십시오. Movies 데이터베이스 테이블에서 영화 목록을 검색하려고 합니다. 다음 단계를 수행합니다.

Movies.aspx라는 페이지 만들기
도구 상자의 AJAX 확장 탭 아래에서 ScriptManager를 페이지로 끌어서 ScriptManager 컨트롤을 페이지에 추가합니다.
ComboBox를 페이지로 끌어 페이지에 ComboBox 컨트롤을 추가합니다.
디자인 보기에서 ComboBox 컨트롤을 마우스로 가리키고 데이터 원본 선택 작업 옵션을 선택합니다(그림 5 참조). 데이터 원본 구성 마법사가 시작됩니다.
데이터 원본 선택 단계에서 새 데이터 원본> 옵션을 선택합니다<.
데이터 원본 유형 선택 단계에서 데이터베이스를 선택합니다.
데이터 연결 선택 단계에서 데이터베이스(예: MoviesDB.mdf)를 선택합니다.
애플리케이션 구성 파일에 연결 문자열 저장 단계에서 연결 문자열을 저장하는 옵션을 선택합니다.
문 선택 구성 단계에서 Movies 데이터베이스 테이블을 선택하고 모든 열을 선택합니다.
쿼리 테스트 단계에서 마침 단추를 클릭합니다.
데이터 원본 선택 단계로 돌아가서 표시할 필드의 제목 열과 데이터 필드의 ID 열을 선택합니다(그림 참조).
확인 단추를 클릭하여 마법사를 닫습니다.

그림 05: 데이터 원본 선택(전체 크기 이미지를 보려면 클릭)

그림 06: 데이터 텍스트 및 값 필드 선택(전체 크기 이미지를 보려면 클릭)

위의 단계를 완료하면 ComboBox는 Movies 데이터베이스 테이블의 영화를 나타내는 SqlDataSource 컨트롤에 바인딩됩니다. 페이지의 원본은 목록 2와 같습니다(서식을 조금 정리함).

목록 2 - Movies.aspx

<%@ Page Language="C#" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!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 id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <br />
        
        Select your favorite movie:
        <br />
        <cc1:ComboBox 
            ID="ComboBox1"
            DataSourceID="SqlDataSource1" 
            DataTextField="Title" 
            DataValueField="Id" 
            MaxLength="0" 
            runat="server" >
        </cc1:ComboBox>
     
        <asp:SqlDataSource 
            ID="SqlDataSource1"  
            ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
            SelectCommand="SELECT * FROM [Movies]"
            runat="server">
        </asp:SqlDataSource>
     
    </div>
    </form>
</body>
</html>

ComboBox 컨트롤에는 SqlDataSource 컨트롤을 가리키는 DataSourceID 속성이 있습니다. 브라우저에서 페이지를 열면 데이터베이스의 영화 목록이 표시됩니다(그림 7 참조). 목록에서 동영상을 선택하거나 ComboBox에 동영상을 입력하여 새 동영상을 입력할 수 있습니다.

그림 07: 영화 목록 표시(전체 크기 이미지를 보려면 클릭)

DropDownStyle 설정

ComboBox DropDownStyle 속성을 사용하여 ComboBox의 동작을 변경할 수 있습니다. 이 속성은 가능한 값을 허용합니다.

DropDown - (기본값) 화살표를 클릭하면 ComboBox에 드롭다운 목록이 표시되고 사용자 지정 값을 입력할 수 있습니다.
단순 - ComboBox는 드롭다운 목록을 자동으로 표시하며 사용자 지정 값을 입력할 수 있습니다.
DropDownList - ComboBox는 DropDownList 컨트롤처럼 작동합니다.

DropDown과 Simple의 차이점은 항목 목록이 표시되는 경우입니다. Simple의 경우 포커스를 ComboBox로 이동할 때 목록이 즉시 표시됩니다. DropDown의 경우 화살표를 클릭하여 항목 목록을 확인해야 합니다.

DropDownList 값을 사용하면 ComboBox 컨트롤이 표준 DropDownList 컨트롤처럼 작동합니다. 그러나 여기서는 중요한 차이점이 있습니다. 이전 버전의 인터넷 Explorer 앞에 배치된 컨트롤 앞에 컨트롤이 표시되도록 무한 z-인덱스가 있는 DropDownList 컨트롤을 표시합니다. ComboBox는 HTML <선택> 태그 대신 HTML <div> 태그를 렌더링하므로 ComboBox는 z 순서 지정을 올바르게 준수합니다.

AutoCompleteMode 설정

ComboBox AutoCompleteMode 속성을 사용하여 다른 사용자가 ComboBox에 텍스트를 입력할 때 발생하는 작업을 지정합니다. 이 속성은 다음과 같은 가능한 값을 허용합니다.

없음 - (기본값) ComboBox는 자동 완성 동작을 제공하지 않습니다.
제안 - ComboBox는 목록을 표시하고 목록에서 일치하는 항목을 강조 표시합니다(그림 8 참조).
추가 - ComboBox는 목록을 표시하지 않으며 목록에서 일치하는 항목을 입력한 항목에 추가합니다(그림 9 참조).
SuggestAppend - ComboBox는 모두 목록을 표시하고 목록에서 일치하는 항목을 입력한 항목에 추가합니다(그림 10 참조).

그림 08: ComboBox에서 제안합니다(전체 크기 이미지를 보려면 클릭).

그림 09: 일치하는 텍스트가 추가된 ComboBox(전체 크기 이미지를 보려면 클릭)

그림 10: ComboBox에서 제안 및 추가(전체 크기 이미지를 보려면 클릭)

요약

이 자습서에서는 ComboBox 컨트롤을 사용하여 고정된 항목 집합을 표시하는 방법을 알아보았습니다. ComboBox 컨트롤을 정적 항목 집합과 데이터베이스 테이블에 바인딩했습니다. 마지막으로 DropDownStyle 및 AutoCompleteMode 속성을 설정하여 ComboBox의 동작을 수정하는 방법을 알아보았습니다.

다음을 통해 공유

ComboBox 컨트롤을 사용할 어떻게 할까요? 있나요? (C#)

정적 항목 목록에서 선택

데이터베이스에서 항목 목록 선택

DropDownStyle 설정

AutoCompleteMode 설정

요약

피드백

피드백

추가 리소스