다음을 통해 공유

방법: 사용자 정의 컨트롤을 웹 파트 컨트롤로 처리

  • 아티클

업데이트: 2007년 11월

ASP.NET 웹 파트 컨트롤 집합을 사용하면 코드를 가능한 여러 번 다시 사용하고 웹 파트 개인 설정의 이점을 활용하기 위해 기존 웹 서버 컨트롤을 웹 파트 컨트롤로 사용할 수 있습니다. 사용자 정의 컨트롤은 웹 파트 컨트롤로 사용할 수 있는 서버 컨트롤 형식 중 하나입니다. 이 항목에서는 기존 사용자 정의 컨트롤을 웹 파트 컨트롤로 처리하는 방법을 설명합니다.

참고:

이 절차를 수행하려면 개별 사용자를 식별할 수 있는 ASP.NET 웹 사이트가 필요합니다. 이러한 사이트가 이미 구성된 경우에는 해당 사이트를 사용할 수 있습니다. 그렇지 않은 경우, 가상 디렉터리 만들기에 대한 자세한 내용은 방법: IIS 5.0 및 6.0에서 가상 디렉터리 만들기 및 구성을 참조하십시오. 웹 파트 개인 설정을 사용할 수 있는 사용자 정의 컨트롤도 필요합니다. 이러한 사용자 정의 컨트롤이 없는 경우에는 Code 단원의 샘플을 사용할 수 있습니다.

웹 파트 응용 프로그램에서 사용자 정의 컨트롤을 사용하는 경우 이 컨트롤은 런타임에 WebPart 컨트롤의 전체 기능을 사용합니다. 자세한 내용은 웹 파트 응용 프로그램에서 ASP.NET 서버 컨트롤 사용을 참조하십시오. 이 사용자 정의 컨트롤은 서버 컨트롤의 일반 기능도 유지합니다. 단, 웹 파트 응용 프로그램에서 사용되는 사용자 정의 컨트롤에서는 출력 캐싱을 사용할 수 없습니다. 웹 파트 컨트롤 집합에서는 페이지 요청이 있을 때마다 모든 컨트롤을 컨트롤 트리에 추가해야 합니다. 이렇게 해야 개인 설정 기능이 작동되고 개인 설정 데이터가 컨트롤로 라운드트립될 수 있습니다. 하지만 사용자 정의 컨트롤에서 출력 캐싱을 사용하는 경우에는 컨트롤이 컨트롤 트리에 추가되지 않기 때문에 웹 파트 기능을 방해하게 됩니다. 이 때문에 웹 파트 응용 프로그램의 사용자 정의 컨트롤에서는 출력 캐싱을 사용하지 않도록 설계됩니다.

사용자 정의 컨트롤을 호스팅할 웹 파트 페이지를 만들려면

  1. 새 ASP.NET 페이지를 만듭니다. 페이지 위쪽에 다음 페이지 선언을 추가합니다.

    <@page language="VB" %>

    <@page language="C#" %>

  2. 방금 추가한 페이지 선언 아래에 HTML 태그가 있는 다음과 같은 기본 페이지 구조를 추가합니다.

    <html>
<head>
  <title>Web Parts Demo Page</title>
</head>
<body>
  <h1>Web Parts User Control Demonstration</h1>
  <form >
  <table cellspacing="0" cellpadding="0" border="0">
    <tr>
      <td valign="top">
      </td>
      <td valign="top">
      </td>
      <td valign="top">
      </td>
    </tr>
  </table>
  </form>
</body>
</html>

  3. 개인 설정을 사용할 수 있는 사이트의 하위 디렉터리에 이 페이지를 저장합니다.

페이지에 웹 파트 컨트롤을 추가하려면

  1. 페이지의 <form> 요소 바로 아래에 WebPartManager 컨트롤을 추가합니다.

    <asp:webpartmanager id="WebPartManager1"  />

  2. <asp:webpartmanager> 요소 바로 아래에서 표의 첫 번째 <td> 태그 집합(첫 번째 표 열) 내에 나중 단계에서 추가할 사용자 정의 컨트롤을 포함하는 WebPartZone 컨트롤을 추가합니다.

    <asp:webpartzone id="SideBarZone"  
  headertext="Sidebar Zone">
  <zonetemplate>
  </zonetemplate>
</asp:webpartzone>

  3. 웹 파트 영역 내에 있기 때문에 런타임에 다른 웹 파트 컨트롤로 처리될 정적 콘텐츠와 기존 서버 컨트롤을 방금 추가한 영역의 <zonetemplate> 요소에 추가합니다.

    <asp:label  id="linksPart" title="My Links">
  <a href="www.asp.net">ASP.NET site</a> 
  <br />
  <a href="www.gotdotnet.com">GotDotNet</a> 
  <br />
  <a href="www.contoso.com">Contoso.com</a> 
  <br />
</asp:label>

  4. 표의 두 번째 <td> 태그 집합(두 번째 표 열) 내에 나중 단계에서 추가할 사용자 정의 컨트롤을 포함하는 또 하나의 WebPartZone 컨트롤을 추가합니다.

    <asp:webpartzone id="MainZone"  
  headertext="Main Zone">
  <zonetemplate>
  </zonetemplate>
</asp:webpartzone>

  5. 표의 세 번째 <td> 요소(세 번째 열) 내에 <asp:editorzone> 요소를 추가합니다. <zonetemplate> 요소를 추가한 다음 <asp:appearanceeditorpart> 및 <asp:layouteditorpart> 요소를 추가합니다. 편집기 영역의 코드는 다음과 같습니다.

    <asp:editorzone id="EditorZone1" >
  <zonetemplate>
    <asp:appearanceeditorpart  
      id="AppearanceEditorPart1" />
    <asp:layouteditorpart  
      id="LayoutEditorPart1" />
  </zonetemplate>
</asp:editorzone>

  6. 페이지를 저장합니다.

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

  1. 텍스트 편집기에서 새 파일을 만듭니다. 이 파일에는 페이지에 웹 파트 컨트롤로 추가될 수도 있는 사용자 정의 컨트롤이 포함됩니다.

    참고:

    이 연습의 검색 컨트롤은 실제 검색 기능을 구현하지 않으며 웹 파트 기능을 설명하는 용도로만 사용됩니다.

  2. 새 파일의 맨 위에 다음 예제와 같이 컨트롤 선언을 추가합니다.

    <%@ control language="VB" classname="SearchUserControl" %>

    <%@ control language="C#" classname="SearchUserControl" %>

  3. 컨트롤 선언 아래에 <script> 태그 쌍을 추가하고 그 안에 개인 설정할 수 있는 속성을 만드는 코드를 추가합니다. ResultsPerPage 속성에는 Personalizable 특성이 있습니다. 디자인 뷰에서 설정을 변경하는 편집 컨트롤을 UI(사용자 인터페이스)에 제공한 경우 이 속성을 사용하여 컨트롤 사용자가 페이지당 반환할 검색 결과 수를 개인 설정할 수 있습니다. 컨트롤의 코드는 다음 코드 예제와 같습니다.

    <%@ control language="VB" classname="SearchUserControl" %>
<script >
  Private results As Integer

  <Personalizable()> _
  Property ResultsPerPage() As Integer

    Get
      Return results
    End Get

    Set(ByVal value As Integer)
      results = value
    End Set

  End Property
</script>

    <%@ control language="C#" classname="SearchUserControl" %>
<script >
  private int results;

  [Personalizable]
  public int ResultsPerPage
  {
    get
      {return results;}

    set
      {results = value;}
  }    
</script>

  4. 다음 코드 예제와 같이 <script> 요소 아래에 텍스트 상자와 단추를 추가하여 검색 컨트롤의 기본 UI를 제공합니다.

    <asp:textbox  id="inputBox"></asp:textbox>
<br />
<asp:button  id="searchButton" text="Search" />

  5. 사용하는 언어에 따라 파일의 이름을 SearchUserControlVB.ascx 또는 SearchUserControlCS.ascx로 설정하고 WebPartsDemo.aspx 페이지와 같은 디렉터리에 이 파일을 저장합니다.

    보안 정보:

    이 컨트롤에는 사용자 입력을 받아들이는 텍스트 상자가 있으므로 보안상 위협이 될 수 있습니다. 웹 페이지의 사용자 입력에는 악의적인 클라이언트 스크립트가 포함될 수도 있습니다. 기본적으로 ASP.NET 웹 페이지에서는 사용자 입력의 유효성을 검사하여 입력에 HTML 요소나 스크립트가 포함되지 않도록 합니다. 이러한 유효성 검사를 사용하는 이상, 사용자 입력에 있는 스크립트 또는 HTML 요소를 명시적으로 검사할 필요가 없습니다. 자세한 내용은 스크립트 악용 개요를 참조하십시오.

주 웹 파트 영역에서 사용자 정의 컨트롤을 참조하려면

  1. 웹 페이지 위쪽의 페이지 선언 바로 뒤에 방금 만든 사용자 정의 컨트롤을 참조하는 다음 선언을 추가합니다. 이 항목에 제공된 사용자 정의 컨트롤 샘플을 사용하지 않는 경우에는 src 특성을 사용 중인 사용자 정의 컨트롤의 경로와 파일 이름으로 설정해야 하며 필요에 따라 tagname 특성에 다른 값을 할당할 수도 있습니다.

    [VB]

    <%@ register tagprefix="uc1" tagname="SearchUserControl" 
    src="searchusercontrolvb.ascx" %>

    [C#]

    <%@ register tagprefix="uc1" tagname="SearchUserControl" 
    src="searchusercontrolcs.ascx" %>

  2. 주 영역의 <zonetemplate> 요소 내에서 이전에 만든 사용자 정의 컨트롤을 참조합니다.

    <uc1:SearchUserControl id="searchPart" 
  title="Search" />

  3. 페이지를 저장한 다음 닫습니다.

예제

다음 코드 예제에서는 사용자 정의 컨트롤을 호스팅하는 데 사용되는 샘플 웹 파트 페이지의 전체 코드 목록을 제공합니다. 또한 페이지에서 웹 파트 컨트롤로 참조되는 샘플 사용자 정의 컨트롤에 대한 코드도 제공합니다. 사용자 정의 컨트롤이 개인 설정할 수 있는 진정한 웹 파트 컨트롤로 처리되려면 [Personalizable] 코드 특성을 사용하여 공용 속성을 노출해야 합니다.

<!-- Web Parts page to host the user control -->
<%@ page language="VB" %>
<%@ register tagprefix="uc1" tagname="SearchUserControl" 
  src="searchusercontrol.ascx" %>

<html>
<head>
  <title>Web Parts Demo Page</title>
</head>
<body>
  <h1>Web Parts User Control Demonstration</h1>
  <form  id="form1">
  <asp:webpartmanager id="WebPartManager1"  />
  <asp:webpartpagemenu
    id="pagemenu1"
    
    Mode="Menu"
    MenuStyle-BorderWidth="1">
    <browsemodeverb text="Browse" />
    <designmodeverb text="Design" />
    <editmodeverb text="Edit" />
  </asp:webpartpagemenu>
  <table cellspacing="0" cellpadding="0" border="0">
    <tr>
      <td valign="top">
        <asp:webpartzone id="SideBarZone"  
          headertext="Sidebar Zone">
          <zonetemplate>
            <asp:label  id="linksPart" title="My Links">
              <a href="www.asp.net">ASP.NET site</a> 
              <br />
              <a href="www.gotdotnet.com">GotDotNet</a> 
              <br />
              <a href="www.contoso.com">Contoso.com</a> 
              <br />
            </asp:label>
          </zonetemplate>
        </asp:webpartzone>
      </td>
      <td valign="top">
        <asp:webpartzone id="MainZone"  
          headertext="Main Zone">
          <zonetemplate>
            <uc1:SearchUserControl id="searchPart" 
              title="Search" />
          </zonetemplate>
        </asp:webpartzone>
      </td>
      <td valign="top">
        <asp:editorzone id="EditorZone1" >
          <zonetemplate>
            <asp:appearanceeditorpart  
              id="AppearanceEditorPart1" />
            <asp:layouteditorpart  
              id="LayoutEditorPart1" />
          </zonetemplate>
        </asp:editorzone>
      </td>
    </tr>
  </table>
  </form>
</body>
</html>


<!-- Web Parts user control -->
<%@ control language="VB" classname="SearchUserControl" %>
<script >
  Private results As Integer
  
  <Personalizable()> _
  Property ResultsPerPage() As Integer
    
    Get
      Return results
    End Get
    
    Set(ByVal value As Integer)
      results = value
    End Set
    
  End Property
</script>
<asp:textbox  id="inputBox"></asp:textbox>
<br />
<asp:button  id="searchButton" text="Search" />

<!-- Web Parts page to host the user control -->
<%@ page language="C#" %>
<%@ register tagprefix="uc1" tagname="SearchUserControl" 
  src="searchusercontrol.ascx" %>

<html>
<head>
  <title>Web Parts Demo Page</title>
</head>
<body>
  <h1>Web Parts User Control Demonstration</h1>
  <form  id="form1">
  <asp:webpartmanager id="WebPartManager1"  />
  <asp:webpartpagemenu
    id="pagemenu1"
    
    Mode="Menu"
    MenuStyle-BorderWidth="1">
    <browsemodeverb text="Browse" />
    <designmodeverb text="Design" />
    <editmodeverb text="Edit" />
  </asp:webpartpagemenu>
  <table cellspacing="0" cellpadding="0" border="0">
    <tr>
      <td valign="top">
        <asp:webpartzone id="SideBarZone"  
          headertext="Sidebar Zone">
          <zonetemplate>
            <asp:label  id="linksPart" title="My Links">
              <a href="www.asp.net">ASP.NET site</a> 
              <br />
              <a href="www.gotdotnet.com">GotDotNet</a> 
              <br />
              <a href="www.contoso.com">Contoso.com</a> 
              <br />
            </asp:label>
          </zonetemplate>
        </asp:webpartzone>
      </td>
      <td valign="top">
        <asp:webpartzone id="MainZone"  
          headertext="Main Zone">
          <zonetemplate>
            <uc1:SearchUserControl id="searchPart" 
              title="Search" />
          </zonetemplate>
        </asp:webpartzone>
      </td>
      <td valign="top">
        <asp:editorzone id="EditorZone1" >
          <zonetemplate>
            <asp:appearanceeditorpart  
              id="AppearanceEditorPart1" />
            <asp:layouteditorpart  
              id="LayoutEditorPart1" />
          </zonetemplate>
        </asp:editorzone>
      </td>
    </tr>
  </table>
  </form>
</body>
</html>


<!-- Web Parts user control -->
<%@ control language="C#" classname="SearchUserControl" %>
<script >
  private int results;
  
  [Personalizable]
  public int ResultsPerPage
  {
    get
      {return results;}
    
    set
      {results = value;}
  }    
</script>
<asp:textbox  id="inputBox"></asp:textbox>
<br />
<asp:button  id="searchButton" text="Search" />

샘플 코드를 실행하고 디스플레이 모드 페이지 메뉴를 클릭하면 메뉴에서 Browse, Design 및 Edit의 서로 다른 개인 설정 모드 간에 변경할 수 있습니다. Design 모드에서는 두 가지 웹 파트 컨트롤의 헤더를 클릭하고 이 컨트롤을 다른 영역으로 끌어와 페이지의 레이아웃을 정렬할 수 있습니다. Edit 모드에서는 두 웹 파트 컨트롤 중 하나의 헤더에서 편집 이미지를 클릭한 다음 해당 컨트롤에서 다양한 UI 속성을 설정할 수 있습니다.

참고 항목

작업

연습: 웹 파트 페이지 만들기

개념

ASP.NET 웹 파트 개요

웹 파트 응용 프로그램에서 ASP.NET 서버 컨트롤 사용