연습: 웹 파트 페이지 만들기
업데이트: 2007년 11월
이 연습에서는 웹 파트 컨트롤을 사용하는 웹 페이지를 만들기 위한 필수 구성 요소와 작업을 단계별 실습을 통해 보여 줍니다.
대부분의 웹 응용 프로그램에서는 사용자가 보려는 콘텐츠를 직접 선택하고 정렬할 수 있게 하는 것이 좋습니다. ASP.NET 웹 파트 기능은 모듈식 콘텐츠를 제공하고 사용자가 자신이 원하는 대로 모양과 콘텐츠를 변경할 수 있는 웹 페이지를 만드는 데 필요한 컨트롤 집합으로 구성되어 있습니다. 웹 파트에 대한 일반적인 내용은 ASP.NET 웹 파트 개요를 참조하십시오. 웹 파트 컨트롤 집합의 주요 구성 요소 중 이 연습에 사용된 구성 요소에 대한 설명을 보려면 웹 파트 컨트롤 설정 개요를 참조하십시오.
이 연습에서는 사용자가 수정하거나 개인 설정할 수 있는 웹 페이지를 만드는 데 웹 파트 컨트롤을 사용합니다. 이 연습에서 수행할 작업은 다음과 같습니다.
페이지에 웹 파트 컨트롤 추가
사용자 정의 컨트롤을 만들어 웹 파트 컨트롤로 사용
사용자가 페이지의 웹 파트 컨트롤 레이아웃을 개인 설정할 수 있도록 허용
사용자가 웹 파트 컨트롤의 모양을 편집할 수 있도록 허용
사용자가 사용 가능한 웹 파트 컨트롤 카탈로그에서 선택할 수 있도록 허용
사전 요구 사항
이 연습을 완료하려면 다음과 같은 요건을 갖추어야 합니다.
사이트를 호스팅하는 컴퓨터에 IIS(인터넷 정보 서비스)가 설치 및 구성되어야 합니다. IIS 설치 및 구성에 대한 자세한 내용은 설치 프로그램에 포함된 IIS 도움말 문서를 참조하거나 Microsoft TechNet 사이트의 온라인 IIS 설명서(Internet Information Services 6.0 Technical Resources)를 참조하십시오.
개별 사용자를 식별할 수 있는 ASP.NET 웹 사이트가 있어야 합니다. 사이트가 이미 구성되어 있으면 해당 사이트를 사용하여 이 연습을 시작할 수 있습니다. 사이트가 없는 경우에는 방법: IIS 5.0 및 6.0에서 가상 디렉터리 만들기 및 구성 또는 방법: IIS 6.0에서 로컬 ASP.NET 웹 사이트 만들기 및 구성에서 가상 디렉터리나 사이트를 만드는 방법에 대한 자세한 내용을 확인하십시오.
개인 설정 공급자 및 데이터베이스가 구성되어 있어야 합니다. 웹 파트 개인 설정은 기본적으로 활성화되어 있으며 SQL 개인 설정 공급자(SqlPersonalizationProvider)와 Microsoft SQL Server Standard Edition을 함께 사용하여 개인 설정 데이터를 저장합니다. 이 연습에서는 SSE와 기본 SQL 공급자를 사용합니다. SSE가 설치되어 있으면 구성이 필요하지 않습니다. SSE는 Microsoft Visual Studio 2005를 설치할 때 옵션으로 선택하거나 무료로 다운로드할 수 있습니다. 자세한 내용은 Microsoft SQL Server 2005 Express Edition 웹 페이지를 참조하십시오. SQL Server 정식 버전을 사용하려면 ASP.NET 응용 프로그램 서비스 데이터베이스를 설치 및 구성하고 SQL 개인 설정 공급자를 구성하여 해당 데이터베이스에 연결해야 합니다. 자세한 내용은 SQL Server용 응용 프로그램 서비스 데이터베이스 만들기 및 구성을 참조하십시오. SQL 이외의 데이터베이스나 저장소 솔루션에서 사용할 사용자 지정 공급자를 만들고 구성할 수도 있습니다. 자세한 내용과 코드 예제를 보려면 멤버 자격 공급자 구현을 참조하십시오.
웹 파트를 사용하는 간단한 페이지 만들기
이 연습에서는 웹 파트를 사용하여 정적 콘텐츠를 표시하는 페이지를 만듭니다.
.gif "참고") 참고: |
|---|
웹 파트 컨트롤 집합에서는 웹 파트 개인 설정이 기본으로 활성화되므로 웹 파트 개인 설정을 사용하기 위해 특별한 작업을 수행할 필요가 없습니다. 사이트에서 웹 파트 페이지를 처음으로 실행하면 ASP.NET에서는 사용자 개인 설정을 저장할 기본 개인 설정 공급자를 구성합니다. 기본 공급자는 사이트 디렉터리의 하위 디렉터리에 만든 데이터베이스를 사용합니다. 개인 설정에 대한 자세한 내용은 웹 파트 개인 설정 개요를 참조하십시오. |
웹 페이지를 만들려면
텍스트 편집기에서 새 파일을 만든 후 다음 페이지 선언을 파일의 시작 부분에 추가합니다.
<%@ page language="VB" %><%@ page language="C#" %>다음 코드 예제와 같이 전체 페이지 구조를 만들기 위해 페이지 선언 아래에 태그를 입력합니다.
페이지에는 하나의 행과 세 개의 열이 포함된 빈 표가 있습니다. 이 표에는 나중에 추가할 웹 파트 컨트롤이 포함됩니다.
<html> <head > <title>Web Parts Page</title> </head> <body> <h1>Web Parts Demonstration Page</h1> <form id="form1"> <br /> <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>파일 이름을 WebPartsDemo.aspx로 지정하고 웹 사이트의 디렉터리에 저장합니다.
다음 단계에서는 영역을 설정합니다. 영역은 페이지의 지정된 부분을 차지하고 웹 파트 컨트롤을 포함하는 합성 컨트롤입니다.
페이지에 영역을 추가하려면
페이지에서 <form> 요소 바로 아래에 다음 예제와 같은 <asp:webpartmanager> 요소를 추가합니다.
<asp:webpartmanager id="WebPartManager1" />WebPartManager 컨트롤은 웹 파트 컨트롤을 사용하는 모든 페이지에 필요합니다.
다음 코드 예제와 같이 표에서 첫 번째 <td> 요소 내에 <asp:webpartzone> 요소를 추가하고 속성 값을 할당합니다.
<asp:webpartzone> 요소에는 <zonetemplate> 요소도 포함되어 있습니다. 웹 파트 컨트롤은 <zonetemplate> 요소 내에 배치됩니다.
<table cellspacing="0" cellpadding="0" border="0"> <tr> <td valign="top"> <asp:webpartzone id="SideBarZone" headertext="Sidebar"> <zonetemplate> </zonetemplate> </asp:webpartzone> </td>다음 코드 예제와 같이 표에서 두 번째 <td> 요소 내에 <asp:webpartzone> 요소를 추가하고 속성 값을 할당합니다.
<td valign="top"> <asp:webpartzone id="MainZone" headertext="Main"> <zonetemplate> </zonetemplate> </asp:webpartzone> </td>WebPartsDemo.aspx 파일을 저장합니다.
이제 개별적으로 제어할 수 있는 두 개의 영역이 페이지에 포함되어 있습니다. 그러나 두 영역에 모두 콘텐츠가 없으므로 다음 단계에서는 콘텐츠를 만듭니다. 이 연습에서는 정적 콘텐츠만 표시하는 웹 파트 컨트롤을 사용하여 작업합니다.
웹 파트 영역의 레이아웃은 <zonetemplate> 요소를 사용하여 지정됩니다. 영역 템플릿 내에서 사용자 지정 웹 파트 컨트롤, 사용자 정의 컨트롤 또는 기존 서버 컨트롤 등 원하는 모든 웹 서버 컨트롤을 추가할 수 있습니다. 이 연습에서는 Label 서버 컨트롤을 사용하고 이 컨트롤 내에 정적 텍스트를 추가합니다. WebPartZone 영역에 일반 ASP.NET 서버 컨트롤을 배치하는 경우 ASP.NET에서는 런타임에 이 컨트롤을 웹 파트 컨트롤로 처리하므로 표준 서버 컨트롤에서 대부분의 웹 파트 기능을 사용할 수 있습니다.
영역에 대한 콘텐츠를 만들려면
다음 코드 예제와 같이 Main 영역의 <zonetemplate> 요소 내에 일부 콘텐츠가 포함된 <asp:label> 요소를 추가합니다.
<asp:webpartzone id="MainZone" headertext="Main"> <zonetemplate> <asp:label id="contentPart" title="Content"> <h2>Welcome to My Home Page</h2> <p>Use links to visit my favorite sites!</p> </asp:label> </zonetemplate> </asp:webpartzone>WebPartsDemo.aspx 파일을 저장합니다.
텍스트 편집기에서 새 파일을 만듭니다.
이 파일에는 페이지에 웹 파트 컨트롤로 추가할 수 있는 사용자 정의 컨트롤이 포함됩니다.
다음 예제와 같이 새 파일의 맨 위에 컨트롤 선언을 추가합니다.
<%@ control language="VB" classname="SearchUserControl" %><%@ control language="C#" classname="SearchUserControl" %>참고:이 연습에 나오는 검색 컨트롤은 실제 검색 기능을 구현하지 않으며 단지 웹 파트 기능을 보여 주기 위해 사용됩니다.
컨트롤 선언 아래에 <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>다음 코드 예제와 같이 <script> 요소 아래에 텍스트 상자와 단추를 추가하여 검색 컨트롤의 UI를 제공합니다.
<asp:textbox id="inputBox"></asp:textbox> <br /> <asp:button id="searchButton" text="Search" />.gif "보안 정보")
보안 정보:이 컨트롤에는 사용자 입력을 허용하는 텍스트 상자가 있는데 이로 인해 보안 문제가 발생할 수 있습니다. 기본적으로 ASP.NET 웹 페이지에서는 사용자 입력의 유효성을 검사하여 입력에 HTML 요소나 스크립트가 포함되지 않도록 합니다. 자세한 내용은 스크립트 악용 개요를 참조하십시오.
사용하는 언어에 따라 SearchUserControlVB.ascx 또는 SearchUserControlCS.ascx로 파일 이름을 지정한 후 WebPartsDemo.aspx 페이지와 같은 디렉터리에 저장합니다.
Sidebar 영역에 두 개의 컨트롤을 추가하는데, 하나는 링크 목록이 포함된 컨트롤이고 다른 하나는 이전 절차에서 만든 사용자 정의 컨트롤입니다. 링크는 Main 영역에 대한 정적 텍스트를 만든 방법과 비슷하게 표준 Label 서버 컨트롤 하나로 추가됩니다. 그러나 사용자 정의 컨트롤에 포함된 개별 서버 컨트롤은 영역에 직접 포함될 수 있지만 여기에서는 해당되지 않습니다. 대신 이전 절차에서 만든 사용자 정의 컨트롤의 일부로 포함됩니다. 여기에서는 사용자 정의 컨트롤에 포함할 모든 컨트롤과 추가 기능을 패키지한 다음 영역에서 이 사용자 정의 컨트롤을 웹 파트 컨트롤로 참조할 수 있는 일반적인 방법을 보여 줍니다.
런타임에 ASP.NET에서 GenericWebPart 컨트롤을 사용하여 두 컨트롤을 모두 래핑합니다. GenericWebPart 컨트롤이 웹 서버 컨트롤을 래핑하면 제네릭 파트 컨트롤이 부모가 되고 부모 컨트롤의 ChildControl 속성을 통해 서버 컨트롤에 액세스할 수 있습니다. 제네릭 파트 컨트롤을 사용하면 표준 웹 서버 컨트롤의 기본 동작과 특성이 WebPart 클래스에서 파생되는 웹 파트 컨트롤과 같게 됩니다.
Sidebar 영역에 대한 콘텐츠를 만들려면
텍스트 편집기에서 WebPartsDemo.aspx 페이지를 엽니다.
페이지의 맨 위에서 페이지 선언 바로 뒤에 다음 선언을 추가하여 방금 만든 사용자 정의 컨트롤을 참조합니다.
<%@ register tagprefix="uc1" tagname="SearchUserControl" src="searchusercontrolvb.ascx" %><%@ register tagprefix="uc1" tagname="SearchUserControl" src="searchusercontrolcs.ascx" %>Sidebar 영역에 대한 <zonetemplate> 요소 내에서 여러 개의 링크가 포함된 Label 컨트롤을 추가합니다. 다음 코드 예제와 같이 이 컨트롤 아래에서 이전에 만든 사용자 정의 컨트롤을 참조합니다.
<asp:webPartZone id="SidebarZone" headertext="Sidebar"> <zonetemplate> <asp:label id="linksPart" title="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> <uc1:SearchUserControl id="searchPart" title="Search" /> </zonetemplate> </asp:WebPartZone>WebPartsDemo.aspx 파일을 저장합니다.
이제 페이지를 테스트할 수 있습니다.
페이지를 테스트하려면
브라우저에서 페이지를 로드합니다.
페이지에 두 영역이 표시됩니다. 페이지의 각 컨트롤은 제목 표시줄에 아래쪽 방향 화살표가 추가된 상태로 표시됩니다. 이 화살표에는 동사 메뉴라고 하는 드롭다운 메뉴가 포함되어 있습니다. 동사는 컨트롤 닫기, 최소화 또는 편집과 같이 서버 컨트롤에 대해 사용자가 수행할 수 있는 작업입니다. 동사 메뉴의 각 항목이 동사입니다. 다음 스크린 샷에서는 페이지를 보여 줍니다.
.gif)
컨트롤의 제목 표시줄에 있는 아래쪽 화살표를 클릭하여 동사 메뉴를 표시한 다음 최소화 링크를 클릭합니다.
컨트롤이 최소화됩니다.
동사 메뉴에서 복원을 클릭합니다.
여기에서는 웹 파트 컨트롤의 다양한 시각적 표시 상태를 보여 줍니다.
사용자가 페이지를 편집하고 레이아웃을 변경할 수 있도록 설정
사용자가 한 영역에서 다른 영역으로 웹 파트 컨트롤을 끌어 옮겨 컨트롤의 레이아웃을 변경할 수 있습니다. 모양, 레이아웃, 동작 같은 컨트롤 특징을 사용자가 편집하도록 할 수도 있습니다. 웹 파트 컨트롤 집합은 WebPart 컨트롤에 대한 기본 편집 기능을 제공합니다. 또한 이 연습에서는 수행할 수 없지만 사용자가 WebPart 컨트롤의 기능을 편집할 수 있게 하는 사용자 지정 편집기 컨트롤도 만들 수 있습니다. WebPart 컨트롤의 위치를 변경하는 것과 마찬가지로 속성을 편집하는 기능도 ASP.NET 개인 설정을 기반으로 사용자가 변경한 내용을 저장합니다.
이 연습 단계에서는 사용자가 페이지에 있는 모든 WebPart 컨트롤의 기본 특징을 편집할 수 있도록 합니다.
페이지 레이아웃을 변경할 수 있도록 하는 사용자 정의 컨트롤을 만들려면
텍스트 편집기에서 새 파일을 만들고 다음 코드를 복사하여 붙여넣습니다.
이 코드에는 페이지의 뷰나 디스플레이 모드를 변경할 수 있게 하는 웹 파트 컨트롤 집합의 기능이 사용됩니다. 이 코드를 사용하여 특정 디스플레이 모드에서 페이지의 레이아웃과 실제 모양을 변경할 수도 있습니다.
<%@ 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=" Display Mode" Font-Bold="true" Font-Size="8" Width="120" /> <div> <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" /> </div> <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=" Display Mode" Font-Bold="true" Font-Size="8" Width="120" /> <div> <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" /> </div> <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>파일 이름을 Displaymodemenu.ascx로 지정하고 다른 페이지에 사용한 것과 같은 디렉터리에 저장합니다.
사용자가 레이아웃을 변경할 수 있도록 설정하려면
WebPartsDemo.aspx 페이지에서 <register> 지시문을 추가하여 페이지에 새 사용자 정의 컨트롤을 등록합니다.
<%@ register TagPrefix="uc2" TagName="DisplayModeMenuVB" Src="DisplayModeMenu.ascx" %><%@ register TagPrefix="uc2" TagName="DisplayModeMenuCS" Src="DisplayModeMenu.ascx" %>사용자 정의 컨트롤에 대한 선언적 참조를 <asp:webpartmanager> 요소 바로 아래 추가합니다.
<uc2:DisplayModeMenuVB ID="DisplayModeMenu1" /><uc2:DisplayModeMenuCS ID="DisplayModeMenu1" />표에서 세 번째 <td> 요소 내에 <asp:editorzone> 요소를 추가합니다. 그런 다음 <zonetemplate> 요소, <asp:appearanceeditorpart> 요소 및 <asp:layouteditorpart> 요소를 추가합니다.
지금까지 작업을 마친 후의 코드는 다음 예제와 같습니다.
<td valign="top"> <asp:editorzone id="EditorZone1" > <zonetemplate> <asp:appearanceeditorpart id="AppearanceEditorPart1" /> <asp:layouteditorpart id="LayoutEditorPart1" /> </zonetemplate> </asp:editorzone> </td>참고:BehaviorEditorPart 및 PropertyGridEditorPart라는 두 개의 추가 컨트롤은 이 연습의 범위를 벗어난 설정을 필요로 하므로 여기에서 사용되지 않았습니다.
WebPartsDemo.aspx 파일을 저장합니다.
디스플레이 모드 및 페이지 레이아웃을 변경할 수 있게 해주는 사용자 정의 컨트롤을 만들었으며 기본 웹 페이지에서 이 컨트롤을 참조했습니다.
이제 페이지 편집 및 레이아웃 변경 기능을 테스트할 수 있습니다.
레이아웃 변경을 테스트하려면
브라우저에서 페이지를 로드합니다.
Display Mode 드롭다운 메뉴를 클릭한 다음 Edit을 선택합니다.
그러면 영역 제목이 표시됩니다.
Links 컨트롤의 제목 표시줄을 클릭한 후 Sidebar 영역에서 Main 영역 아래쪽으로 끕니다.
페이지는 다음 스크린 샷과 같습니다.
.gif)
Display Mode 드롭다운 메뉴를 클릭하고 Browse를 선택합니다.
페이지가 새로 고쳐지고 영역 이름이 사라지며 Links 컨트롤은 배치된 위치에 유지됩니다.
브라우저를 닫은 다음 페이지를 다시 로드합니다.
사용자가 변경한 내용이 이후 브라우저 세션을 위해 저장됩니다. 이를 통해 개인 설정이 제대로 작동하고 있음을 알 수 있습니다.
Display Mode 메뉴에서 Edit을 클릭합니다.
화살표를 클릭하여 Links 컨트롤의 동사 메뉴를 표시한 다음 Edit 동사를 클릭합니다.
EditorZone 컨트롤이 나타나고 추가한 EditorPart 컨트롤이 표시됩니다.
편집 컨트롤의 모양 영역에서 Title을 "My Favorites"로 변경하고 크롬 유형 드롭다운 목록을 사용하여 제목만을 선택한 다음 적용을 클릭합니다.
다음 스크린 샷에서는 편집 모드에서 수정된 페이지를 보여 줍니다.
.gif)
Display Mode 메뉴를 클릭하고 Browse를 선택하여 찾아보기 모드로 돌아옵니다.
이제 컨트롤에는 다음 스크린 샷과 같이 업데이트된 제목이 추가되었고 테두리가 없습니다.
.gif)
런타임에 웹 파트 추가
사용자가 런타임에 웹 파트 컨트롤을 페이지에 추가할 수 있도록 설정할 수도 있습니다. 이렇게 하려면 사용자가 선택할 수 있는 웹 파트 컨트롤 목록이 포함된 웹 파트 카탈로그로 페이지를 구성합니다.
| 참고: |
|---|
이 연습에서는 FileUpload 및 Calendar 컨트롤이 포함된 템플릿을 만듭니다. 이를 통해 카탈로그의 기본 기능을 테스트할 수 있지만 결과 웹 파트 컨트롤에는 실제 기능이 포함되지 않습니다. 사용자 지정 웹 또는 사용자 정의 컨트롤이 있는 경우에는 정적 콘텐츠 대신 이러한 컨트롤을 사용할 수 있습니다. |
사용자가 런타임에 웹 파트를 추가할 수 있게 하려면
WebPartsDemo.aspx 파일에 다음 코드를 추가합니다.
테이블의 세 번째 열 내에서 <asp:editorzone> 요소 바로 아래 <asp:catalogzone> 요소를 추가합니다.
<zonetemplate> 요소를 추가하고 이 요소 내에 <asp:declarativecatalogpart> 요소와 <webpartstemplate> 요소를 추가합니다.
<asp:fileupload> 요소와 <asp:calendar> 요소를 추가합니다.
코드는 다음 코드 예제와 같습니다.
<asp:catalogzone id="CatalogZone1" headertext="Add Web Parts"> <zonetemplate> <asp:declarativecatalogpart id="catalogpart1" Title="My Catalog"> <webPartsTemplate> <asp:fileupload id="upload1" title="Upload Files" /> <asp:calendar id="cal1" Title="Team Calendar" /> </webPartsTemplate> </asp:declarativecatalogpart> </zonetemplate> </asp:catalogzone>참고:EditorZone 및 CatalogZone 컨트롤은 동시에 표시되지 않으므로 둘 다 같은 표 셀에 있을 수 있습니다.
WebPartsDemo.aspx 파일을 저장합니다.
이제 카탈로그를 테스트할 수 있습니다.
웹 파트 카탈로그를 테스트하려면
브라우저에서 페이지를 로드합니다.
Display Mode 드롭다운 메뉴를 클릭한 다음 Catalog를 선택합니다.
Add Web Parts라는 카탈로그가 표시됩니다.
My Favorites 컨트롤을 Main 영역에서 Sidebar 영역의 맨 위로 끌어 옵니다.
Add Web Parts 카탈로그에서 두 확인란을 모두 선택한 다음 Add to 드롭다운 목록에서 Main을 선택합니다.
카탈로그에서 Add를 클릭합니다.
컨트롤이 Main 영역에 추가됩니다. 원하는 경우 카탈로그에 있는 컨트롤의 여러 인스턴스를 페이지에 추가할 수 있습니다.
다음 스크린 샷에서는 Main 영역에 파일 업로드 컨트롤과 달력이 추가된 페이지를 보여 줍니다.
.gif)
Display Mode 드롭다운 메뉴를 클릭한 다음 Browse를 선택합니다.
카탈로그가 사라지고 페이지가 새로 고쳐집니다.
브라우저를 닫습니다. 그런 다음 페이지를 다시 로드합니다.
페이지에 변경 내용이 유지됩니다.
다음 단계
이 연습에서는 ASP.NET 웹 페이지에서 간단한 웹 파트 컨트롤을 사용하는 기본 원칙에 대해 설명했습니다. 좀 더 복잡한 웹 파트 기능을 사용하여 계속 테스트할 수도 있습니다. 예를 들어, 웹 파트 컨트롤을 사용자 정의 컨트롤 또는 사용자 지정 컨트롤로 만들 수 있습니다. 자세한 내용은 WebPart 클래스에 대한 설명서를 참조하십시오.
참고 항목
작업
연습: Visual Web Developer에서 웹 파트 페이지 만들기