방법: 템플릿 기반 ASP.NET 사용자 정의 컨트롤 만들기

아티클
10/22/2014

업데이트: 2007년 11월

템플릿, 즉 컨트롤 데이터를 프레젠테이션에서 분리할 수 있는 ASP.NET 기능을 구현하는 사용자 정의 컨트롤을 만들 수 있습니다. 템플릿 기반 컨트롤 자체에서는 사용자 인터페이스를 제공하지 않습니다. 대신 명명 컨테이너를 구현하고, 호스트 페이지에서 액세스할 수 있는 속성과 메서드를 가진 클래스를 포함하도록 작성됩니다.

사용자 정의 컨트롤의 사용자 인터페이스는 디자인 타임에 페이지 개발자가 제공합니다. 개발자는 사용자 정의 컨트롤에 정의된 형식의 템플릿을 만들고 이 템플릿에 컨트롤과 태그를 추가할 수 있습니다.

템플릿 기반 사용자 정의 컨트롤을 만들려면

.ascx 파일에서 템플릿을 표시할 위치에 ASP.NET PlaceHolder 컨트롤을 추가합니다.
사용자 정의 컨트롤의 코드에서 ITemplate 형식의 속성을 구현합니다.
INamingContainer 인터페이스를 템플릿 인스턴스를 만들 컨테이너로 구현하는 서버 컨트롤 클래스를 정의합니다. 이것을 템플릿의 명명 컨테이너라고 합니다.

참고:

이 컨트롤은 사용자 정의 컨트롤의 중첩 클래스가 되지만 반드시 필요한 것은 아닙니다.
ITemplate을 구현하는 속성에 TemplateContainerAttribute를 적용하고 템플릿의 명명 컨테이너 형식을 특성 생성자의 인수로 전달합니다.

참고:
이 컨트롤은 사용자 정의 컨트롤의 중첩 클래스가 되지만 반드시 필요한 것은 아닙니다.

컨트롤의 Init 메서드에서 다음 단계를 한 번 이상 반복합니다.

명명 컨테이너 클래스의 인스턴스를 만듭니다.
명명 컨테이너에 템플릿의 인스턴스를 만듭니다.

PlaceHolder 서버 컨트롤의 Controls 속성에 명명 컨테이너 인스턴스를 추가합니다.

참고:
사용자 정의 컨트롤을 사용하는 페이지의 관점에서 보면 템플릿 기반 사용자 정의 컨트롤의 구문이 사용자 지정 템플릿 기반 컨트롤의 구문과 동일합니다.

예제

다음 예제에서는 템플릿 기반 사용자 정의 컨트롤 및 이 컨트롤이 포함된 페이지를 보여 줍니다. 이 사용자 정의 컨트롤은 호스트 페이지에서 <MessageTemplate>으로 선언할 수 있는 템플릿을 만듭니다. 또한 이 템플릿 컨트롤은 호스트 페이지를 통해 템플릿 내에서 액세스할 수 있는 두 가지 속성 Index와 Message를 노출합니다.

첫 번째 샘플에서는 템플릿 기반 사용자 정의 컨트롤을 보여 주고 두 번째 샘플에서는 이 사용자 정의 컨트롤을 포함하는 페이지를 보여 줍니다.

<%@ Control language="VB" ClassName="TemplatedUC" %>
<%@ Import Namespace="System.ComponentModel"  %>

<script  >
    Private m_messageTemplate As ITemplate = Nothing
    <TemplateContainer(GetType(MessageContainer))> _
    <PersistenceMode(PersistenceMode.InnerProperty)> Public Property _
            MessageTemplate() As ITemplate
        Get
            Return m_messageTemplate
        End Get
        Set(ByVal value As ITemplate)
            m_messageTemplate = Value
        End Set
    End Property
    
    Sub Page_Init()
        If Not (MessageTemplate Is Nothing) Then
            Dim i As Integer
            Dim fruits() As String = _
                {"apple", "orange", "banana", "pineapple"}
            For i = 0 To 3
                Dim container As New MessageContainer(i, fruits(i))
                MessageTemplate.InstantiateIn(container)
                PlaceHolder1.Controls.Add(container)
            Next i
        End If
    End Sub

    Public Class MessageContainer
        Inherits Control
        Implements INamingContainer

        Private m_index As Integer
        Private m_message As String
        Friend Sub New(ByVal i As Integer, ByVal msg As String)
            Me.Index = i
            Me.Message = msg
        End Sub
    
        Public Property Index() As Integer
            Get
                Return m_index
            End Get
            Set(ByVal value As Integer)
                m_index = value
            End Set
        End Property

        Public Property Message() As String
            Get
                Return m_message
            End Get
            Set(ByVal value As String)
                m_message = value
            End Set
        End Property
    End Class
</script>
<asp:Placeholder  ID="PlaceHolder1" />

<%@ Control language="C#" ClassName="TemplatedUC" %>
<%@ Import Namespace="System.ComponentModel"  %>
<script >
private ITemplate messageTemplate = null;

[ TemplateContainer(typeof(MessageContainer)) ]
[ PersistenceMode(PersistenceMode.InnerProperty) ]
public ITemplate MessageTemplate {
    get 
    { 
        return messageTemplate; 
    }
    set 
    { 
        messageTemplate = value; 
    }
}

void Page_Init() {
    if (messageTemplate != null) {
        String[] fruits = {"apple", "orange", "banana", "pineapple" };
        for (int i=0; i<4; i++) 
        {
            MessageContainer container = new MessageContainer(i, fruits[i]);
            messageTemplate.InstantiateIn(container);
            PlaceHolder1.Controls.Add(container);
        }
    }
}

public class MessageContainer: Control, INamingContainer {
    private int m_index;
    private String m_message;
    internal MessageContainer(int index, String message)
    { 
        m_index = index;
        m_message = message;
    }
    public int Index {
        get 
        { 
            return m_index; 
        } 
    }
    public String Message 
    { 
        get 
        { 
            return m_message; 
        } 
    }
}
</script>
<asp:Placeholder  ID="PlaceHolder1" />

<%@ Page Language="VB" %>
<%@ Register TagPrefix="uc" tagname="TemplateTest" 
    Src="TemplatedUC.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script >
    Sub Page_Load()
        DataBind()
    End Sub
</script>
<head>
<title>Templated User Control Test</title>
</head>
<body>
<h1>Testing Templated User Control</h1>
<form id="Form1" >
<uc:TemplateTest >
  <MessageTemplate>
    Index: <asp:Label  ID="Label1" 
                Text='<%# Container.Index %>' />
    <br />
    Message: <asp:Label  ID="Label2" 
        Text='<%# Container.Message %>' />
    <hr />
  </MessageTemplate>
</uc:TemplateTest>
</form>
</body>
</html>

<%@ Page Language="C#" %>
<%@ Register TagPrefix="uc" tagname="TemplateTest" 
    Src="TemplatedUC.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script >
    protected void Page_Load()
    {
        DataBind();
    }
    
</script>
<head>
<title>Templated User Control Test</title>
</head>
<body>
<h1>Testing Templated User Control</h1>
<form id="Form1" >
<uc:TemplateTest >
  <MessageTemplate>
    Index: <asp:Label  ID="Label1" 
        Text='<%# Container.Index %>' />
    <br />
    Message: <asp:Label  ID="Label2" 
        Text='<%# Container.Message %>' />
    <hr />
  </MessageTemplate>
</uc:TemplateTest>
</form>
</body>
</html>

참고 항목

개념

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

다음을 통해 공유

방법: 템플릿 기반 ASP.NET 사용자 정의 컨트롤 만들기

템플릿 기반 사용자 정의 컨트롤을 만들려면

예제

참고 항목

개념

추가 리소스