웹사이트 어떤 메뉴가 자주 클릭되는지

주요 콘텐츠로 건너뛰기

이 브라우저는 더 이상 지원되지 않습니다.

최신 기능, 보안 업데이트, 기술 지원을 이용하려면 Microsoft Edge로 업그레이드하세요.

프로필, 테마 및 웹 파트

• 아티클
• 09/23/2022
• 읽는 데 81분 걸림

이 문서의 내용

작성 자: Microsoft

ASP.NET 2.0에서는 구성 및 계측에 큰 변화가 있습니다. 새 ASP.NET 구성 API를 사용하면 구성을 프로그래밍 방식으로 변경할 수 있습니다. 또한 많은 새 구성 설정이 존재하여 새 구성 및 계측을 허용합니다.

ASP.NET 2.0은 개인 설정된 웹 사이트의 영역에서 상당한 개선을 나타냅니다. 이미 다룬 멤버 자격 기능 외에도 ASP.NET 프로필, 테마 및 웹 파트는 웹 사이트의 개인 설정을 크게 향상시킵니다.

ASP.NET 프로필

ASP.NET 프로필은 세션과 비슷합니다. 차이점은 프로필이 영구적이지만 브라우저를 닫을 때 세션이 손실된다는 것입니다. 세션과 프로필 간의 또 다른 큰 차이점은 프로필이 강력한 형식이므로 개발 프로세스 중에 IntelliSense를 제공한다는 점입니다.

프로필은 컴퓨터 구성 파일 또는 애플리케이션에 대한 web.config 파일에 정의됩니다. 하위 폴더 web.config 파일에서는 프로필을 정의할 수 없습니다. 아래 코드는 웹 사이트 방문자의 이름과 성을 저장하는 프로필을 정의합니다.

<profile>
    <properties>
        <add name="FirstName" />
        <add name="LastName" />
    </properties>
</profile>

프로필 속성의 기본 데이터 형식은 System.String입니다. 위의 예제에서는 데이터 형식이 지정되지 않았습니다. 따라서 FirstName 및 LastName 속성은 모두 String 형식입니다. 앞에서 설명한 것처럼 프로필 속성은 강력한 형식입니다. 아래 코드는 Int32 형식인 연령에 대한 새 속성을 추가합니다.

<profile>
    <properties>
        <add name="FirstName" />
        <add name="LastName" />
        <add name="Age" type="Int32"/>
    </properties>
</profile>

프로필은 일반적으로 ASP.NET Forms 인증에 사용됩니다. Forms 인증과 함께 사용할 경우 각 사용자에게는 사용자 ID와 연결된 별도의 프로필이 있습니다. 그러나 아래와 같이 allowAnonymous 특성과 함께 구성 파일의 anonymousIdentification> 요소를 사용하여 <익명 애플리케이션에서 프로필을 사용하도록 허용할 수도 있습니다.

<anonymousIdentification enabled="true" />
<profile>
    <properties>
        <add name="FirstName" allowAnonymous="true" />
        <add name="LastName" allowAnonymous="true" />
    </properties>
</profile>

익명 사용자가 사이트를 탐색할 때 ASP.NET 사용자에 대한 ProfileCommon 인스턴스를 만듭니다. 이 프로필은 브라우저의 쿠키에 저장된 고유 ID를 사용하여 사용자를 고유한 방문자로 식별합니다. 이러한 방식으로 익명으로 검색하는 사용자의 프로필 정보를 저장할 수 있습니다.

프로필 그룹

프로필의 속성을 그룹화할 수 있습니다. 속성을 그룹화하면 특정 애플리케이션에 대한 여러 프로필을 시뮬레이션할 수 있습니다.

다음 구성에서는 두 그룹에 대해 FirstName 및 LastName 속성을 구성합니다. 구매자 및 잠재 고객.

<profile>
    <properties>
        <group name="Buyers">
            <add name="FirstName" />
            <add name="Lastname" />
            <add name="NumberOfPurchases" type="Int32" />
        </group>
        <group name="Prospects">
            <add name="FirstName" />
            <add name="Lastname" />
        </group>
    </properties>
</profile>

그런 다음, 다음과 같이 특정 그룹의 속성을 설정할 수 있습니다.

Profile.Buyers.NumberOfPurchases += 1;

복합 개체 저장

지금까지 설명한 예제에서는 간단한 데이터 형식을 프로필에 저장했습니다. serializeAs 특성을 사용하여 serialization 메서드를 다음과 같이 지정하여 프로필에 복잡한 데이터 형식을 저장할 수도 있습니다.

<add name="PurchaseInvoice"
     type="PurchaseInvoice"
     serializeAs="Binary"
/>

이 경우 형식은 PurchaseInvoice입니다. PurchaseInvoice 클래스는 serializable로 표시되어야 하며 여러 속성을 포함할 수 있습니다. 예를 들어 PurchaseInvoice에 NumItemsPurchased라는 속성이 있는 경우 코드에서 다음과 같이 해당 속성을 참조할 수 있습니다.

Profile.PurchaseInvoice.NumItemsPurchased

프로필 상속

여러 애플리케이션에서 사용할 프로필을 만들 수 있습니다. ProfileBase에서 파생되는 프로필 클래스를 만들면 아래와 같이 상속 특성을 사용하여 여러 애플리케이션에서 프로필을 다시 사용할 수 있습니다.

<profile inherits="PurchasingProfile" />

이 경우 PurchasingProfile 클래스는 다음과 같습니다.

using System;
using System.Web.Profile;
public class PurchasingProfile : ProfileBase {
    private string _ProductName;
    private Int32 _ProductID;
    public string ProductName {
        get { return _ProductName; }
        set { _ProductName = value; }
    }
    public Int32 ProductID {
        get { return _ProductID; }
        set { _ProductID = value; }
    }
}

프로필 공급자

ASP.NET 프로필은 공급자 모델을 사용합니다. 기본 공급자는 SqlProfileProvider 공급자를 사용하여 웹 애플리케이션의 App_Data 폴더에 있는 SQL Server Express 데이터베이스에 정보를 저장합니다. 데이터베이스가 없으면 프로필에서 정보를 저장하려고 할 때 ASP.NET 자동으로 데이터베이스를 만듭니다.

그러나 경우에 따라 사용자 고유의 프로필 공급자를 개발하는 것이 좋습니다. ASP.NET 프로필 기능을 사용하면 다양한 공급자를 쉽게 사용할 수 있습니다.

다음과 같은 경우 사용자 지정 프로필 공급자를 만듭니다.

• .NET Framework 포함된 프로필 공급자가 지원하지 않는 FoxPro 데이터베이스 또는 Oracle 데이터베이스와 같은 데이터 원본에 프로필 정보를 저장해야 합니다.
• .NET Framework 포함된 공급자가 사용하는 데이터베이스 스키마와 다른 데이터베이스 스키마를 사용하여 프로필 정보를 관리해야 합니다. 일반적인 예는 프로필 정보를 기존 SQL Server 데이터베이스의 사용자 데이터와 통합하려는 것입니다.

필수 클래스

프로필 공급자를 구현하려면 System.Web.Profile.ProfileProvider 추상 클래스를 상속하는 클래스를 만듭니다. ProfileProvider 추상 클래스는 System.Configuration.Provider.ProviderBase 추상 클래스를 상속하는 System.Configuration.SettingsProvider 추상 클래스를 상속합니다. 이 상속 체인으로 인해 ProfileProvider 클래스의 필수 멤버 외에도 SettingsProvider 및 ProviderBase 클래스의 필수 멤버를 구현해야 합니다.

다음 표에서는 ProviderBase, SettingsProvider 및 ProfileProvider 추상 클래스에서 구현해야 하는 속성 및 메서드에 대해 설명합니다.

ProviderBase 멤버

SettingsProvider 멤버

ProfileProvider 멤버

ApplicationName

프로필 공급자는 각 애플리케이션에 대한 프로필 정보를 별도로 저장하므로 데이터 스키마에 애플리케이션 이름이 포함되고 쿼리 및 업데이트에 애플리케이션 이름도 포함되는지 확인해야 합니다. 예를 들어 다음 명령은 사용자 이름 및 프로필이 익명인지 여부에 따라 데이터베이스에서 속성 값을 검색하고 ApplicationName 값이 쿼리에 포함되도록 하는 데 사용됩니다.

SELECT Property
FROM PropertyTable
WHERE Username = 'user1'
AND IsAnonymous = False
AND ApplicationName = 'MyApplication'

ASP.NET 테마

ASP.NET 2.0 테마란?

웹 애플리케이션의 가장 중요한 측면 중 하나는 사이트 전체에서 일관된 모양과 느낌입니다. ASP.NET 1.x 개발자는 일반적으로 CSS(CSS 스타일시트)를 사용하여 일관된 모양과 느낌을 구현합니다. ASP.NET 2.0 테마는 ASP.NET 개발자에게 HTML 요소뿐만 아니라 ASP.NET 서버 컨트롤의 모양을 정의하는 기능을 제공하므로 CSS에서 크게 향상됩니다. ASP.NET 테마는 개별 컨트롤, 특정 웹 페이지 또는 전체 웹 애플리케이션에 적용할 수 있습니다. 테마는 CSS 파일, 선택적 스킨 파일 및 이미지가 필요한 경우 선택적 이미지 디렉터리의 조합을 사용합니다. 스킨 파일은 ASP.NET 서버 컨트롤의 시각적 모양을 제어합니다.

테마 저장 위치

테마가 저장되는 위치는 해당 범위에 따라 다릅니다. 애플리케이션에 적용할 수 있는 테마는 다음 폴더에 저장됩니다.

C:\WINDOWS\Microsoft.NET\Framework\v2.x.xxxxx\ASP.NETClientFiles\Themes\<Theme_Name>

특정 애플리케이션과 관련된 테마는 웹 사이트의 루트에 있는 디렉터리에 저장 App\_Themes\<Theme\_Name> 됩니다.

참고

스킨 파일은 모양에 영향을 주는 서버 컨트롤 속성만 수정해야 합니다.

전역 테마는 웹 서버에서 실행되는 모든 애플리케이션 또는 웹 사이트에 적용할 수 있는 테마입니다. 이러한 테마는 기본적으로 ASP에 저장됩니다. v2.x.xxxxx 디렉터리 내에 있는 NETClientfiles\Themes 디렉터리입니다. 또는 웹 사이트의 루트에 있는 aspnet_client/system_web/[version]/Themes/[theme_name] 폴더로 테마 파일을 이동할 수 있습니다.

애플리케이션별 테마는 파일이 있는 애플리케이션에만 적용할 수 있습니다. 이러한 파일은 웹 사이트의 루트에 있는 디렉터리에 저장 App\_Themes/<theme\_name> 됩니다.

테마의 구성 요소

테마는 하나 이상의 CSS 파일, 선택적 스킨 파일 및 선택적 이미지 폴더로 구성됩니다. CSS 파일은 원하는 이름(예: default.css 또는 theme.css 등)일 수 있으며 테마 폴더의 루트에 있어야 합니다. CSS 파일은 특정 선택기에 대한 일반 CSS 클래스 및 특성을 정의하는 데 사용됩니다. 페이지 요소에 CSS 클래스 중 하나를 적용하기 위해 CSSClass 속성이 사용됩니다.

스킨 파일은 ASP.NET 서버 컨트롤에 대한 속성 정의를 포함하는 XML 파일입니다. 아래에 나열된 코드는 예제 스킨 파일입니다.

<asp:TextBox runat="server"
    BackColor="#FFC080"
    BorderColor="Black"
    BorderStyle="Solid"
    BorderWidth="1px"
    Font-Names="Tahoma, Verdana, Arial"
    Font-Size="Smaller" />

<asp:Button runat="server"
    BackColor="#C04000"
    BorderColor="Maroon"
    BorderStyle="Solid"
    BorderWidth="2px"
    Font-Names="Tahoma,Verdana,Arial"
    Font-Size="Smaller"
    ForeColor="#FFFFC0" />

아래 그림 1은 테마를 적용하지 않고 탐색한 작은 ASP.NET 페이지를 보여줍니다. 그림 2 에는 테마가 적용된 동일한 파일이 표시됩니다. 배경색 및 텍스트 색은 CSS 파일을 통해 구성됩니다. 단추와 텍스트 상자의 모양은 위에 나열된 스킨 파일을 사용하여 구성됩니다.

그림 1: 테마 없음

그림 2: 적용된 테마

위에 나열된 스킨 파일은 모든 TextBox 컨트롤 및 단추 컨트롤의 기본 스킨을 정의합니다. 즉, 페이지에 삽입된 모든 TextBox 컨트롤과 단추 컨트롤이 이 모양에 적용됩니다. 컨트롤의 SkinID 속성을 사용하여 이러한 컨트롤의 특정 인스턴스에 적용할 수 있는 스킨 을 정의할 수도 있습니다.

아래 코드는 Button 컨트롤의 스킨을 정의합니다. goButton의 SkinID 속성이 있는 Button 컨트롤만 스킨의 모양을 사용합니다.

<asp:Button runat="server"
    BackColor="#C04000"
    BorderColor="Maroon"
    BorderStyle="Solid"
    BorderWidth="2px"
    Font-Names="Tahoma,Verdana,Arial"
    Font-Size="Smaller"
    ForeColor="#FFFFC0"
    Text=go
    SkinID=goButton
    Width="95px" />

서버 컨트롤 유형당 하나의 기본 스킨만 사용할 수 있습니다. 추가 스킨이 필요한 경우 SkinID 속성을 사용해야 합니다.

페이지에 테마 적용

테마는 다음 방법 중 하나를 사용하여 적용할 수 있습니다.

• <web.config 파일의 pages> 요소에서
• @Page 페이지의 지시문에서
• 프로그래밍 방식

구성 파일에서 테마 적용

애플리케이션 구성 파일에서 테마를 적용하려면 다음 구문을 사용합니다.

<system.web>
    <pages theme="CoolTheme" />
    ...
</system.web>

여기에 지정된 테마 이름은 테마 폴더의 이름과 일치해야 합니다. 이 폴더는 이 과정의 앞부분에서 언급한 위치 중 하나에 있을 수 있습니다. 존재하지 않는 테마를 적용하려고 하면 구성 오류가 발생합니다.

페이지 지시문에 테마 적용

@Page 지시문에서 테마를 적용할 수도 있습니다. 이 메서드를 사용하면 특정 페이지에 테마를 사용할 수 있습니다.

지시문에 테마를 @Page 적용하려면 다음 구문을 사용합니다.

<%@ Page Language="C#" Theme=CoolTheme CodeFile="Default.aspx.cs" ... %>

다시 한번 여기에 지정된 테마는 앞에서 설명한 테마 폴더와 일치해야 합니다. 존재하지 않는 테마를 적용하려고 하면 빌드 오류가 발생합니다. 또한 Visual Studio는 특성을 강조 표시하고 이러한 테마가 없음을 알립니다.

프로그래밍 방식으로 테마 적용

프로그래밍 방식으로 테마를 적용 하려면 Page_PreInit 메서드에서 페이지에 대 한 테마 속성을 지정 해야 합니다.

프로그래밍 방식으로 테마를 적용하려면 다음 구문을 사용합니다.

Page.Theme = CoolTheme;

페이지 수명 주기로 인해 PreInit 메서드에서 테마를 적용해야 합니다. 해당 시점 이후에 적용하면 페이지 테마가 런타임에 이미 적용되고 해당 시점의 변경 내용이 수명 주기에 너무 늦습니다. 존재하지 않는 테마를 적용하면 HttpException 이 발생합니다. 테마가 프로그래밍 방식으로 적용되면 서버 컨트롤에 SkinID 속성이 지정된 경우 빌드 경고가 발생합니다. 이 경고는 선언적으로 적용되는 테마가 없으며 무시될 수 있음을 알리기 위한 것입니다.

연습 1: 테마 적용

이 연습에서는 웹 사이트에 ASP.NET 테마를 적용합니다.

중요

Microsoft Word를 사용하여 스킨 파일에 정보를 입력하는 경우 일반 따옴표를 스마트 따옴표로 대체하지 않는지 확인합니다. 스마트 따옴표는 스킨 파일에 문제를 일으킬 것입니다.

1. 새 ASP.NET 웹 사이트 만들기

2. 솔루션 탐색기 프로젝트를 마우스 오른쪽 단추로 클릭하고 새 항목 추가를 선택합니다.

3. 파일 목록에서 웹 구성 파일을 선택하고 추가를 클릭합니다.

4. 솔루션 탐색기 프로젝트를 마우스 오른쪽 단추로 클릭하고 새 항목 추가를 선택합니다.

5. 스킨 파일을 선택하고 추가를 클릭합니다.

6. 파일을 App_Themes 폴더 내에 배치할지 묻는 메시지가 표시되면 예를 클릭합니다.

7. 솔루션 탐색기 App_Themes 폴더 내의 SkinFile 폴더를 마우스 오른쪽 단추로 클릭하고 새 항목 추가를 선택합니다.

8. 파일 목록에서 스타일시트를 선택하고 추가를 클릭합니다. 이제 새 테마를 구현하는 데 필요한 모든 파일이 있습니다. 그러나 Visual Studio는 테마 폴더 SkinFile의 이름을 지정했습니다. 해당 폴더를 마우스 오른쪽 단추로 클릭하고 이름을 CoolTheme으로 변경합니다.

9. SkinFile.skin 파일을 열고 파일의 끝에 다음 코드를 추가합니다.

   <asp:TextBox runat="server"
       BackColor="#FFC080"
       BorderColor="Black"
       BorderStyle="Solid"
       BorderWidth="1px"
       Font-Names="Tahoma, Verdana, Arial"
       Font-Size="Smaller"
   />
   
   <asp:Button runat="server"
       BackColor="#C04000"
       BorderColor="Maroon"
       BorderStyle="Solid"
       BorderWidth="2px"
       Font-Names="Tahoma,Verdana,Arial"
       Font-Size="Smaller"
       ForeColor="#FFFFC0"
   />
   
   <asp:Button runat="server"
       BackColor="#C04000"
       BorderColor="Maroon"
       BorderStyle="Solid"
       BorderWidth="2px"
       Font-Names="Tahoma,Verdana,Arial"
       Font-Size="Smaller"
       ForeColor="#FFFFC0"
       Text="go"
       SkinID="goButton"
       Width="95px"
   />
   

10. SkinFile.skin 파일을 저장합니다.

11. StyleSheet.css를 엽니다.

12. 그 안에 있는 모든 텍스트를 다음으로 바꿉다.

    body {
        background-color: #FFDEAD;
    }
    

13. StyleSheet.css 파일을 저장합니다.

14. Default.aspx 페이지를 엽니다.

15. TextBox 컨트롤과 단추 컨트롤을 추가합니다.

16. 페이지를 저장합니다. 이제 Default.aspx 페이지를 찾습니다. 일반 웹 양식으로 표시되어야 합니다.

17. Web.config 파일을 엽니다.

18. 여 <system.web> 는 태그 바로 아래에 다음을 추가합니다.

    <pages theme="CoolTheme" />
    

19. web.config 파일을 저장합니다. 이제 Default.aspx 페이지를 찾습니다. 테마가 적용된 상태에서 표시되어야 합니다.

20. 아직 열려 있지 않은 경우 Visual Studio에서 Default.aspx 페이지를 엽니다.

21. 단추를 선택합니다.

22. SkinID 속성을 goButton으로 변경합니다. Visual Studio는 단추 컨트롤에 유효한 SkinID 값이 포함된 드롭다운을 제공합니다.

23. 페이지를 저장합니다. 이제 브라우저에서 페이지를 다시 미리 봅니다. 단추는 이제 "이동"을 말해야 하며 모양이 넓어야 합니다.

SkinID 속성을 사용하면 특정 유형의 서버 컨트롤 인스턴스에 대해 다른 스킨을 쉽게 구성할 수 있습니다.

StyleSheetTheme 속성

지금까지 테마 속성을 사용하여 테마를 적용하는 방법에 대해서만 설명했습니다. Theme 속성을 사용하는 경우 스킨 파일은 서버 컨트롤에 대한 선언적 설정을 재정의합니다. 예를 들어 연습 1에서 단추 컨트롤에 대해 "goButton"의 SkinID를 지정하고 단추의 텍스트를 "go"로 변경했습니다. 디자이너에서 단추의 Text 속성이 "Button"으로 설정되었지만 테마가 이를 오버로드한 것을 확인할 수 있습니다. 테마는 항상 디자이너의 모든 속성 설정을 재정의합니다.

디자이너에 지정된 속성을 사용하여 테마의 스킨 파일에 정의된 속성을 재정의하려면 Theme 속성 대신 StyleSheetTheme 속성을 사용할 수 있습니다. StyleSheetTheme 속성은 Theme 속성과 같이 모든 명시적 속성 설정을 재정의하지 않는다는 점을 제외하고 Theme 속성과 동일합니다.

이 동작을 확인하려면 연습 1에서 프로젝트에서 web.config 파일을 열고 요소를 다음으로 변경 <pages> 합니다.

<pages styleSheetTheme="CoolTheme" />

이제 Default.aspx 페이지를 탐색하면 단추 컨트롤에 "Button"의 Text 속성이 다시 표시됩니다. 디자이너의 명시적 속성 설정이 goButton SkinID에 의해 설정된 Text 속성을 재정의하기 때문입니다.

테마 재정의

애플리케이션의 App_Themes 폴더에서 동일한 이름으로 테마를 적용하여 전역 테마를 재정의할 수 있습니다. 그러나 테마는 실제 재정의 시나리오에서 적용되지 않습니다. 런타임이 App_Themes 폴더에서 테마 파일을 발견하면 해당 파일을 사용하여 테마를 적용하고 전역 테마를 무시합니다.

StyleSheetTheme 속성은 재정의 가능하며 다음과 같이 코드에서 재정의할 수 있습니다.

const String THEME_NAME = "CoolTheme";
public override string StyleSheetTheme {
    get { return THEME_NAME; }
    set { Page.StyleSheetTheme = THEME_NAME; }
}

웹 파트

ASP.NET 웹 파트는 최종 사용자가 브라우저에서 직접 웹 페이지의 콘텐츠, 모양 및 동작을 수정할 수 있도록 하는 웹 사이트를 만들기 위한 통합 컨트롤 집합입니다. 수정 사항은 사이트의 모든 사용자 또는 개별 사용자에게 적용할 수 있습니다. 사용자가 페이지 및 컨트롤을 수정할 때 설정을 저장하여 이후 브라우저 세션에 걸쳐 사용자의 개인 기본 설정을 유지할 수 있습니다. 개인 설정이라는 기능입니다. 이러한 웹 파트 기능은 개발자가 개발자나 관리자의 개입 없이도 최종 사용자가 웹 애플리케이션을 동적으로 개인 설정할 수 있는 권한을 부여할 수 있음을 의미합니다.

개발자는 웹 파트 컨트롤 집합을 사용하여 최종 사용자가 다음을 수행할 수 있도록 설정할 수 있습니다.

• 페이지 콘텐츠를 개인 설정합니다. 사용자는 페이지에 새 웹 파트 컨트롤을 추가하거나, 제거하거나, 숨기거나, 일반 창처럼 최소화할 수 있습니다.
• 페이지 레이아웃을 개인 설정합니다. 사용자는 웹 파트 컨트롤을 페이지의 다른 영역으로 끌거나 모양, 속성 및 동작을 변경할 수 있습니다.
• 컨트롤을 내보내고 가져옵니다. 사용자는 다른 페이지 또는 사이트에서 사용할 웹 파트 컨트롤 설정을 가져오거나 내보낼 수 있으며, 컨트롤의 속성, 모양 및 데이터도 유지할 수 있습니다. 이렇게 하면 최종 사용자에 대한 데이터 입력 및 구성 요구가 줄어듭니다.
• 연결을 만듭니다. 사용자는 예를 들어 차트 컨트롤이 주식 시세 컨트롤의 데이터에 대한 그래프를 표시할 수 있도록 컨트롤 간에 연결을 설정할 수 있습니다. 사용자는 연결 자체뿐만 아니라 차트 컨트롤이 데이터를 표시하는 방식의 모양과 세부 정보를 개인 설정할 수 있습니다.
• 사이트 수준 설정을 관리하고 개인 설정합니다. 권한 있는 사용자는 사이트 수준 설정을 구성하고, 사이트 또는 페이지에 액세스할 수 있는 사용자를 결정하고, 컨트롤에 대한 역할 기반 액세스를 설정하는 등의 작업을 수행할 수 있습니다. 예를 들어 관리 역할의 사용자는 웹 파트 컨트롤을 모든 사용자가 공유하도록 설정하고 관리자가 아닌 사용자가 공유 컨트롤을 개인 설정하지 못하도록 할 수 있습니다.

일반적으로 웹 파트 컨트롤을 사용하는 페이지를 만들거나, 개별 웹 파트 컨트롤을 만들거나, 포털과 같은 개인 설정이 가능한 완전한 웹 애플리케이션을 만드는 세 가지 방법 중 하나로 웹 파트를 사용합니다.

페이지 개발

페이지 개발자는 Microsoft Visual Studio 2005와 같은 시각적 디자인 도구를 사용하여 웹 파트를 사용하는 페이지를 만들 수 있습니다. Visual Studio와 같은 도구를 사용할 때의 이점 중 하나는 웹 파트 컨트롤 집합이 시각적 디자이너에서 웹 파트 컨트롤을 끌어서 놓기 및 구성하기 위한 기능을 제공한다는 점입니다. 예를 들어 디자이너를 사용하여 웹 파트 영역 또는 웹 파트 편집기 컨트롤을 디자인 화면으로 끌어온 다음 웹 파트 컨트롤 집합에서 제공하는 UI를 사용하여 디자이너에서 컨트롤을 바로 구성할 수 있습니다. 이렇게 하면 웹 파트 애플리케이션의 개발 속도가 빨라지고 작성해야 하는 코드의 양이 줄어들 수 있습니다.

컨트롤 개발

표준 웹 서버 컨트롤, 사용자 지정 서버 컨트롤 및 사용자 정의 컨트롤을 포함하여 기존 ASP.NET 컨트롤을 웹 파트 컨트롤로 사용할 수 있습니다. 환경을 프로그래밍 방식으로 최대한 제어하기 위해 WebPart 클래스에서 파생되는 사용자 지정 웹 파트 컨트롤을 만들 수도 있습니다. 개별 웹 파트 컨트롤 개발의 경우 일반적으로 사용자 컨트롤을 만들어 웹 파트 컨트롤로 사용하거나 사용자 지정 웹 파트 컨트롤을 개발합니다.

사용자 지정 웹 파트 컨트롤을 개발하는 예제로, 일정, 목록, 재무 정보, 뉴스, 계산기, 콘텐츠 업데이트를 위한 풍부한 텍스트 컨트롤, 데이터베이스에 연결하는 편집 가능한 그리드 등 개인 설정 가능한 웹 파트 컨트롤로 패키지하는 데 유용할 수 있는 다른 ASP.NET 서버 컨트롤에서 제공하는 기능을 제공하는 컨트롤을 만들 수 있습니다. 디스플레이 또는 날씨 및 여행 정보를 동적으로 업데이트하는 차트입니다. 시각적 디자이너에 컨트롤을 제공하는 경우 Visual Studio를 사용하는 페이지 개발자는 추가 코드를 작성하지 않고도 컨트롤을 웹 파트 영역으로 끌어 디자인 타임에 구성할 수 있습니다.

개인 설정은 웹 파트 기능의 기초입니다. 이를 통해 사용자는 페이지에서 웹 파트 컨트롤의 레이아웃, 모양 및 동작을 수정하거나 개인 설정할 수 있습니다. 개인 설정된 설정은 수명이 오래 지속됩니다. 현재 브라우저 세션(보기 상태와 마찬가지로)뿐만 아니라 장기 스토리지에도 유지되므로 향후 브라우저 세션에 대한 사용자 설정도 저장됩니다. 개인 설정은 웹 파트 페이지에 대해 기본적으로 사용하도록 설정됩니다.

UI 구조 구성 요소는 개인 설정에 의존하며 모든 웹 파트 컨트롤에 필요한 핵심 구조 및 서비스를 제공합니다. 모든 웹 파트 페이지에 필요한 하나의 UI 구조 구성 요소는 WebPartManager 컨트롤입니다. 표시되지는 않지만 이 컨트롤에는 페이지의 모든 웹 파트 컨트롤을 조정하는 중요한 작업이 있습니다. 예를 들어 모든 개별 웹 파트 컨트롤을 추적합니다. 웹 파트 영역(페이지에 웹 파트 컨트롤이 포함된 지역) 및 어떤 컨트롤이 어떤 영역에 있는지를 관리합니다. 또한 찾아보기, 연결, 편집 또는 카탈로그 모드, 개인 설정 변경 내용이 모든 사용자 또는 개별 사용자에게 적용되는지 여부와 같이 페이지가 있을 수 있는 다양한 표시 모드를 추적하고 제어합니다. 마지막으로 웹 파트 컨트롤 간의 연결 및 통신을 시작하고 추적합니다.

두 번째 종류의 UI 구조 구성 요소는 영역입니다. 영역은 웹 파트 페이지에서 레이아웃 관리자 역할을 합니다. 파트 클래스(파트 컨트롤)에서 파생되는 컨트롤을 포함하고 구성하며 가로 또는 세로 방향으로 모듈식 페이지 레이아웃을 수행하는 기능을 제공합니다. 또한 영역은 포함된 각 컨트롤에 대해 공통적이고 일관된 UI 요소(예: 머리글 및 바닥글 스타일, 제목, 테두리 스타일, 작업 단추 등)를 제공합니다. 이러한 공통 요소를 컨트롤의 크롬이라고 합니다. 여러 특수한 유형의 영역은 다양한 디스플레이 모드 및 다양한 컨트롤에서 사용됩니다. 영역의 다양한 유형은 아래 웹 파트 필수 컨트롤 섹션에 설명되어 있습니다.

파트 클래스에서 파생되는 웹 파트 UI 컨트롤은 웹 파트 페이지의 기본 UI로 구성됩니다. 웹 파트 컨트롤 집합은 유연하고 파트 컨트롤을 만드는 데 제공하는 옵션에 포함됩니다. 사용자 지정 웹 파트 컨트롤을 만드는 것 외에도 기존 ASP.NET 서버 컨트롤, 사용자 정의 컨트롤 또는 사용자 지정 서버 컨트롤을 웹 파트 컨트롤로 사용할 수도 있습니다. 웹 파트 페이지를 만드는 데 가장 일반적으로 사용되는 필수 컨트롤은 다음 섹션에서 설명합니다.

웹 파트 필수 컨트롤

웹 파트 컨트롤 집합은 광범위하지만 일부 컨트롤은 웹 파트가 작동해야 하거나 웹 파트 페이지에서 가장 자주 사용되는 컨트롤이기 때문에 필수적입니다. 웹 파트를 사용하고 기본 웹 파트 페이지를 만들기 시작하면 다음 표에 설명된 필수 웹 파트 컨트롤을 잘 알고 있어야 합니다.

랩: 웹 파트 페이지 만들기

이 랩에서는 ASP.NET 프로필을 통해 정보를 유지하는 웹 파트 페이지를 만듭니다.

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

연습의 이 부분에서는 웹 파트 컨트롤을 사용하여 정적 콘텐츠를 표시하는 페이지를 만듭니다. 웹 파트 작업의 첫 번째 단계는 두 가지 필수 구조 요소가 있는 페이지를 만드는 것입니다. 먼저 웹 파트 페이지에는 모든 웹 파트 컨트롤을 추적하고 조정하는 WebPartManager 컨트롤이 필요합니다. 둘째, 웹 파트 페이지에는 WebPart 또는 다른 서버 컨트롤을 포함하고 페이지의 지정된 영역을 차지하는 복합 컨트롤인 하나 이상의 영역이 필요합니다.

참고

웹 파트 개인 설정을 사용하도록 설정하기 위해 아무 작업도 수행할 필요가 없습니다. 웹 파트 컨트롤 집합에 대해 기본적으로 사용하도록 설정됩니다. 사이트에서 웹 파트 페이지를 처음 실행하는 경우 ASP.NET 사용자 개인 설정 설정을 저장하도록 기본 개인 설정 공급자를 설정합니다. 개인 설정에 대한 자세한 내용은 웹 파트 개인 설정 개요를 참조하세요.

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

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

2. 디자인 보기로 전환합니다.

3. 보기 메뉴에서 UI가 없는 레이아웃 태그 및 컨트롤을 볼 수 있도록 시각적 개체가 아닌 컨트롤 및 세부 정보 옵션이 선택되어 있는지 확인합니다.

4. 디자인 화면에서 태그 앞에 <div> 삽입 지점을 놓고 Enter 키를 눌러 새 줄을 추가합니다. 새 줄 문자 앞에 삽입 포인터를 놓고 메뉴에서 [블록 서식 ] 드롭다운 목록 컨트롤을 클릭하고 제목 1 옵션을 선택합니다. 제목에 텍스트 웹 파트 데모 페이지를 추가합니다.

5. 도구 상자의 WebParts 탭에서 WebPartManager 컨트롤을 페이지로 끌어 새 줄 문자 바로 뒤와 태그 앞에 <div>배치합니다.

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

6. 태그 내에 <div> 삽입 지점을 배치합니다.

7. 레이아웃 메뉴에서 테이블 삽입을 클릭하고 행 1개와 열 3개가 있는 새 테이블을 만듭니다. 셀 속성 단추를 클릭하고 세로 맞춤 드롭다운 목록에서 위쪽을 선택하고 확인을클릭한 다음 확인을 다시 클릭하여 테이블을 만듭니다.

8. WebPartZone 컨트롤을 왼쪽 테이블 열로 끕니다. WebPartZone 컨트롤을 마우스 오른쪽 단추로 클릭하고, 속성을 선택하고, 다음 속성을 설정합니다.

   ID: SidebarZone

   HeaderText: 사이드바

9. 두 번째 WebPartZone 컨트롤을 가운데 테이블 열로 끌어다 놓고 다음 속성을 설정합니다.

   ID: MainZone

   HeaderText: Main

10. 파일을 저장합니다.

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

웹 파트 영역의 레이아웃은 zonetemplate> 요소에 <의해 지정됩니다. 영역 템플릿 내에서 사용자 지정 웹 파트 컨트롤, 사용자 정의 컨트롤 또는 기존 서버 컨트롤이든 관계없이 모든 ASP.NET 컨트롤을 추가할 수 있습니다. 여기서는 레이블 컨트롤을 사용하고 있으며 정적 텍스트를 추가하기만 하면 됩니다. WebPartZone 영역에 일반 서버 컨트롤을 배치하는 경우 ASP.NET 컨트롤을 런타임에 웹 파트 컨트롤로 처리하여 컨트롤에서 웹 파트 기능을 사용하도록 설정합니다.

주 영역에 대한 콘텐츠를 만들려면

1. 디자인 보기에서 도구 상자의 표준 탭에서 ID 속성이 MainZone으로 설정된 영역의 내용 영역으로 레이블 컨트롤을 끌어옵니다.

2. 원본 보기로 전환합니다. MainZone에서 Label 컨트롤을 <래핑하기 위해 zonetemplate> 요소가 추가되었습니다.

3. asp:label> 요소에 <제목이라는 특성을 추가하고 해당 값을 Content로 설정합니다. asp:label> 요소에서 <Text="Label" 특성을 제거합니다. asp:label> 요소의 <여는 태그와 닫는 태그 사이에 h2> 요소 태그 쌍 <내에 홈페이지 시작과 같은 일부 텍스트를 추가합니다. 코드는 다음과 같습니다.

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

4. 파일을 저장합니다.

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

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

1. 검색 컨트롤로 사용할 새 웹 사용자 컨트롤을 사이트에 추가합니다. 소스 코드를 별도의 파일에 배치하는 옵션을 선택 취소합니다. WebPartsDemo.aspx 페이지와 동일한 디렉터리에 추가하고 SearchUserControl.ascx로 이름을 지정합니다.

   참고

   이 연습의 사용자 컨트롤은 실제 검색 기능을 구현하지 않습니다. 웹 파트 기능을 보여 주는 데만 사용됩니다.

2. 디자인 보기로 전환합니다. 도구 상자의 표준 탭에서 TextBox 컨트롤을 페이지로 끌어옵니다.

3. 방금 추가한 텍스트 상자 뒤에 삽입 포인터를 놓고 Enter 키를 눌러 새 줄을 추가합니다.

4. 단추 컨트롤을 방금 추가한 텍스트 상자 아래의 새 줄 페이지로 끌어다 놓습니다.

5. 원본 보기로 전환합니다. 사용자 컨트롤의 소스 코드가 다음 예제와 같은지 확인합니다.

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

6. 파일을 저장한 후 닫습니다.

이제 사이드바 영역에 웹 파트 컨트롤을 추가할 수 있습니다. 사이드바 영역에 두 개의 컨트롤을 추가합니다. 하나는 링크 목록을 포함하고 다른 하나는 이전 절차에서 만든 사용자 컨트롤입니다. 링크는 기본 영역에 대한 정적 텍스트를 만든 방법과 유사하게 표준 레이블 서버 컨트롤로 추가됩니다. 그러나 사용자 컨트롤에 포함된 개별 서버 컨트롤은 영역(예: 레이블 컨트롤)에 직접 포함될 수 있지만 이 경우에는 포함되지 않습니다. 대신 이전 절차에서 만든 사용자 컨트롤의 일부입니다. 사용자 컨트롤에서 원하는 컨트롤과 추가 기능을 패키지한 다음 영역에서 해당 컨트롤을 웹 파트 컨트롤로 참조하는 일반적인 방법을 보여 줍니다.

런타임에 웹 파트 컨트롤 집합은 두 컨트롤을 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" runat="server"
                    headertext="Sidebar">
       <zonetemplate>
           <asp:label runat="server" id="linksPart" title="My Links">
               <a href="http://www.asp.net">ASP.NET site</a>
               <br />
               <a href="http://www.gotdotnet.com">GotDotNet</a>
               <br />
               <a href="http://www.contoso.com">Contoso.com</a>
               <br />
           </asp:label>
           <uc1:SearchUserControl id="searchPart"
             runat="server" title="Search" />
       </zonetemplate>
   </asp:WebPartZone>
   

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

이제 브라우저에서 페이지를 탐색하여 테스트할 수 있습니다. 페이지에는 두 영역이 표시됩니다. 다음 스크린샷은 페이지를 보여줍니다.

두 영역이 있는 웹 파트 데모 페이지

그림 3: 웹 파트 VS 연습 1 스크린샷

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

사용자가 페이지를 편집하고 레이아웃을 변경할 수 있도록 설정

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

연습의 이 부분에서는 사용자가 페이지에서 모든 WebPart 컨트롤의 기본 특성을 편집할 수 있는 기능을 추가합니다. 이러한 기능을 사용하도록 설정하려면 asp:editorzone> 요소 및 두 개의 편집 컨트롤과 함께 <페이지에 다른 사용자 지정 사용자 컨트롤을 추가합니다.

페이지 레이아웃을 변경할 수 있는 사용자 컨트롤을 만들려면

1. Visual Studio의 [파일 ] 메뉴에서 [새 ] 하위 메뉴를 선택하고 [파일 ] 옵션을 클릭합니다.

2. 새 항목 추가 대화 상자에서 웹 사용자 컨트롤을 선택합니다. 새 파일의 이름을 DisplayModeMenu.ascx로 지정합니다. 소스 코드를 별도의 파일에 배치하는 옵션을 선택 취소합니다.

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

4. 원본 보기로 전환합니다.

5. 새 파일에서 기존 코드를 모두 제거하고 다음 코드를 붙여넣습니다. 이 사용자 제어 코드는 페이지가 보기 또는 표시 모드를 변경할 수 있도록 하는 웹 파트 컨트롤 집합의 기능을 사용하며, 특정 디스플레이 모드에 있는 동안 페이지의 실제 모양과 레이아웃을 변경할 수도 있습니다.

   <%@ Control Language="C#" ClassName="DisplayModeMenuCS" %>
   
   <script runat="server">
   
       // 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" runat="server"
         BorderWidth="1" Width="230" BackColor="lightgray"
           Font-Names="Verdana, Arial, Sans Serif">
           <asp:Label ID="Label1" runat="server"
             Text=" Display Mode" Font-Bold="true"
               Font-Size="8" Width="120" />
           <asp:DropDownList ID="DisplayModeDropdown"
             runat="server" AutoPostBack="true" Width="120"
               OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
           <asp:LinkButton ID="LinkButton1" runat="server"
                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" runat="server"
               GroupingText="Personalization Scope" Font-Bold="true"
               Font-Size="8" Visible="false">
               <asp:RadioButton ID="RadioButton1" runat="server"
                   Text="User" AutoPostBack="true"
                   GroupName="Scope"
                   OnCheckedChanged="RadioButton1_CheckedChanged" />
               <asp:RadioButton ID="RadioButton2" runat="server"
                   Text="Shared" AutoPostBack="true"
                   GroupName="Scope"
                   OnCheckedChanged="RadioButton2_CheckedChanged" />
           </asp:Panel>
       </asp:Panel>
   </div>
   

6. 도구 모음에서 저장 아이콘을 클릭하거나 파일 메뉴에서 저장을 선택하여 파일을저장합니다.

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

1. WebPartsDemo.aspx 페이지를 열고 디자인 보기로 전환합니다.

2. 이전에 추가한 WebPartManager 컨트롤 바로 뒤에 삽입 지점을 디자인 보기에 배치합니다. WebPartManager 컨트롤 뒤의 빈 줄이 있도록 텍스트 뒤의 하드 리턴을 추가합니다. 빈 줄에 삽입 포인터를 놓습니다.

3. 방금 만든 사용자 컨트롤(파일 이름은 DisplayModeMenu.ascx)을 WebPartsDemo.aspx 페이지로 끌어 빈 줄에 놓습니다.

4. Toolbox의 WebParts 섹션에서 WebPartsDemo.aspx 페이지의 열려 있는 나머지 테이블 셀로 EditorZone 컨트롤을 끕니다.

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

6. 원본 보기로 전환합니다. 테이블 셀의 결과 코드는 다음 코드와 유사해야 합니다.

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

7. WebPartsDemo.aspx 파일을 저장합니다. 표시 모드를 변경하고 페이지 레이아웃을 변경할 수 있는 사용자 컨트롤을 만들었으며 기본 웹 페이지에서 컨트롤을 참조했습니다.

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

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

1. 브라우저에서 페이지를 로드 합니다.
2. 표시 모드 드롭다운 메뉴를 클릭하고 편집을 선택합니다. 영역 제목이 표시됩니다.
3. 사이드바 영역에서 기본 영역의 아래쪽으로 제목 표시줄로 내 링크 컨트롤을 끌어옵니다. 페이지는 다음 스크린샷과 같아야 합니다.

내 링크 컨트롤이 이동된 웹 파트 데모 페이지

그림 4: 웹 파트 VS 연습 2 스크린샷

1. 표시 모드 드롭다운 메뉴를 클릭하고 찾아보기를 선택합니다. 페이지가 새로 고쳐지고 영역 이름이 사라지고 내 링크 컨트롤이 위치를 지정한 위치로 유지됩니다.

2. 개인 설정이 작동하는지 보여 주려면 브라우저를 닫은 다음 페이지를 다시 로드합니다. 변경한 내용은 이후 브라우저 세션에 대해 저장됩니다.

3. 표시 모드 메뉴에서 편집을 선택합니다.

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

4. 화살표를 클릭하여 내 링크 컨트롤에 동사 메뉴를 표시합니다. 동사 편집 을 클릭합니다.

   추가한 EditorPart 컨트롤이 표시된 EditorZone 컨트롤이 나타납니다.

5. 편집 컨트롤의 모양 섹션에서 제목 을 내 즐겨찾기로 변경하고 Chrome 유형 드롭다운 목록을 사용하여 제목만 선택한 다음 적용을 클릭합니다. 다음 스크린샷은 편집 모드의 페이지를 보여줍니다.

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

그림 5: 웹 파트 VS 연습 3 스크린샷

1. 표시 모드 메뉴를 클릭하고 찾아보기를 선택하여 찾아보기 모드로 돌아갑니다.
2. 이제 다음 스크린샷과 같이 컨트롤에 업데이트된 제목과 테두리가 없습니다.

편집된 웹 파트 데모 페이지

그림 4: 웹 파트 VS 연습 4 스크린샷

런타임에 웹 파트 추가

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

사용자가 런타임에 웹 파트를 추가할 수 있도록 허용하려면

1. WebPartsDemo.aspx 페이지를 열고 디자인 보기로 전환합니다.

2. 도구 상자의 WebParts 탭에서 CatalogZone 컨트롤을 EditorZone 컨트롤 아래 테이블의 오른쪽 열로 끕니다.

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

3. 속성 창에서 CatalogZone 컨트롤의 HeaderText 속성에 웹 파트 추가 문자열을 할당합니다.

4. 도구 상자의 WebParts 섹션에서 DeclarativeCatalogPart 컨트롤을 CatalogZone 컨트롤의 콘텐츠 영역으로 끕니다.

5. DeclarativeCatalogPart 컨트롤의 오른쪽 위 모서리에 있는 화살표를 클릭하여 해당 작업 메뉴를 표시한 다음 템플릿 편집을 선택합니다.

6. 도구 상자의 표준 섹션에서 FileUpload 컨트롤과 일정 컨트롤을 DeclarativeCatalogPart 컨트롤의 WebPartsTemplate 섹션으로 끕니다.

7. 원본 보기로 전환합니다. asp:catalogzone> 요소의 <소스 코드를 검사합니다. DeclarativeCatalogPart 컨트롤에는 카탈로그에서 페이지에 추가할 수 있는 두 개의 묶은 서버 컨트롤이 있는 webpartstemplate> 요소가 포함되어 <있습니다.

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

   DeclarativeCatalogPart 컨트롤에 포함된 두 컨트롤에 대한 코드는 다음과 같습니다.

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

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

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

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

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

2. 표시 모드 드롭다운 메뉴를 클릭하고 카탈로그를 선택합니다.

   웹 파트 추가라는 카탈로그가 표시됩니다.

3. 기본 영역에서 사이드바 영역의 맨 위로 내 즐겨찾기 컨트롤을 다시 끌어서 놓습니다.

4. 웹 파트 추가 카탈로그에서 두 확인란을 모두 선택한 다음, 사용 가능한 영역이 포함된 드롭다운 목록에서 Main을 선택합니다.

5. 카탈로그에서 추가 를 클릭합니다. 컨트롤이 주 영역에 추가됩니다. 원하는 경우 카탈로그에서 페이지에 여러 컨트롤 인스턴스를 추가할 수 있습니다.

   다음 스크린샷은 기본 영역의 파일 업로드 컨트롤과 달력이 있는 페이지를 보여 줍니다.

그림 5: 카탈로그 6에서 주 영역에 추가된 컨트롤입니다. 표시 모드 드롭다운 메뉴를 클릭하고 찾아보기를 선택합니다. 카탈로그가 사라지고 페이지가 새로 고쳐집니다. 7. 브라우저를 닫습니다. 페이지를 다시 로드합니다. 변경한 내용이 유지됩니다.