연습: Visual Web Developer에서 웹 파트 페이지 만들기

업데이트: 2007년 11월

이 연습은 Microsoft Visual Studio 2005 같은 시각적 페이지 디자인 도구에서 웹 파트 컨트롤을 사용하는 웹 페이지를 만들기 위한 필수 구성 요소와 작업의 실제 사례입니다.

콘텐츠의 모양을 변경하는 기능과 사용자가 표시되는 콘텐츠를 선택하고 정렬할 수 있게 해주는 기능은 많은 웹 응용 프로그램에서 유용합니다. ASP.NET 웹 파트를 사용하면 모듈식 콘텐츠를 제공하고 사용자가 원하는 대로 모양 및 콘텐츠를 변경할 수 있도록 하는 웹 페이지를 만들 수 있습니다. 웹 파트에 대한 일반적인 내용은 ASP.NET 웹 파트 개요를 참조하십시오. 웹 파트 컨트롤 집합에 대한 개요는 웹 파트 컨트롤 설정 개요를 참조하십시오.

이 연습에서는 사용자가 수정하고 개인 설정할 수 있는 웹 페이지를 만들기 위해 웹 파트 컨트롤을 사용하는 페이지를 만듭니다. 이 연습에서 수행할 작업은 다음과 같습니다.

• 페이지에 웹 파트 컨트롤 추가

• 사용자 정의 컨트롤 만들기 및 웹 파트 컨트롤로 사용

• 사용자가 페이지의 웹 파트 컨트롤 레이아웃을 개인 설정할 수 있도록 허용

• 사용자가 웹 파트 컨트롤의 모양을 편집할 수 있도록 허용

• 사용자가 사용 가능한 웹 파트 컨트롤 카탈로그에서 선택할 수 있도록 허용

사전 요구 사항

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

• 개별 사용자를 식별할 수 있는 사이트. ASP.NET 멤버 자격이 구성된 사이트가 이미 있으면 이 연습에서 해당 사이트를 사용할 수 있습니다. 그렇지 않은 경우 이 연습에서 제공하는 지침에 따라 Windows 사용자 계정 이름으로 사용자를 식별하도록 사이트를 구성하십시오.

• 웹 페이지를 만들기 위한 시각적 디자인 환경. 이 연습에서는 Visual Studio 2005를 사용합니다.

• 구성된 개인 설정 공급자 및 데이터베이스. 웹 파트 개인 설정은 기본적으로 활성화되어 있으며 SQL 개인 설정 공급자(SqlPersonalizationProvider)와 Microsoft SQL Server Express Edition을 함께 사용하여 개인 설정 데이터를 저장합니다. 이 연습에서는 SQL Server Express와 기본 SQL 공급자를 사용합니다. SQL Server Express가 설치되어 있으면 구성이 필요하지 않습니다. SQL Server Express는 Microsoft Visual Studio 2005와 함께 설치 옵션으로 제공되거나 Microsoft.com에서 무료로 다운로드할 수 있습니다. SQL Server 정식 버전을 사용하려면 ASP.NET 응용 프로그램 서비스 데이터베이스를 설치 및 구성하고 SQL 개인 설정 공급자를 구성하여 해당 데이터베이스에 연결해야 합니다. 자세한 내용은 SQL Server용 응용 프로그램 서비스 데이터베이스 만들기 및 구성을 참조하십시오.

웹 사이트 만들기 및 구성

이 연습에서는 웹 파트 설정이 해당 사용자에게 지정될 수 있도록 사용자 ID가 있어야 합니다. 멤버 자격을 사용하도록 구성된 웹 사이트가 이미 있으면 해당 사이트를 사용하는 것이 좋습니다. 그렇지 않으면 새 사이트를 만들고 현재 Windows 사용자 이름을 사용자 ID로 사용할 수 있습니다.

새 웹 사이트를 만들려면

• Visual Studio에서 새 ASP.NET 웹 사이트를 만듭니다.

  자세한 내용은 연습: 멤버 자격과 사용자 로그인을 사용하는 웹 사이트 만들기를 참조하십시오.

웹 파트를 사용하여 단순 페이지 만들기

이 연습 단계에서는 웹 파트 컨트롤을 사용하여 정적 콘텐츠를 표시하는 페이지를 만듭니다. 웹 파트 작업의 첫 단계에서는 두 개의 필수 요소를 사용하여 페이지를 만듭니다. 첫째로 웹 파트 페이지에는 모든 웹 파트 컨트롤을 조정하는 WebPartManager 컨트롤이 필요합니다. 둘째로 웹 파트 페이지에는 WebPart 또는 다른 서버 컨트롤이 포함되며 지정한 페이지 영역을 차지하는 합성 컨트롤인 한 개 이상의 영역이 필요합니다.

참고:
웹 파트 개인 설정은 웹 파트 컨트롤 집합에 대해 기본적으로 설정되므로 추가 구성이 필요하지 않습니다. 사이트에서 웹 파트 페이지를 처음 실행할 때 ASP.NET에서 사용자 개인 설정을 저장할 기본 개인 설정 공급자를 설정합니다. 개인 설정에 대한 자세한 내용은 웹 파트 개인 설정 개요를 참조하십시오.

웹 파트 컨트롤을 포함하기 위한 페이지를 만들려면

1. 기본 페이지를 닫고 WebPartsDemo.aspx라는 새 페이지를 추가합니다.

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

3. 보기 메뉴에서 시각 보조 기능을 클릭한 다음 ASP.NET 비시각적 컨트롤 및 자세히 옵션이 선택되어 있는지 확인합니다.

   이렇게 하면 UI가 없는 레이아웃 태그 및 컨트롤을 볼 수 있습니다.

4. body 요소 바로 앞에 새 줄을 추가합니다.

   참고:
   이렇게 하는 데 문제가 있으면 div 요소를 선택하고 Esc 키를 두 번 눌러 body 요소를 선택하고 왼쪽 화살표 키를 누른 다음 Enter 키를 누릅니다.

5. 삽입 지점을 줄 바꿈 문자 앞에 놓습니다.

6. 도구 모음의 블록 서식 목록에서 제목 1을 선택합니다.

7. 제목에 Web Parts Demonstration Page라는 텍스트를 추가합니다.

8. 도구 상자의 WebParts 탭에서 페이지의 줄 바꿈 문자와 여는 <div> 태그 사이로 WebPartManager 컨트롤을 끌어 옵니다.

   WebPartManager 컨트롤은 출력을 렌더링하지 않으므로 디자이너 화면에서 회색 상자로 나타납니다.

9. div 요소에 삽입 지점을 놓습니다.

10. 표 메뉴에서 표 삽입을 클릭하고 행 1개, 열 3개의 표를 지정한 다음 확인을 클릭합니다.

11. WebPartZone 컨트롤을 왼쪽 표 열로 끌어 옵니다. WebPartZone 컨트롤을 마우스 오른쪽 단추로 클릭하고 속성을 선택하여 다음 속성을 설정합니다.

    ID: SidebarZone

    HeaderText: Sidebar

12. 두 번째 WebPartZone 컨트롤을 가운데 표 열로 끌어 오고 다음 속성을 설정합니다.

    ID: MainZone

    HeaderText: Main

13. 파일을 저장하고 닫지는 않습니다.

이제 페이지에 별도로 제어할 수 있는 두 개의 영역이 있습니다. 그러나 두 영역에 모두 콘텐츠가 없으므로 다음 단계에서는 콘텐츠를 만듭니다. 이 연습에서는 정적 콘텐츠만 표시하는 웹 파트 컨트롤을 사용합니다.

웹 파트 영역의 레이아웃은 zonetemplate 요소로 지정됩니다. 사용자 지정 웹 파트 컨트롤, 사용자 정의 컨트롤 또는 기존 서버 컨트롤 중 어느 것이든 관계없이 영역 템플릿 내부에 ASP.NET 컨트롤을 추가할 수 있습니다. 여기에서는 Label 컨트롤을 사용하며 정적 텍스트만 컨트롤에 추가합니다. WebPartZone 영역에 일반 서버 컨트롤을 배치하면 ASP.NET에서 런타임 시 이 컨트롤을 웹 파트 컨트롤로 처리하여 컨트롤에서 웹 파트 기능을 사용할 수 있게 합니다.

기본 영역의 콘텐츠를 만들려면

1. 디자인 뷰에서 도구 상자의 표준 탭으로부터 Label 컨트롤을 ID 속성이 MainZone으로 설정된 영역의 콘텐츠 영역으로 끌어 옵니다.

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

   zonetemplate 요소가 추가되어 MainZone의 Label 컨트롤을 래핑합니다.

3. asp:label 요소에 title이라는 특성을 추가하고 해당 값을 Content로 설정합니다. asp:label 요소에서 Text="Label" 특성을 제거합니다. asp:label 요소 안에 <h2>Welcome to my Home Page</h2>와 같은 텍스트를 추가합니다. 코드는 다음과 같습니다.

   <asp:webpartzone id="MainZone"  headertext="Main">
      <zonetemplate>
         <asp:label id="Label1"  title="Content">
            <h2>Welcome to My Home Page</h2>
         </asp:label>
      </zonetemplate>
   </asp:webpartzone>
   

4. 파일을 저장합니다.

다음에는 페이지에 웹 파트 컨트롤로 추가할 수도 있는 사용자 정의 컨트롤을 만듭니다.

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

1. 검색 컨트롤 역할을 수행할 SearchUserControl.ascx라는 새 웹 사용자 정의 컨트롤을 사이트에 추가합니다. 이때 다른 파일에 코드 입력 옵션을 해제해야 합니다.

   참고:
   이 연습의 사용자 정의 컨트롤은 실제 검색 기능을 구현하지 않으며 웹 파트 기능을 보여 주는 용도로만 사용됩니다.

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

3. 도구 상자의 표준 탭에서 TextBox 컨트롤을 페이지로 끌어 옵니다.

4. 추가한 텍스트 상자 뒤에 삽입 지점을 놓고 Enter 키를 눌러 새 줄을 추가합니다.

5. Button 컨트롤을 페이지로 끌어와 추가한 텍스트 상자 아래의 새 줄에 놓습니다.

6. 소스 뷰로 전환한 다음 사용자 정의 컨트롤의 소스 코드가 다음 예제와 같은지 확인합니다.

   <%@ control language="VB" classname="SearchUserControl" %>
   <asp:textbox  id="TextBox1"></asp:textbox>
   <br />
   <asp:button  id="Button1" text="Search" />
   

   <%@ control language="C#" classname="SearchUserControl" %>
   <asp:textbox  id=" TextBox1"></asp:textbox>
   <br />
   <asp:button  id=" Button1" text="Search" />
   

7. 파일을 저장한 다음 닫습니다.

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

이제 세로 막대 영역에 웹 파트 컨트롤을 추가할 수 있습니다. 링크 목록이 포함된 컨트롤과 연습에서 앞서 만든 사용자 정의 컨트롤을 세로 막대 영역에 추가합니다. 링크는 Main 영역에 대한 정적 텍스트를 만든 방법과 같이 표준 Label 서버 컨트롤로 추가됩니다. 사용자 정의 컨트롤에 포함된 개별 서버 컨트롤을 Label 컨트롤과 같이 영역에 직접 포함할 수도 있지만 여기에서는 그렇게 하지 않습니다. 대신 이전 절차에서 만든 사용자 정의 컨트롤에 포함됩니다. 이것은 사용자 정의 컨트롤에 포함시킬 컨트롤 및 추가 기능을 패키지한 다음 해당 컨트롤을 영역에서 웹 파트 컨트롤로 참조하는 일반적인 방법을 보여 줍니다.

런타임 시 웹 파트 컨트롤 집합은 두 컨트롤을 모두 GenericWebPart 컨트롤로 래핑합니다. GenericWebPart 컨트롤이 웹 서버 컨트롤을 래핑하면 일반 파트 컨트롤이 부모 컨트롤이 되며 부모 컨트롤의 ChildControl 속성을 통해 서버 컨트롤에 액세스할 수 있습니다. 제네릭 파트 컨트롤을 사용하면 표준 웹 서버 컨트롤의 기본 동작과 특성이 WebPart 클래스에서 파생되는 웹 파트 컨트롤과 같게 됩니다.

세로 막대 영역에 웹 파트 컨트롤을 추가하려면

1. WebPartsDemo.aspx 페이지를 엽니다.

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

3. 생성된 사용자 정의 컨트롤 페이지 SearchUserControl.ascx를 솔루션 탐색기로부터 ID 속성이 SidebarZone으로 설정된 영역으로 끌어 놓습니다.

4. WebPartsDemo.aspx 페이지를 저장합니다.

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

6. 다음 예제와 같이 SidebarZone의 asp:webpartzone 요소 내에 링크를 포함하는 asp:label 요소를 추가하고, 사용자 정의 컨트롤 태그에 값이 Search인 Title 특성을 추가합니다.

   <asp:WebPartZone id="SidebarZone"  
      headertext="Sidebar">
      <zonetemplate>
         <asp:label  id="linksPart" title="My Links">
                <a href="https://www.asp.net">ASP.NET site</a> 
                <br />
                <a href="https://www.gotdotnet.com">GotDotNet</a> 
                <br />
                <a href="https://www.contoso.com">Contoso.com</a> 
                <br />
         </asp:label>
         <uc1:SearchUserControl id="searchPart" 
             title="Search" />
      </zonetemplate>
   </asp:WebPartZone>
   

7. 파일을 저장한 다음 닫습니다.

이제 페이지를 테스트할 수 있습니다.

페이지를 테스트하려면

• 브라우저에서 페이지를 로드합니다.

  페이지에 두 개의 영역이 표시됩니다. 다음 스크린 샷에서는 페이지를 보여 줍니다.

  두 개 영역이 포함된 웹 파트 데모 페이지
  

  각 컨트롤의 제목 표시줄에는 컨트롤에 대해 수행할 수 있는 작업의 동사 메뉴에 대한 액세스를 제공하는 아래쪽 화살표가 있습니다. 컨트롤 중 하나에 대한 동사 메뉴를 클릭한 다음 최소화 동사를 클릭하여 컨트롤이 최소화되는지 확인합니다. 동사 메뉴에서 복원을 클릭하면 컨트롤이 보통 크기로 돌아갑니다.

사용자의 페이지 편집 및 레이아웃 변경 허용

웹 파트는 사용자가 웹 파트 컨트롤을 한 영역에서 다른 영역으로 끌어 레이아웃을 변경할 수 있게 해주는 기능을 제공합니다. 사용자가 WebPart 컨트롤을 한 영역에서 다른 영역으로 이동할 수 있게 하는 것 외에도 모양, 레이아웃 및 동작을 포함하여 컨트롤의 다양한 특징을 편집할 수 있도록 할 수 있습니다. 웹 파트 컨트롤 집합은 WebPart 컨트롤에 대한 기본 편집 기능을 제공합니다. 이 연습에서는 만들지 않지만 사용자가 WebPart 컨트롤의 기능을 편집할 수 있게 해주는 사용자 지정 편집기 컨트롤을 만들 수도 있습니다. WebPart 컨트롤의 위치 변경과 마찬가지로 컨트롤의 속성 편집은 ASP.NET 개인 설정을 사용하여 사용자 변경 내용을 저장합니다.

이 연습 단계에서는 사용자가 페이지에 있는 모든 WebPart 컨트롤의 기본 특징을 편집할 수 있게 하는 기능을 추가합니다. 이 기능을 설정하려면 asp:editorzone 요소 및 두 개의 편집 컨트롤과 함께 다른 사용자 정의 컨트롤을 페이지에 추가합니다.

페이지 레이아웃 변경을 허용하는 사용자 정의 컨트롤을 만들려면

1. Visual Studio의 파일 메뉴에서 새로 만들기를 클릭한 다음 파일을 클릭합니다.

2. 새 항목 추가 대화 상자에서 웹 사용자 정의 컨트롤을 선택합니다. 새 파일의 이름을 DisplayModeMenu.ascx로 지정합니다. 다른 파일에 코드 입력 상자의 선택을 취소합니다.

3. 추가를 클릭하여 새 컨트롤을 만듭니다.

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

5. 새 파일에서 기존 코드를 모두 제거하고 다음 코드를 붙여 넣습니다. 이 사용자 정의 컨트롤 코드는 페이지의 보기 모드 또는 디스플레이 모드 변경을 허용하고 특정 디스플레이 모드에 있는 동안 페이지의 물리적 모양과 레이아웃을 변경할 수 있게 해주는 웹 파트 컨트롤 집합의 기능을 사용합니다.

   <%@ control language="vb" classname="DisplayModeMenuVB"%>
   <script >
     ' Use a field to reference the current WebPartManager control.
     Dim _manager As WebPartManager
   
     Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)
       AddHandler Page.InitComplete, AddressOf InitComplete
     End Sub
   
     Sub InitComplete(ByVal sender As Object, ByVal e As System.EventArgs)
       _manager = WebPartManager.GetCurrentWebPartManager(Page)
   
       Dim browseModeName As String = _
         WebPartManager.BrowseDisplayMode.Name
   
       ' Fill the drop-down list with the names of supported display modes.
       Dim mode As WebPartDisplayMode
       For Each mode In _manager.SupportedDisplayModes
         Dim modeName As String = mode.Name
         ' Make sure a mode is enabled before adding it.
         If mode.IsEnabled(_manager) Then
           Dim item As New ListItem(modeName, modeName)
           DisplayModeDropdown.Items.Add(item)
         End If
       Next mode
   
       ' If Shared scope is allowed for this user, display the 
       ' scope-switching UI and select the appropriate radio button 
       ' for the current user scope.
       If _manager.Personalization.CanEnterSharedScope Then
         Panel2.Visible = True
         If _manager.Personalization.Scope = _
           PersonalizationScope.User Then
           RadioButton1.Checked = True
         Else
           RadioButton2.Checked = True
         End If
       End If
     End Sub
   
     ' Change the page to the selected display mode.
     Sub DisplayModeDropdown_SelectedIndexChanged(ByVal sender As Object, _
       ByVal e As EventArgs)
   
       Dim selectedMode As String = DisplayModeDropdown.SelectedValue 
       Dim mode As WebPartDisplayMode = _
         _manager.SupportedDisplayModes(selectedMode)
       If Not (mode Is Nothing) Then
         _manager.DisplayMode = mode
       End If
     End Sub
   
     ' Set the selected item equal to the current display mode.
     Sub Page_PreRender(ByVal sender As Object, ByVal e As EventArgs)
       Dim items As ListItemCollection = DisplayModeDropdown.Items
       Dim selectedIndex As Integer = _
         items.IndexOf(items.FindByText(_manager.DisplayMode.Name))
       DisplayModeDropdown.SelectedIndex = selectedIndex
     End Sub
   
     ' Reset all of a user's personalization data for the page.
     Protected Sub LinkButton1_Click(ByVal sender As Object, _
       ByVal e As EventArgs)
   
       _manager.Personalization.ResetPersonalizationState()
   
     End Sub
   
     ' If not in User personalization scope, toggle into it.
     Protected Sub RadioButton1_CheckedChanged(ByVal sender As _
       Object, ByVal e As EventArgs)
       If _manager.Personalization.Scope = _
         PersonalizationScope.Shared Then
         _manager.Personalization.ToggleScope()
       End If
     End Sub
   
     ' If not in Shared scope, and if user has permission, toggle the 
     ' scope.
     Protected Sub RadioButton2_CheckedChanged(ByVal sender As _
       Object, ByVal e As EventArgs)
       If _manager.Personalization.CanEnterSharedScope AndAlso _
         _manager.Personalization.Scope = _
            PersonalizationScope.User Then
         _manager.Personalization.ToggleScope()
       End If
     End Sub
   
   </script>
   <div>
     <asp:Panel ID="Panel1"  
       Borderwidth="1" 
       Width="230" 
       BackColor="lightgray"
       Font-Names="Verdana, Arial, Sans Serif" >
       <asp:Label ID="Label1"  
         Text="&nbsp;Display Mode" 
         Font-Bold="true"
         Font-Size="8"
         Width="120" />
       <asp:DropDownList ID="DisplayModeDropdown"   
         AutoPostBack="true" 
         Width="120"
         OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
       <asp:LinkButton ID="LinkButton1" 
         Text="Reset User State" 
         ToolTip="Reset the current user's personalization data for 
         the page."
         Font-Size="8" 
         OnClick="LinkButton1_Click" />
       <asp:Panel ID="Panel2"  
         GroupingText="Personalization Scope"
         Font-Bold="true"
         Font-Size="8" 
         Visible="false" >
         <asp:RadioButton ID="RadioButton1"  
           Text="User" 
           AutoPostBack="true"
           GroupName="Scope" 
           OnCheckedChanged="RadioButton1_CheckedChanged" />
         <asp:RadioButton ID="RadioButton2"  
           Text="Shared" 
           AutoPostBack="true"
           GroupName="Scope" 
           OnCheckedChanged="RadioButton2_CheckedChanged" />
       </asp:Panel>
     </asp:Panel>
   </div>
   

   <%@ control language="C#" classname="DisplayModeMenuCS"%>
   <script >
   
    // Use a field to reference the current WebPartManager control.
     WebPartManager _manager;
   
     void Page_Init(object sender, EventArgs e)
     {
       Page.InitComplete += new EventHandler(InitComplete);
     }  
   
     void InitComplete(object sender, System.EventArgs e)
     {
       _manager = WebPartManager.GetCurrentWebPartManager(Page);
   
       String browseModeName = WebPartManager.BrowseDisplayMode.Name;
   
       // Fill the drop-down list with the names of supported display modes.
       foreach (WebPartDisplayMode mode in 
         _manager.SupportedDisplayModes)
       {
         String modeName = mode.Name;
         // Make sure a mode is enabled before adding it.
         if (mode.IsEnabled(_manager))
         {
           ListItem item = new ListItem(modeName, modeName);
           DisplayModeDropdown.Items.Add(item);
         }
       }
   
       // If Shared scope is allowed for this user, display the 
       // scope-switching UI and select the appropriate radio 
       // button for the current user scope.
       if (_manager.Personalization.CanEnterSharedScope)
       {
         Panel2.Visible = true;
         if (_manager.Personalization.Scope == 
           PersonalizationScope.User)
           RadioButton1.Checked = true;
         else
           RadioButton2.Checked = true;
       }
     }
   
     // Change the page to the selected display mode.
     void DisplayModeDropdown_SelectedIndexChanged(object sender, 
       EventArgs e)
     {
       String selectedMode = DisplayModeDropdown.SelectedValue;
   
       WebPartDisplayMode mode = 
        _manager.SupportedDisplayModes[selectedMode];
       if (mode != null)
         _manager.DisplayMode = mode;
     }
   
     // Set the selected item equal to the current display mode.
     void Page_PreRender(object sender, EventArgs e)
     {
       ListItemCollection items = DisplayModeDropdown.Items;
       int selectedIndex = 
         items.IndexOf(items.FindByText(_manager.DisplayMode.Name));
       DisplayModeDropdown.SelectedIndex = selectedIndex;
     }
   
     // Reset all of a user's personalization data for the page.
     protected void LinkButton1_Click(object sender, EventArgs e)
     {
       _manager.Personalization.ResetPersonalizationState();
     }
   
     // If not in User personalization scope, toggle into it.
     protected void RadioButton1_CheckedChanged(object sender, EventArgs e)
     {
       if (_manager.Personalization.Scope == 
         PersonalizationScope.Shared)
         _manager.Personalization.ToggleScope();
     }
   
     // If not in Shared scope, and if user has permission, toggle 
     // the scope.
     protected void RadioButton2_CheckedChanged(object sender, 
       EventArgs e)
     {
       if (_manager.Personalization.CanEnterSharedScope && 
           _manager.Personalization.Scope == 
             PersonalizationScope.User)
           _manager.Personalization.ToggleScope();
     }
   </script>
   <div>
     <asp:Panel ID="Panel1"  
       Borderwidth="1" 
       Width="230" 
       BackColor="lightgray"
       Font-Names="Verdana, Arial, Sans Serif" >
       <asp:Label ID="Label1"  
         Text="&nbsp;Display Mode" 
         Font-Bold="true"
         Font-Size="8"
         Width="120" />
       <asp:DropDownList ID="DisplayModeDropdown"   
         AutoPostBack="true" 
         Width="120"
         OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
       <asp:LinkButton ID="LinkButton1" 
         Text="Reset User State" 
         ToolTip="Reset the current user's personalization data for 
         the page."
         Font-Size="8" 
         OnClick="LinkButton1_Click" />
       <asp:Panel ID="Panel2"  
         GroupingText="Personalization Scope"
         Font-Bold="true"
         Font-Size="8" 
         Visible="false" >
         <asp:RadioButton ID="RadioButton1"  
           Text="User" 
           AutoPostBack="true"
           GroupName="Scope" 
           OnCheckedChanged="RadioButton1_CheckedChanged" />
         <asp:RadioButton ID="RadioButton2"  
           Text="Shared" 
           AutoPostBack="true"
           GroupName="Scope" 
           OnCheckedChanged="RadioButton2_CheckedChanged" />
       </asp:Panel>
     </asp:Panel>
   </div>
   

6. 파일을 저장합니다.

   참고:
   이 사용자 정의 컨트롤을 통해 웹 파트 페이지 사용자가 공유 모드와 사용자 개인 설정 모드 사이를 전환할 수 있지만 개인 설정 기능을 사용하려면 사용자에게 Web.config 파일에 지정된 적절한 권한이 있어야 합니다. 이 연습에서는 이러한 권한을 부여하는 방법을 보여 주지 않으므로 이 기능이 사용되지 않습니다. 따라서 페이지를 실행할 때 사용자 정의 컨트롤의 사용자 및 공유 라디오 단추가 표시되지 않습니다. 개인 설정에 대한 자세한 내용은 웹 파트 개인 설정을 참조하십시오.

사용자가 레이아웃을 변경할 수 있게 하려면

1. WebPartsDemo.aspx 페이지를 엽니다.

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

3. 삽입 지점을 앞서 추가한 WebPartManager 컨트롤 바로 뒤에 놓습니다. Enter 키를 눌러 WebPartManager 컨트롤 뒤에 빈 줄을 만듭니다.

4. 방금 만든 사용자 정의 컨트롤(DisplayModeMenu.ascx)을 WebPartsDemo.aspx 페이지로 끌어와 빈 줄에 놓습니다.

5. 도구 상자의 WebParts 탭에서 EditorZone 컨트롤을 WebPartsDemo.aspx 페이지의 열려 있는 나머지 표 셀로 끌어 옵니다.

6. 도구 상자의 WebParts 탭에서 AppearanceEditorPart 컨트롤 및 LayoutEditorPart 컨트롤을 EditorZone 컨트롤로 끌어 옵니다.

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

   표 셀의 나머지 코드는 다음 코드와 같아야 합니다.

   <td valign="top">
     <asp:EditorZone ID="EditorZone1" >
       <ZoneTemplate>
         <asp:AppearanceEditorPart ID="AppearanceEditorPart1" 
            />
         <asp:LayoutEditorPart ID="LayoutEditorPart1"  />
       </ZoneTemplate>
     </asp:EditorZone>
   </td> 
   

   참고:
   AppearanceEditorPart 및 LayoutEditorPart 컨트롤은 이 연습에서 사용되지만 BehaviorEditorPart 및 PropertyGridEditorPart 컨트롤은 이 연습 범위를 벗어난 설정이 필요하기 때문에 사용되지 않습니다.

8. WebPartsDemo.aspx 파일을 저장합니다.

디스플레이 모드 및 페이지 레이아웃을 변경할 수 있게 해주는 사용자 정의 컨트롤을 만들었으며 기본 웹 페이지에서 이 컨트롤을 참조했습니다.

이제 페이지를 편집하고 레이아웃을 변경하는 기능을 테스트할 수 있습니다.

레이아웃 변경 내용을 테스트하려면

1. 브라우저에서 페이지를 로드합니다.

2. 디스플레이 모드 메뉴에서 편집을 클릭합니다.

   영역 제목이 표시됩니다.

3. Sidebar 영역에서 My Links 컨트롤의 제목 표시줄을 Main 영역의 아래쪽으로 끌어 옵니다.

   페이지는 다음과 같습니다.

   My Links 컨트롤이 이동된 웹 파트 데모 페이지
   

4. 디스플레이 모드를 클릭한 다음 찾아보기를 클릭합니다.

   페이지가 새로 고쳐지고 영역 이름이 사라지며 My Links 컨트롤이 배치된 위치에 남아 있습니다.

5. 개인 설정이 실행되는지 확인하려면 브라우저를 닫고 페이지를 다시 로드합니다. 이후 브라우저 세션을 위해 변경 내용이 저장됩니다.

6. 디스플레이 모드 메뉴에서 편집을 클릭합니다.

   이제 페이지에 있는 각 컨트롤의 제목 표시줄에 아래쪽 화살표가 표시되고 동사 드롭다운 메뉴가 포함됩니다.

7. 화살표를 클릭하여 My Links 컨트롤의 동사 메뉴를 표시한 다음 편집을 클릭합니다.

   EditorZone 컨트롤이 나타나고 추가된 EditorPart 컨트롤을 표시합니다.

8. 편집 컨트롤의 모양 섹션에서 제목을 My Favorites로 변경합니다. 크롬 유형 목록에서 제목만을 선택한 다음 적용을 클릭합니다.

   다음 스크린 샷에서는 편집 모드의 페이지를 보여 줍니다.

   편집 모드의 웹 파트 데모 페이지
   

9. 디스플레이 모드 메뉴를 클릭하고 찾아보기를 클릭하여 찾아보기 모드로 돌아갑니다.

   다음 스크린 샷과 같이 이제 컨트롤에 업데이트된 제목이 표시되고 테두리가 없습니다.

   편집된 웹 파트 데모 페이지
   

런타임 시 웹 파트 추가

사용자가 런타임에 웹 파트 컨트롤을 페이지에 추가할 수 있도록 설정할 수도 있습니다. 이렇게 하려면 사용자에게 제공할 웹 파트 컨트롤 목록이 포함된 웹 파트 카탈로그를 사용하여 페이지를 구성합니다.

참고:
이 연습에서는 FileUpload 및 Calendar 컨트롤이 포함된 템플릿을 만듭니다. 이렇게 하면 카탈로그의 기본 기능을 테스트할 수 있지만 결과로 생성된 웹 파트 컨트롤에 실제 기능이 없습니다. 사용자 지정 웹 컨트롤이나 사용자 정의 컨트롤이 있으면 정적 콘텐츠를 대체할 수 있습니다.

사용자가 런타임 시 웹 파트를 추가할 수 있게 하려면

1. WebPartsDemo.aspx 페이지를 엽니다.

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

3. 도구 상자의 WebParts 탭에서 CatalogZone 컨트롤을 표의 오른쪽 열, EditorZone 컨트롤 아래로 끌어 옵니다.

   두 컨트롤은 동시에 표시되지 않으므로 동일한 표 셀에 포함될 수 있습니다.

4. 속성 창에서 CatalogZone 컨트롤의 HeaderText 속성에 Add Web Parts 문자열을 할당합니다.

5. 도구 상자의 WebParts 탭에서 DeclarativeCatalogPart 컨트롤을 CatalogZone 컨트롤의 콘텐츠 영역으로 끌어 옵니다.

6. DeclarativeCatalogPart 컨트롤의 오른쪽 위에 있는 화살표를 클릭하여 작업 메뉴를 표시하고 템플릿 편집을 선택합니다.

7. 도구 상자의 표준 탭에서 FileUpload 컨트롤 및 Calendar 컨트롤을 DeclarativeCatalogPart 컨트롤의 WebPartsTemplate 섹션으로 끌어 옵니다.

8. 소스 뷰로 전환하고 asp:catalogzone 요소의 소스 코드를 검사합니다.

   카탈로그에서 페이지에 추가할 수 있는 두 개의 서버 컨트롤이 괄호로 묶여 있는 webpartstemplate 요소가 DeclarativeCatalogPart 컨트롤에 포함되어 있습니다.

   참고:
   사용자 지정 컨트롤이 있으면 여기서 예제에 사용된 서버 컨트롤 중 하나를 대체할 수 있습니다. 그러나 이 작업을 수행하려면 이 연습 범위를 벗어난 단계가 필요합니다. 자세한 내용은 WebPart 클래스에 대한 설명서의 코드 예제를 참조하십시오.

9. 아래 코드 예제에서 각 제목에 대해 표시된 문자열 값을 사용하여 카탈로그에 추가한 각 컨트롤에 Title 속성을 추가합니다. 제목은 디자인 타임에 이러한 두 서버 컨트롤에 설정할 수 있는 일반적인 속성이 아니지만 사용자가 런타임 시 카탈로그에서 이러한 컨트롤을 WebPartZone 영역에 추가하면 각각 GenericWebPart 컨트롤에 래핑되어 서버 컨트롤이 웹 파트 컨트롤로 실행되므로 제목을 표시할 수 있습니다.

   DeclarativeCatalogPart 컨트롤에 포함된 두 컨트롤의 코드는 다음과 같아야 합니다.

   <asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" 
     >
     <WebPartsTemplate>
       <asp:Calendar ID="Calendar1" 
   
         title="My Calendar" />
       <asp:FileUpload ID="FileUpload1" 
   
         title="Upload Files" />
     </WebPartsTemplate>
   </asp:DeclarativeCatalogPart>
   

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

이제 카탈로그를 테스트할 수 있습니다.

웹 파트 카탈로그를 테스트하려면

1. 브라우저에서 페이지를 로드합니다.

2. 디스플레이 모드 메뉴에서 카탈로그를 클릭합니다.

   Add Web Parts라는 제목의 카탈로그가 표시됩니다.

3. My Favorites 컨트롤을 Main 영역에서 다시 Sidebar 영역의 맨 위로 끌어 옵니다.

4. Add Web Parts 카탈로그에서 두 확인란을 모두 선택한 다음 사용 가능한 영역의 목록에서 Main을 선택합니다.

5. 카탈로그에서 추가를 클릭합니다.

   컨트롤이 Main 영역에 추가됩니다. 필요한 경우 카탈로그에서 여러 개의 컨트롤 인스턴스를 페이지에 추가할 수 있습니다. 다음 스크린 샷에서는 Main 영역에 파일 업로드 컨트롤과 달력이 추가된 페이지를 보여 줍니다.

   카탈로그에서 Main 영역에 추가된 컨트롤
   

6. 디스플레이 모드 메뉴에서 찾아보기를 클릭합니다.

   카탈로그가 사라지고 페이지가 새로 고쳐집니다.

7. 브라우저를 닫은 다음 페이지를 다시 로드합니다.

   변경 내용이 유지됩니다.

다음 단계

이 연습에서는 ASP.NET 웹 페이지에서 간단한 웹 파트 컨트롤을 사용하는 기본 원칙애 대해 설명했습니다. 보다 복잡한 추가 웹 파트 기능을 테스트해 볼 수도 있습니다. 다음과 같은 추가 설명을 따르는 것이 좋습니다.

• 이 연습의 정적 웹 파트보다 복잡한 기능을 제공하는 웹 파트 컨트롤을 만듭니다. 웹 파트 컨트롤을 사용자 정의 컨트롤이나 사용자 지정 컨트롤로 만들 수 있습니다. 자세한 내용은 WebPart 클래스에 대한 설명서를 참조하십시오.

참고 항목

작업

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

개념

ASP.NET 웹 파트 개요

참조

웹 파트 컨트롤 설정 개요

WebPart