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

아티클
10/22/2014

업데이트: 2007년 11월

기본 제공된 ASP.NET 웹 서버 컨트롤에서 제공하지 않는 기능이 컨트롤에 필요할 경우가 있습니다. 이런 경우 사용자가 직접 컨트롤을 만들 수 있습니다. 이 때 두 가지 옵션을 사용하여 다음과 같은 컨트롤을 만들 수 있습니다.

사용자 정의 컨트롤. 사용자 정의 컨트롤은 태그와 웹 서버 컨트롤을 넣을 수 있는 컨테이너입니다. 그런 다음 사용자 정의 컨트롤을 하나의 단위로 처리하여 속성과 메서드를 정의할 수 있습니다.
사용자 지정 컨트롤. 사용자 지정 컨트롤은 Control 또는 WebControl에서 파생되는 클래스이며 사용자가 작성합니다.

일반적으로 사용자 정의 컨트롤은 기존 컨트롤을 다시 사용할 수 있으므로 사용자 지정 컨트롤보다 만들기가 쉽습니다. 특히 복잡한 사용자 인터페이스 요소가 있는 컨트롤을 쉽게 만들 수 있습니다.

이 항목에서는 ASP.NET 사용자 정의 컨트롤로 작업하는 데 대해 간략하게 설명합니다.

사용자 정의 컨트롤 구조

ASP.NET 웹 사용자 정의 컨트롤은 사용자 인터페이스 페이지와 코드가 모두 포함된 완전한 ASP.NET 웹 페이지(.aspx 파일)와 비슷합니다. ASP.NET 페이지를 만드는 것과 거의 같은 방법으로 사용자 정의 컨트롤을 만든 다음 필요한 태그와 자식 컨트롤을 추가합니다. 사용자 정의 컨트롤에는 페이지에서 수행하는 것과 비슷한 방식으로 내용을 조작하는 코드가 포함될 수 있습니다. 예를 들면 데이터 바인딩 같은 작업을 수행하는 코드가 포함됩니다.

사용자 정의 컨트롤은 다음과 같은 점에서 ASP.NET 웹 페이지와 다릅니다.

사용자 정의 컨트롤의 파일 이름 확장명은 .ascx입니다.
사용자 정의 컨트롤에는 @ Page 지시문 대신 구성 및 다른 속성을 정의하는 @ Control 지시문이 포함됩니다.
사용자 정의 컨트롤은 독립 실행형 파일로 실행할 수 없습니다. 대신 다른 컨트롤과 마찬가지로 사용자 정의 컨트롤을 ASP.NET 페이지에 추가해야 합니다.
사용자 정의 컨트롤에는 html, body 또는 form 요소가 없습니다. 이러한 요소는 호스팅 페이지에 있어야 합니다.

ASP.NET 웹 페이지에서 사용하는 것과 같은 HTML 요소(html, body 또는 form 요소 제외)와 웹 컨트롤을 사용자 정의 컨트롤에도 사용할 수 있습니다. 예를 들어 도구 모음으로 사용할 사용자 정의 컨트롤을 만드는 경우 일련의 Button 웹 서버 컨트롤을 사용자 정의 컨트롤에 추가한 다음 단추에 대한 이벤트 처리기를 만들 수 있습니다.

다음 예제에서는 사용자가 위쪽/아래쪽 단추를 클릭하여 텍스트 상자의 여러 선택 항목을 번갈아 표시할 수 있는 회전자 컨트롤을 구현하는 사용자 정의 컨트롤을 보여 줍니다.

보안 정보:
이 예제에는 사용자 입력을 허용하는 텍스트 상자가 있으므로 보안상 위험할 수 있습니다. 기본적으로 ASP.NET 페이지에서는 사용자 입력 내용에 스크립트나 HTML 요소가 포함되어 있지 않은지 유효성을 검사합니다. 자세한 내용은 스크립트 악용 개요를 참조하십시오.

<%@ Control Language="VB" ClassName="UserControl1" %>
<script >
    Protected colors As String() = {"Red", "Green", "Blue", "Yellow"}
    Protected currentColorIndex As Integer = 0
    Protected Sub Page_Load(ByVal sender As Object, _
            ByVal e As System.EventArgs)
        If IsPostBack Then
            currentColorIndex = CInt(ViewState("currentColorIndex"))
        Else
            currentColorIndex = 0
            DisplayColor()
        End If
    End Sub
    
    Protected Sub DisplayColor()
        textColor.Text = colors(currentColorIndex)
        ViewState("currentColorIndex") = currentColorIndex.ToString()
    End Sub

    Protected Sub buttonUp_Click(ByVal sender As Object, _
            ByVal e As System.EventArgs)
        If currentColorIndex = 0 Then
            currentColorIndex = colors.Length - 1
        Else
            currentColorIndex -= 1
        End If
        DisplayColor()
    End Sub
    
    Protected Sub buttonDown_Click(ByVal sender As Object, _
            ByVal e As System.EventArgs)
        If currentColorIndex = colors.Length - 1 Then
            currentColorIndex = 0
        Else
            currentColorIndex += 1
        End If
        DisplayColor()
    End Sub
</script>
<asp:TextBox ID="textColor"  
    ReadOnly="True" />
<asp:Button Font-Bold="True" ID="buttonUp"   
    Text="^" OnClick="buttonUp_Click" />
<asp:Button Font-Bold="True" ID="buttonDown"  
    Text="v" OnClick="buttonDown_Click" />

<% @ Control Language="C#" ClassName="UserControl1" %>
<script >
    protected int currentColorIndex;
    protected String[] colors = {"Red", "Blue", "Green", "Yellow"};
    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            currentColorIndex = 
                Int16.Parse(ViewState["currentColorIndex"].ToString());
        }
        else
        {
            currentColorIndex = 0;
            DisplayColor();
        }
    }
    
    protected void DisplayColor()
    {
        textColor.Text = colors[currentColorIndex];
        ViewState["currentColorIndex"] = currentColorIndex.ToString();
    }
    
    protected void buttonUp_Click(object sender, EventArgs e)
    {
        if(currentColorIndex == 0)
        {
            currentColorIndex = colors.Length - 1;
        }
        else
        {
            currentColorIndex -= 1;
        }
        DisplayColor();
    }

    protected void buttonDown_Click(object sender, EventArgs e)
    {
        if(currentColorIndex == (colors.Length - 1))
        {
            currentColorIndex = 0;
        }    
        else
        {
            currentColorIndex += 1;
        }
        DisplayColor();
    }
</script>
<asp:TextBox ID="textColor"  
    ReadOnly="True" />
<asp:Button Font-Bold="True" ID="buttonUp"  
    Text="^" OnClick="buttonUp_Click" />
<asp:Button Font-Bold="True" ID="buttonDown"  
    Text="v" OnClick="buttonDown_Click" />

이 사용자 정의 컨트롤은 ASP.NET 페이지와 매우 비슷하며 여러 개의 컨트롤(TextBox 하나와 Button 컨트롤 두 개) 및 단추의 Click 이벤트와 페이지의 Load 이벤트를 처리하는 코드가 포함되어 있습니다. 그러나 사용자 정의 컨트롤에는 컨트롤의 태그를 제외한 다른 태그가 없으며 @ Page 지시문 대신 @ Control 지시문이 포함되어 있습니다.

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

호스트 페이지에서 사용자 정의 컨트롤을 등록하면 페이지에 이 컨트롤이 추가됩니다. 사용자 정의 컨트롤을 등록할 때는 이 컨트롤을 포함하는 .ascx 파일, 태그 접두사, 페이지에서 사용자 정의 컨트롤을 선언하는 데 사용할 태그 이름을 지정합니다. 자세한 내용은 방법: ASP.NET 웹 페이지에 사용자 정의 컨트롤 포함을 참조하십시오.

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

페이지에 대해 수행한 것과 같은 방법으로 사용자 정의 컨트롤의 속성과 메서드를 정의할 수 있습니다. 사용자 정의 컨트롤의 속성을 정의하면 선언적으로 또는 코드에서 속성을 설정할 수 있습니다.

사용자 정의 컨트롤의 이벤트

사용자 정의 컨트롤에 웹 서버 컨트롤이 포함되어 있는 경우, 자식 컨트롤에서 발생된 이벤트를 처리하는 코드를 사용자 정의 컨트롤에 작성할 수 있습니다. 예를 들어 사용자 정의 컨트롤에 Button 컨트롤이 포함된 경우에는 이 사용자 정의 컨트롤에서 단추의 Click 이벤트에 대한 처리기를 만들 수 있습니다.

기본적으로 사용자 정의 컨트롤의 자식 컨트롤에서 발생된 이벤트는 호스트 페이지에서 사용할 수 없습니다. 그러나 사용자 정의 컨트롤에 대한 이벤트를 정의하고 호스트 페이지에서 이벤트에 대한 알림을 받을 수 있도록 이러한 이벤트를 발생시킬 수 있습니다. 클래스에 대한 이벤트를 정의할 때와 같은 방법을 사용하면 됩니다. 자세한 내용은 이벤트 발생시키기를 참조하십시오.

외부 리소스 참조

사용자 정의 컨트롤이 실행되는 경우 사용자 정의 컨트롤의 URL을 기준 URL로 사용하여 외부 리소스에 대한 참조(예: 다른 페이지에 대한 앵커 또는 이미지)가 확인됩니다. 예를 들어 ImageUrl 속성이 Images/Button1.gif로 설정된 Image 컨트롤이 사용자 정의 컨트롤에 포함되어 있는 경우, 이미지의 전체 경로를 확인할 수 있도록 이미지 URL이 사용자 정의 컨트롤 URL에 추가됩니다. 사용자 정의 컨트롤이 자신의 하위 폴더에 없는 리소스를 참조할 경우에는 런타임에 정확한 폴더로 확인되는 경로를 제공해야 합니다. ASP.NET 서버 컨트롤의 경로를 지정하는 데 대한 자세한 내용은 ASP.NET 웹 사이트 경로를 참조하십시오.

캐싱 및 사용자 정의 컨트롤

사용자 정의 컨트롤은 호스트 페이지로부터 독립된 별개의 캐싱 지시문을 지원할 수 있습니다. 따라서 페이지 및 페이지의 캐시 부분에 사용자 정의 컨트롤을 추가할 수 있습니다. 자세한 내용은 ASP.NET 페이지의 부분 캐싱을 참조하십시오.

참고 항목

기타 리소스

ASP.NET 사용자 정의 컨트롤

다음을 통해 공유