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

Visual Studio 2010

업데이트: 2007년 11월

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

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

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

  1. .ascx 파일에서 템플릿을 표시할 위치에 ASP.NET PlaceHolder 컨트롤을 추가합니다.

  2. 사용자 정의 컨트롤의 코드에서 ITemplate 형식의 속성을 구현합니다.

  3. INamingContainer 인터페이스를 템플릿 인스턴스를 만들 컨테이너로 구현하는 서버 컨트롤 클래스를 정의합니다. 이것을 템플릿의 명명 컨테이너라고 합니다.

    36574bf6.alert_note(ko-kr,VS.100).gif참고:

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

  4. ITemplate을 구현하는 속성에 TemplateContainerAttribute를 적용하고 템플릿의 명명 컨테이너 형식을 특성 생성자의 인수로 전달합니다.

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

    • 명명 컨테이너 클래스의 인스턴스를 만듭니다.

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

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

      36574bf6.alert_note(ko-kr,VS.100).gif참고:

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

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

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

<%@ Control language="C#" ClassName="TemplatedUC" %>
<%@ Import Namespace="System.ComponentModel"  %>
<script runat="server">
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 runat="server" ID="PlaceHolder1" />


<%@ 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 runat="server">
    protected void Page_Load()
    {
        DataBind();
    }
    
</script>
<head>
<title>Templated User Control Test</title>
</head>
<body>
<h1>Testing Templated User Control</h1>
<form id="Form1" runat="server">
<uc:TemplateTest runat="server">
  <MessageTemplate>
    Index: <asp:Label runat="server" ID="Label1" 
        Text='<%# Container.Index %>' />
    <br />
    Message: <asp:Label runat="server" ID="Label2" 
        Text='<%# Container.Message %>' />
    <hr />
  </MessageTemplate>
</uc:TemplateTest>
</form>
</body>
</html>
표시: