다음을 통해 공유

연습: ASP.NET 사용자 정의 컨트롤을 사용하여 재사용 가능한 요소 만들기

  • 아티클

업데이트: 2007년 11월

ASP.NET 사용자 정의 컨트롤을 사용하면 여러 서버 컨트롤의 기능을 하나의 단위로 캡슐화할 수 있습니다. 사용자 정의 컨트롤은 Button 컨트롤, TextBox 컨트롤 등 하나 이상의 ASP.NET 서버 컨트롤과 이러한 컨트롤에서 원하는 기능을 수행하는 데 필요한 코드로 구성됩니다. 또한 사용자 정의 컨트롤에는 일반적으로 ASP.NET 페이지인 컨테이너에 사용자 정의 컨트롤의 기능을 노출하는 사용자 지정 속성이나 메서드가 포함될 수 있습니다.

이 연습에서는 선택 컨트롤로 사용되는 ASP.NET 사용자 정의 컨트롤을 만듭니다. 선택 컨트롤에는 두 개의 목록이 있으며 그 중 하나의 목록(소스)에 선택 항목 집합이 있습니다. 사용자는 SourceList 목록에서 항목을 선택하여 TargetList 목록에 추가할 수 있습니다.

이 연습은 다음 세 부분으로 구성됩니다.

  • 첫 번째 부분에서는 기본 사용자 정의 컨트롤을 만들고 컨트롤과 코드를 추가합니다.

  • 두 번째 부분에서는 새 ASP.NET 페이지(호스트 페이지)를 만든 다음 이 ASP.NET 페이지에 사용자 정의 컨트롤을 추가합니다.

  • 세 번째 부분에서는 호스트 페이지의 컨트롤과 상호 작용할 수 있도록 사용자 정의 컨트롤에 사용자 지정 속성과 메서드를 추가합니다.

이 연습에서 수행할 작업은 다음과 같습니다.

  • 사용자 정의 컨트롤을 만들고 이 사용자 정의 컨트롤에 ASP.NET 서버 컨트롤 추가

  • 사용자 정의 컨트롤에서 속성 및 메서드 만들기

  • 호스트 페이지에 사용자 정의 컨트롤 추가

  • 사용자 정의 컨트롤을 처리하는 코드를 호스트 페이지에 추가

사전 요구 사항

이 연습을 완료하려면 다음과 같은 요건을 갖추어야 합니다.

  • Microsoft Visual Web Developer 웹 개발 도구

  • Microsoft .NET Framework

이 연습에서는 Visual Web Developer 작업의 일반적인 개념에 대해 잘 알고 있다고 가정합니다. 기본 사항은 연습: Visual Web Developer에서 기본 웹 페이지 만들기를 참조하십시오.

웹 사이트 만들기

예를 들어, 연습: Visual Web Developer에서 기본 웹 페이지 만들기를 완료하여 Visual Web Developer에서 웹 사이트를 이미 만들었으면 이 웹 사이트를 사용하여 다음 단원으로 이동합니다. 그렇지 않으면, 다음 단계를 따라 새 웹 사이트와 페이지를 만듭니다.

파일 시스템 웹 사이트를 만들려면

  1. Visual Web Developer를 엽니다.

  2. 파일 메뉴에서 새로 만들기를 가리킨 다음 웹 사이트를 클릭합니다.

    새 웹 사이트 대화 상자가 나타납니다.

  3. Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 클릭합니다.

  4. 맨 오른쪽 위치 상자에 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.

    예를 들어, 폴더 이름 C:\WebSites를 입력합니다.

  5. 언어 목록에서 작업할 프로그래밍 언어를 클릭합니다.

  6. 확인을 클릭합니다.

    Visual Web Developer에서 해당 폴더와 Default.aspx라는 새 페이지를 만듭니다.

사용자 정의 컨트롤 만들기

사용자 정의 컨트롤을 만드는 것은 ASP.NET 웹 페이지를 만드는 것과 비슷합니다. 실제로 사용자 정의 컨트롤은 ASP.NET 페이지의 하위 집합이며 ASP.NET 페이지에 넣는 요소 형식을 대부분 포함할 수 있습니다.

사용자 정의 컨트롤을 만들려면

  1. 솔루션 탐색기에서 웹 사이트의 이름을 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.

  2. 새 항목 추가 <Path> 대화 상자의 Visual Studio에 설치되어 있는 템플릿에서 웹 사용자 정의 컨트롤을 클릭합니다.

  3. 이름 상자에 ListPicker를 입력합니다.

    사용자 정의 컨트롤 파일은 ListPicker에 자동으로 추가되는 .ascx라는 확장명을 가집니다.

  4. 언어 목록에서 작업할 프로그래밍 언어를 선택합니다.

  5. 추가를 클릭합니다.

    새 컨트롤이 만들어진 다음 디자이너에서 열립니다. 컨트롤의 태크는 페이지의 맨 위에 @ Page 지시문이 없다는 것만 제외하고 페이지의 태그와 비슷합니다. 대신, 파일을 ASP.NET에 사용자 정의 컨트롤로 식별하는 @ Control 지시문이 있습니다.

사용자 정의 컨트롤에 서버 컨트롤 추가

이 연습 부분에서는 사용자 정의 컨트롤의 사용자 인터페이스를 구성하는 컨트롤을 추가합니다.

서버 컨트롤을 추가하려면

  1. 디자인 뷰로 전환합니다. 코드 숨김 페이지로 작업할 경우에는 ListPicker.ascx 컨트롤로 전환한 다음 디자인 뷰로 전환합니다.

  2. 표 메뉴에서 표 삽입을 클릭합니다.

  3. 표 삽입 대화 상자를 사용하여 세 개 행과 한 개 열이 있는 표를 만든 다음 확인을 클릭합니다.

    컨트롤을 보관할 표, 즉 레이아웃 표를 만드는 것입니다.

  4. 이 표의 왼쪽 열에 사용 가능을 입력한 다음 Enter 키를 눌러 새 줄을 만듭니다.

  5. 오른쪽 열에 선택됨을 입력한 다음 Enter 키를 눌러 새 줄을 만듭니다.

  6. 도구 상자의 표준 그룹에서 다음 컨트롤을 표로 끌어와 다음과 같이 속성을 설정합니다.

    컨트롤

    속성

    ListBox를 왼쪽 열로 끌어와 사용 가능 아래에 놓습니다.

    Height: 200px

    ID: SourceList

    Width: 200px

    Button을 가운데 열로 끌어 옵니다.

    ID: AddAll

    Text: >>

    Button을 가운데 열로 끌어 옵니다.

    ID: AddOne

    Text: (스페이스바)>(스페이스바)

    Button을 가운데 열로 끌어 옵니다.

    ID: Remove

    Text: (스페이스바)X(스페이스바)

    ListBox를 오른쪽 열로 끌어와 선택됨 아래에 놓습니다.

    Height: 200px

    ID: TargetList

    Width: 200px

    Button 컨트롤 대신 ImageButton 컨트롤을 사용하면 마우스 클릭에 응답하는 이미지가 표시되도록 할 수 있습니다. 그러나 이 연습에서는 각각 두 개의 오른쪽 꺾쇠괄호(>>), 한 개의 오른쪽 꺾쇠괄호(>) 및 X인 모두 추가, 추가 및 제거를 나타내는 데 자주 사용되는 그래픽 유형을 에뮬레이트하는 텍스트를 사용하는 것만으로 충분합니다.

  7. 원하는 경우 표 열의 너비와 높이를 적절하게 조정합니다.

  8. SourceList 목록을 클릭한 다음 속성에서 Items 속성에 대해 줄임표(…) 단추를 클릭합니다.

    ListItem 컬렉션 편집기 대화 상자가 나타납니다.

  9. 추가를 세 번 클릭하여 세 가지 항목을 추가합니다.

  10. 첫 번째, 두 번째 및 세 번째 항목에 대해 ListItem 속성에서 Text를 각각 A, B 및 C로 설정합니다.

    지금은 테스트 데이터를 만듭니다. 이 연습의 뒷부분에 있는 "사용자 정의 컨트롤에 사용자 지정 속성 및 메서드 추가"에서는 테스트 데이터를 제거하고 SourceList 목록을 동적으로 로드하는 코드를 추가합니다.

사용자 선택을 처리하는 코드 추가

사용자는 표의 가운데 열에 있는 단추를 사용하여 항목을 선택합니다. 따라서 컨트롤에 대한 코드는 대부분 Click 이벤트의 처리기에 있습니다.

사용자 선택을 처리하는 코드를 추가하려면

  1. 디자인 뷰에서 >>(AddAll) 단추를 두 번 클릭하여 Click 이벤트에 대한 이벤트 처리기를 만들고 강조 표시된 다음 코드를 추가합니다.

    Protected Sub AddAll_Click(ByVal sender As Object, _
        ByVal e As EventArgs) Handles AddAll.Click
   TargetList.SelectedIndex = -1   Dim li As ListItem   For Each li In SourceList.Items      AddItem(li)   Next
End Sub

    protected void AddAll_Click(object sender, EventArgs e)
{
    TargetList.SelectedIndex = -1;    foreach(ListItem li in SourceList.Items)    {        AddItem(li);    }
}

    이 코드는 SourceList 목록의 모든 목록 항목을 순환하며 수행합니다. 각 항목에 대해 이 코드는 AddItem 메서드를 호출하고 이 메서드에 현재 항목을 전달합니다. 이 절차의 뒷부분에서 AddItem 메서드에 대한 코드를 작성합니다.

  2. 디자인 뷰로 전환한 다음 >(AddOne) 단추를 두 번 클릭하여 Click 이벤트의 이벤트 처리기를 만들고 강조 표시된 다음 코드를 추가합니다.

    Protected Sub AddOne_Click(ByVal sender As Object, _
       ByVal e As EventArgs) Handles AddOne.Click
   If SourceList.SelectedIndex >= 0 Then      AddItem(SourceList.SelectedItem)   End If
End Sub

    protected void AddOne_Click(object sender, EventArgs e)
{
    if(SourceList.SelectedIndex >= 0)    {        AddItem(SourceList.SelectedItem);    }
}

    이 코드는 먼저 SourceList 목록에 선택 항목이 있는지 확인합니다. 선택 항목이 있으면 이 코드는 이 절차의 뒷부분에서 작성할 AddItem 메서드를 호출하고 현재 SourceList 목록에서 선택되어 있는 항목을 이 메서드에 전달합니다.

  3. 디자인 뷰로 전환한 다음 X(Remove) 단추를 두 번 클릭하여 Click 이벤트의 이벤트 처리기를 만들고 강조 표시된 다음 코드를 추가합니다.

    Protected Sub Remove_Click(ByVal sender As Object, _
      ByVal e As EventArgs) Handles Remove.Click
   If TargetList.SelectedIndex >= 0 Then     TargetList.Items.RemoveAt(TargetList.SelectedIndex)     TargetList.SelectedIndex = -1   End If
End Sub

    protected void Remove_Click(object sender, EventArgs e)
{
    if (TargetList.SelectedIndex >= 0)    {        TargetList.Items.RemoveAt(TargetList.SelectedIndex);        TargetList.SelectedIndex = -1;      }
}

    이 코드는 먼저 TargetList 목록에 선택 항목이 있는지 확인합니다. 선택 항목이 있으면 이 코드는 목록과 선택 항목에서 선택된 항목을 제거합니다.

  4. 다음 AddItem 메서드를 추가합니다.

    Protected Sub AddItem(ByVal li As ListItem)
   TargetList.SelectedIndex = -1
   TargetList.Items.Add(li)
End Sub

    protected void AddItem(ListItem li)
{
    TargetList.SelectedIndex = -1;
    TargetList.Items.Add(li);
}

    이 코드는 TargetList 목록에 항목을 무조건 추가합니다. 이 연습의 뒷부분에 있는 "사용자 정의 컨트롤에 사용자 지정 속성 및 메서드 추가"에서는 중복 값이 있는지 여부를 확인하는 옵션을 추가하여 이 코드를 개선합니다.

사용자 정의 컨트롤은 페이지에 호스팅해야 하므로 직접 테스트할 수 없습니다. 다음 단원에서는 이 컨트롤을 사용할 수 있는 ASP.NET 웹 페이지를 만듭니다.

사용자 정의 컨트롤 사용

다른 컨트롤과 마찬가지로 사용자 정의 컨트롤도 페이지에 호스팅해야 합니다. 이 연습 부분에서는 컨트롤에 대한 호스트 페이지를 만든 다음 이 페이지에 사용자 정의 컨트롤을 추가합니다.

호스트 페이지를 만들려면

  1. 솔루션 탐색기에서 웹 사이트의 이름을 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.

  2. Visual Studio에 설치되어 있는 템플릿에서 Web Form을 클릭합니다.

  3. 이름 상자에 HostUserControl을 입력합니다.

  4. 언어 목록에서 작업할 프로그래밍 언어를 선택한 다음 추가를 클릭합니다.

    새 페이지가 디자이너에서 나타납니다.

페이지에 사용자 정의 컨트롤을 추가하려면

  1. 디자인 뷰로 전환합니다.

  2. 솔루션 탐색기에서 사용자 정의 컨트롤 파일(ListPicker.ascx)을 페이지로 끌어 옵니다.

    참고:

    ListPicker.ascx를 페이지로 끌어 오려면 디자인 뷰에 있어야 합니다.

    컨트롤이 디자이너에서 나타납니다.

  3. 소스 뷰로 전환합니다.

    사용자 정의 컨트롤을 페이지에 놓으면 페이지에 두 개의 새 요소가 만들어집니다.

    • 페이지의 맨 위에는 다음과 같은 새 @ Register 지시문이 있습니다.

      <%@ Register Src="ListPicker.ascx" TagName="ListPicker"
   TagPrefix="uc1" %>

      @ Register 지시문이 필요한 이유는 사용자 정의 컨트롤이 외부 구성 요소이기 때문입니다. 지시문에 있는 값은 페이지를 컴파일하고 실행할 때 ASP.NET에서 컨트롤을 찾는 데 필요한 정보를 제공합니다. TagPrefix 및 TagName 특성은 페이지에서 사용자 정의 컨트롤이 선언되는 방법을 지정합니다. Src 특성은 파일을 지정하고 필요한 경우 소스 파일이 있는 경로도 지정합니다.

    • 두 번째 새 요소는 사용자 정의 컨트롤의 요소이며 다음과 같이 표시됩니다.

      <uc1:ListPicker id="ListPicker1" Runat="server" />

      사용자 정의 컨트롤의 요소는 일반 ASP.NET 서버 컨트롤의 요소와 비슷합니다. 사용자 정의 컨트롤은 서로 다른 태그 접두사(uc1)와 고유한 태그 이름(ListPicker)을 가진다는 차이점이 있습니다. 이러한 값은 사용자 정의 컨트롤을 페이지에 배치할 때 @ Register지시문에 의해 자동으로 설정되지만, 페이지에서 아직 사용되지 않은 임의의 태그 접두사와 태그 이름을 사용자 정의 컨트롤에 사용할 수도 있습니다.

사용자 정의 컨트롤 테스트

이제 사용자 정의 컨트롤의 예비 버전을 테스트할 수 있습니다.

사용자 정의 컨트롤을 테스트하려면

  1. Ctrl+F5를 눌러 페이지를 실행합니다.

    페이지가 브라우저에 나타나고 사용자 정의 컨트롤을 구성하는 두 개의 목록과 세 개의 단추가 표시됩니다.

  2. >>(AddAll) 단추를 클릭합니다.

    SourceList 목록의 모든 값이 TargetList 목록에 복사됩니다.

  3. TargetList 목록에서 각 항목을 차례로 클릭한 다음 모든 항목이 제거될 때까지 X(Remove) 단추를 클릭합니다.

  4. SourceList 목록에서 값을 한 개 선택한 다음 >(AddOne) 단추를 클릭합니다.

    단일 값이 TargetList 목록에 복사됩니다.

  5. 필요에 따라 컨트롤을 추가로 테스트하여 컨트롤이 의도한 대로 작동하는지 확인합니다.

  6. 완료하면 브라우저를 닫습니다.

사용자 정의 컨트롤에 사용자 지정 속성 및 메서드 추가

이제 사용자 정의 컨트롤이 작동하지만 일반적인 목적의 컨트롤로 사용하기에는 아직 부족합니다. 보다 실용적인 버전의 사용자 정의 컨트롤로는 다음을 수행할 수 있습니다.

  • SourceList 목록에서 표시할 항목 목록을 동적으로 지정합니다.

  • TargetList 목록에서 사용자가 선택한 항목 목록을 가져옵니다.

  • 필요에 따라 TargetList 목록에서 중복 값을 허용할 것인지 여부를 지정합니다.

  • 사용자가 TargetList 목록의 모든 항목을 신속하게 지울 수 있는 방법을 제공합니다.

이러한 작업을 수행하려면 호스트 페이지에서 사용자 정의 컨트롤과 통신하여 값 공유(설정 및 읽기 속성)와 명령 실행(호출 메서드)을 모두 수행할 수 있어야 합니다. 이 연습 부분에서는 사용자 정의 컨트롤을 변경하고 여기에 몇 가지 멤버(속성 및 메서드)를 추가합니다.

사용자 정의 컨트롤에 두 가지 속성을 추가합니다. 첫 번째 속성은 TargetList 목록에 있는 항목 목록을 검색합니다. 두 번째 속성을 사용하면 TargetList 목록에서 중복 값을 허용하는지 여부를 지정할 수 있습니다. 이 단원의 뒷부분에서는 SourceList 목록을 채울 수 있는 메서드를 추가합니다.

사용자 지정 속성을 정의하는 코드를 추가하려면

  1. ListPicker 컨트롤의 경우 코드 파일을 열거나 이 파일로 전환합니다.

  2. 다음 코드를 사용하여 SelectedItems 속성을 만듭니다.

    Public ReadOnly Property SelectedItems() As ListItemCollection
   Get
      Return TargetList.Items
   End Get
End Property

    public ListItemCollection SelectedItems
{
   get { return TargetList.Items ; }
}

    SelectedItems 속성은 TargetList 목록에 있는 값을 검색합니다. TargetList 목록의 값은 프로그래밍 방식으로 설정할 필요가 없기 때문에 이 속성은 읽기 전용이어도 됩니다.

  3. 다음 코드를 사용하여 AllowDuplicates 속성을 만듭니다.

    Public Property AllowDuplicates() As Boolean
   Get
      Return CType(ViewState("allowDuplicates"), Boolean)
   End Get
   Set(ByVal value As Boolean)
      ViewState("allowDuplicates") = value
   End Set
End Property

    public Boolean AllowDuplicates
{
    get
    {
        return (Boolean)ViewState["allowDuplicates"];
    }
    set
    {
        ViewState["allowDuplicates"] = value;
    }
}

    AllowDuplicates 속성은 읽기/쓰기 속성입니다. AllowDuplicates 속성의 값은 라운드트립 간에 유지되도록 뷰 상태에 명시적으로 저장해야 합니다. SelectedItems 속성의 경우 TargetList 목록에서 뷰 상태에 값을 저장하기 때문에 이 속성 값을 뷰 상태에 명시적으로 저장할 필요가 없습니다.

이제 속성이 정의되었습니다. 그러나 AllowDuplicates 속성 설정을 활용하려면 사용자 정의 컨트롤에서 기존 코드를 수정해야 합니다.

AllowDuplicates 속성을 사용하기 위해 기존 코드를 수정하려면

  • 이 연습 앞부분의 "사용자 선택을 처리하는 코드 추가"에서 작성한 AddItem 메서드를 찾고 그 내용을 강조 표시된 다음 코드로 바꿉니다.

    Protected Sub AddItem(ByVal li As ListItem)
   TargetList.Selectedindex = -1   If Me.AllowDuplicates = True Then      TargetList.Items.Add(li)   Else      If TargetList.Items.FindByText(li.Text) Is Nothing Then         TargetList.Items.Add(li)      End If   End If
End Sub

    protected void AddItem(ListItem li)
{
    TargetList.SelectedIndex = -1;    if (this.AllowDuplicates == true)    {        TargetList.Items.Add(li);    }    else    {        if (TargetList.Items.FindByText(li.Text) == null)        {            TargetList.Items.Add(li);        }    }
}

    이 코드는 앞에서 TargetList 목록에 항목을 추가하는 코드와 같은 기능을 수행하지만 이제 이 코드는 AllowDuplicate 속성이 true로 설정되어 있는지 여부를 확인합니다. AllowDuplicate 속성이 true로 설정되어 있으면 이 코드에서는 먼저 제안된 새 항목과 같은 값을 가진 기존 항목을 찾은 다음 기존 항목이 없을 경우에만 새 항목을 추가합니다.

SourceList 목록의 내용을 속성을 사용하여 설정하기 때문에 이 연습 앞부분의 "사용자 정의 컨트롤에 서버 컨트롤 추가"에서 입력한 테스트 데이터를 제거할 수 있습니다.

SourceList 목록의 테스트 데이터를 제거하려면

  1. 디자인 뷰로 전환합니다.

  2. SourceList 컨트롤을 클릭한 다음 속성에서 Items에 대해 줄임표(…) 단추를 클릭합니다.

    ListItem 컬렉션 편집기가 나타납니다.

  3. 제거 단추를 클릭하여 각 샘플 항목을 제거한 다음 확인을 클릭합니다.

사용자 정의 컨트롤에 메서드 추가

호스트 페이지의 코드에서 호출될 때 사용자 정의 컨트롤의 작업을 수행하는 메서드를 추가할 수도 있습니다. 이러한 내용을 설명하기 위해 이 연습에서는 두 개의 메서드를 추가합니다. 첫 번째 메서드는 SourceList 목록에 항목을 추가하기 위해 호출할 수 있습니다. 두 번째 메서드는 TargetList 목록의 내용을 지웁니다.

TargetList 목록을 지우는 메서드를 추가하려면

  1. 다음 코드를 사용하여 AddSourceItem 메서드를 추가합니다.

    Public Sub AddSourceItem(ByVal sourceItem As String)
    SourceList.Items.Add(sourceItem)
End Sub

    public void AddSourceItem(String sourceItem)
{
    SourceList.Items.Add(sourceItem);
}

  2. 다음 코드를 사용하여 ClearAll 메서드를 추가합니다.

    Public Sub ClearAll()
    SourceList.Items.Clear()
    TargetList.Items.Clear()
End Sub

    public void ClearAll()
{
    SourceList.Items.Clear();
    TargetList.Items.Clear();
}

  3. 파일 메뉴에서 모두 저장을 클릭하여 사용자 정의 컨트롤에 수행한 변경 내용을 저장합니다.

사용자 정의 컨트롤 속성 및 메서드 테스트

이 연습의 마지막 작업에서는 사용자 정의 컨트롤과 값을 공유할 수 있도록 호스트 페이지를 개선합니다. 사용자 정의 컨트롤의 일부 속성을 선언적으로 설정할 수 있습니다. SourceList 목록을 이 연습의 코드를 사용하여 직접 설정할 수 없지만 프로그래밍 방식으로 설정할 수는 있습니다. 이 절차에서는 AllowDuplicates 속성을 기본값인 true로 설정합니다.

사용자 정의 컨트롤 속성을 선언적으로 설정하려면

  1. HostUserControl.aspx 페이지로 전환하거나 이 페이지를 엽니다.

  2. 소스 뷰에서 다음과 같은 구문을 사용하여 AllowDuplicates를 선언적으로 설정합니다.

    <uc1:ListPicker id="ListPicker1" Runat="server"
    AllowDuplicates="true" />

    AllowDuplicates에 대한 Microsoft IntelliSense 기능을 가져옵니다.

프로그래밍 방식으로 사용자 정의 컨트롤 작업

사용자 정의 컨트롤에서 프로그래밍 방식으로 속성을 설정 및 검색하고 메서드를 호출할 수도 있습니다. 사용자 정의 컨트롤에서 프로그래밍 방식으로 작업하는 방법을 설명하기 위해 호스트 페이지에 몇 가지 컨트롤을 추가합니다.

사용자 정의 컨트롤에서 프로그래밍 방식으로 작업하려면

  1. 디자인 뷰로 전환합니다.

  2. 도구 상자의 표준 그룹에서 다음 컨트롤을 호스트 페이지의 표로 끌어 오고 다음과 같이 속성을 설정합니다.

    컨트롤

    속성

    TextBox

    ID: NewItem

    Text: (비어 있음)

    Button

    ID: AddItem

    Text: 항목 추가

    Button

    ID: LoadFiles

    Text: 파일 목록

    Button

    ID: ClearSelection

    Text: 모두 지우기

    CheckBox

    AutoPostBack: True

    Checked: True

    ID: AllowDuplicates

    Text: 중복 허용

    Button

    ID: ShowSelection

    Text: 선택 항목 표시

    Label

    ID: Selection

    Text: (비어 있음)

  3. 디자인 뷰에서 AllowDuplicates를 두 번 클릭하여 CheckedChanged 이벤트의 이벤트 처리기를 만들고 강조 표시된 다음 코드를 추가합니다.

    Protected Sub AllowDuplicates_CheckedChanged( _
ByVal sender As Object, _
ByVal e As EventArgs) Handles AllowDuplicates.CheckedChanged
    ListPicker1.AllowDuplicates = AllowDuplicates.Checked
End Sub

    protected void AllowDuplicates_CheckedChanged(Object sender, EventArgs e)
{
    ListPicker1.AllowDuplicates = AllowDuplicates.Checked;
}

  4. 디자인 뷰로 전환한 다음 AddItem을 두 번 클릭하여 Click 이벤트의 이벤트 처리기를 만들고 강조 표시된 다음 코드를 추가합니다.

    Protected Sub AddItem_Click(ByVal sender As Object, _
ByVal e As EventArgs) Handles AddItem.Click
    Dim sourceItem As String = Server.HtmlEncode(NewItem.Text)    ListPicker1.AddSourceItem(sourceItem)
End Sub

    protected void AddItem_Click(object sender, EventArgs e)
{
    ListPicker1.AddSourceItem(Server.HtmlEncode(NewItem.Text));
}

    이 코드는 코드에 ListItemCollection 컬렉션을 만들고 샘플 데이터로 이 컬렉션을 채웁니다. 그런 다음 컬렉션에 SourceItems 속성을 설정합니다.

  5. 디자인 뷰로 전환한 다음 LoadFiles를 두 번 클릭하여 Click 이벤트의 이벤트 처리기를 만들고 강조 표시된 다음 코드를 추가합니다.

    Protected Sub LoadFiles_Click(ByVal sender As Object, _
ByVal e As EventArgs) Handles LoadFiles.Click
   Dim path As String = Server.MapPath(Request.ApplicationPath)   Dim files() As String = System.IO.Directory.GetFiles(path)   Dim filename As String   For Each filename in Files      ListPicker1.AddSourceItem(filename)   Next
End Sub

    protected void LoadFiles_Click(object sender, EventArgs e)
{
   String path = Server.MapPath(Request.ApplicationPath);   String[] files = System.IO.Directory.GetFiles(path);   foreach(String filename in files)   {      ListPicker1.AddSourceItem(filename);   }
}

    이 코드는 웹 사이트 루트 디렉터리에 파일 목록을 추가하는 점을 제외하고는 AddItem에 대한 코드와 유사합니다.

  6. 디자인 뷰로 전환한 다음 ShowSelection을 두 번 클릭하여 Click 이벤트의 이벤트 처리기를 만들고 강조 표시된 다음 코드를 추가합니다.

    Protected Sub ShowSelection_Click(ByVal sender As Object, _
      ByVal e As EventArgs) Handles ShowSelection.Click
   Dim lItem As ListItem   Dim selectedItemsString As String = ""   For Each lItem in ListPicker1.SelectedItems      selectedItemsString &= "<br>" & lItem.Text   Next   Selection.Text = selectedItemsString
End Sub

    protected void ShowSelection_Click(object sender, EventArgs e)
{
   String selectedItemsString = "";   foreach(ListItem lItem in ListPicker1.SelectedItems)   {      selectedItemsString += "<br>" + lItem.Text;   }   Selection.Text = selectedItemsString;
}

    이 코드는 ListItemCollection 개체로 입력된 개체를 검색하고 컬렉션에서 각 항목을 읽은 다음 결과를 Selection에 표시합니다.

  7. 디자인 뷰로 전환한 다음 ClearSelection을 두 번 클릭하여 Click 이벤트의 이벤트 처리기를 만들고 강조 표시된 다음 코드를 추가합니다.

    Protected Sub ClearSelection_Click(ByVal sender As Object, _
ByVal e As EventArgs) Handles ClearSelection.Click
   ListPicker1.ClearAll()
End Sub

    protected void ClearSelection_Click(object sender, EventArgs e)
{
   ListPicker1.ClearAll();
}

    이 코드는 사용자 정의 컨트롤의 ClearAll 메서드를 호출하여 TargetList에서 모든 항목을 제거합니다.

완료된 사용자 정의 컨트롤 테스트

이제 완료된 사용자 정의 컨트롤을 테스트할 수 있습니다.

사용자 정의 컨트롤을 테스트하려면

  1. Ctrl+F5를 눌러 페이지를 실행합니다.

  2. 텍스트 상자에 값을 입력하고 항목 추가를 클릭합니다.

  3. 사용자 정의 컨트롤에 여러 항목이 생길 때까지 3단계를 여러 번 반복합니다.

  4. 단추를 사용하여 SourceList 목록에서 하나 이상의 소스 항목을 선택한 다음 TargetList 목록에 추가합니다.

  5. 선택 항목 표시를 클릭합니다.

    TargetList 목록 항목이 Selection에 표시됩니다.

  6. 모두 지우기를 클릭합니다.

  7. 파일 목록을 클릭합니다.

    이제 SourceList 목록에 파일 이름 목록이 표시됩니다.

  8. 사용자 정의 컨트롤에서 추가를 클릭하여 TargetList 목록에 여러 항목을 추가합니다.

  9. 목록에 이미 있는 항목을 TargetList 목록에 추가해 봅니다.

    중복 값이 추가됩니다.

  10. 중복 허용 상자의 선택을 취소한 다음 중복 값을 다시 추가해 봅니다.

    이번에는 중복 값이 TargetList 목록에 추가되지 않습니다.

  11. 선택 항목 표시를 클릭합니다.

    TargetList 목록의 항목 목록이 호스트 페이지에 표시됩니다.

다음 단계

만든 컨트롤이 그리 복잡한 편은 아니었지만 사용자 정의 컨트롤에 빌드할 수 있는 여러 기본 기능을 살펴 보았습니다. 컨트롤을 보다 구체화하는 일은 대부분 컨트롤로 수행할 수 있는 작업을 개선하는 추가 속성과 메서드를 노출하는 것과 관련됩니다. 추가 멤버는 다음과 같습니다.

  • 모양 속성

    컨트롤의 배경, 목록 크기 등을 설정할 수 있는 사용자 정의 컨트롤 속성을 만들 수 있습니다.

    참고:

    기본적으로 사용자 정의 컨트롤에서는 자식 컨트롤에 적용되는 현재 테마를 사용합니다. 예를 들어, Button 컨트롤에 대해 정의된 스킨이 있는 경우 사용자 정의 컨트롤의 단추가 해당 스킨과 함께 표시됩니다.

  • 데이터 속성

    사용자 정의 컨트롤이 보다 넓은 범위의 데이터를 사용하여 SourceList목록에 표시될 수 있는 속성을 추가할 수 있습니다. 예를 들어, 데이터 집합, 데이터 테이블 및 데이터 표시 필드를 설정하는 속성을 추가할 수 있습니다.

  • 기능

    사용자 정의 컨트롤에 더 많은 단추와 코드를 추가하여 SourceList 목록에서 TargetList 목록으로 항목을 복사할 뿐 아니라 항목을 이동할 수 있게 할 수 있습니다. 이 경우 항목은 TargetList 목록으로 이동되면 SourceList 목록에서 제거됩니다. 그러면 컨트롤에는 TargetList 목록에서 SourceList 목록으로 데이터를 다시 이동시키는 단추가 표시될 수 있습니다 .

참고 항목

작업

방법: Web Forms 페이지를 ASP.NET 사용자 정의 컨트롤로 변환

개념

ASP.NET 사용자 정의 컨트롤 개요

기타 리소스

웹 응용 프로그램 보안 위협 개요