연습: 웹 파트 페이지에서 디스플레이 모드 변경

아티클
10/22/2014

업데이트: 2007년 11월

이 연습에서는 ASP.NET 웹 파트 페이지에서 디스플레이 모드를 변경하는 두 가지 방법과 사용자가 페이지 디스플레이 모드 간을 탐색하는 방법을 보여 줍니다. 이 연습을 통해 다음과 같은 작업 방법을 배웁니다.

웹 파트 컨트롤이 포함된 웹 페이지에서 디스플레이 모드를 변경하는 데 사용할 수 있는 사용자 정의 컨트롤 만들기
웹 파트 페이지에서 다양한 디스플레이 모드 간 전환

디스플레이 모드 및 각 디스플레이 모드를 사용하는 경우에 대한 자세한 내용은 웹 파트 페이지 디스플레이 모드를 참조하십시오.

사전 요구 사항

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

사이트를 호스팅하는 컴퓨터에 IIS(인터넷 정보 서비스)가 설치 및 구성되어야 합니다. IIS 설치 및 구성에 대한 자세한 내용은 설치 프로그램에 포함된 IIS 도움말 문서를 참조하거나 Microsoft TechNet 사이트의 온라인 IIS 설명서(Internet Information Services 6.0 Technical Resources)를 참조하십시오.
개별 사용자를 식별할 수 있는 ASP.NET 웹 사이트가 있어야 합니다. 사이트가 이미 구성되어 있으면 해당 사이트를 사용하여 이 연습을 시작할 수 있습니다. 사이트가 없는 경우에는 방법: IIS 5.0 및 6.0에서 가상 디렉터리 만들기 및 구성에서 가상 디렉터리나 사이트를 만드는 방법에 대한 자세한 내용을 확인하십시오.
개인 설정 공급자 및 데이터베이스가 구성되어 있어야 합니다. 웹 파트 개인 설정은 기본적으로 활성화되어 있으며 SQL 개인 설정 공급자(SqlPersonalizationProvider)와 SSE(SQL Server Express) Edition을 함께 사용하여 개인 설정 데이터를 저장합니다. 이 연습에서는 SSE와 기본 SQL 공급자를 사용합니다. SSE가 설치되어 있으면 구성이 필요하지 않습니다. SSE는 Microsoft Visual Studio 2005를 설치할 때 옵션으로 선택하거나 무료로 다운로드할 수 있습니다. 자세한 내용은 Microsoft SQL Server 2005 Express Edition 웹 페이지를 참조하십시오. SQL Server 정식 버전을 사용하려면 ASP.NET 응용 프로그램 서비스 데이터베이스를 설치 및 구성하고 SQL 개인 설정 공급자를 구성하여 해당 데이터베이스에 연결해야 합니다. 자세한 내용은 SQL Server용 응용 프로그램 서비스 데이터베이스 만들기 및 구성을 참조하십시오. SQL 이외의 데이터베이스나 저장소 솔루션에서 사용할 사용자 지정 공급자를 만들고 구성할 수도 있습니다. 자세한 내용과 코드 예제를 보려면 멤버 자격 공급자 구현을 참조하십시오.
웹 파트 페이지에서 카탈로그에 추가할 수 있도록 WebPart 클래스에서 파생된 사용자 지정 웹 파트 컨트롤이 있어야 합니다. 사용자 지정 WebPart 컨트롤 및 페이지에서 이 컨트롤을 참조하는 방법에 대한 예제를 보려면 WebPartDisplayMode 클래스 설명서에서 TextDisplayWebPart 컨트롤에 대한 코드 예제를 참조하십시오.

디스플레이 모드를 변경할 사용자 정의 컨트롤 만들기

이 단원에서는 사용자가 다양한 페이지 디스플레이 모드 간을 쉽게 전환할 수 있도록 웹 파트 컨트롤이 포함된 페이지에 추가할 수 있는 사용자 정의 컨트롤을 만듭니다.

디스플레이 모드를 변경할 사용자 정의 컨트롤을 만들려면

텍스트 편집기에서 새 파일을 만듭니다.

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

<%@ control language="vb" classname="DisplayModeMenuVB"%>

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

컨트롤 선언 아래에서 다음 태그를 페이지에 추가합니다.

이 태그는 컨트롤에 대해 다음과 같은 세 가지 주요 부분으로 구성되는 UI(사용자 인터페이스)를 만듭니다.

사용자가 디스플레이 모드를 변경하는 데 사용할 수 있는 드롭다운 목록 컨트롤(<asp:dropdownlist> 요소)
페이지를 사용자가 수정하기 이전의 기본 모양과 레이아웃으로 되돌려 사용자가 페이지의 사용자별 개인 설정 데이터를 다시 설정하는 데 사용할 수 있는 하이퍼링크(<asp:linkbutton> 요소)
사용자가 사용자 개인 설정 범위(기본값)와 공유 개인 설정 범위 간을 전환하는 데 사용할 수 있는 라디오 단추 컨트롤 한 쌍(<asp:radiobutton> 요소 두 개). 현재 사용자가 페이지를 개인 설정하는 경우 개인 설정 범위에 따라 개인 설정 효과를 확인할 수 있는 사용자의 범위가 결정됩니다.

코드는 다음 코드 블록과 같습니다.

<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" 
      AssociatedControlID="DisplayModeDropdown"/>
    <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>

<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" 
      AssociatedControlID="DisplayModeDropdown"/>
    <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>

샘플에 사용되는 언어에 따라 DisplaymodemenuCS.ascx 또는 DisplaymodemenuVB.ascx로 파일 이름을 지정하고 이 연습에서 사용하는 가상 디렉터리 또는 웹 사이트 폴더에 파일을 저장합니다.

사용자 정의 컨트롤에 디스플레이 모드 기능을 추가하려면

사용자 정의 컨트롤의 소스 파일에서 페이지의 여는 <div> 태그 바로 위에 <script> 태그 한 쌍을 추가하고 여는 <script> 태그 내에 특성을 추가합니다.

사용자가 페이지에서 디스플레이 모드를 변경하고, 개인 설정 데이터를 다시 설정하고, 사용자 개인 설정 범위와 공유 개인 설정 범위 사이를 전환할 수 있도록 다음 코드를 <script> 섹션에 추가합니다.

<script >
  ' Use a field to reference the current WebPartManager.
  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 dropdown 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 is allowed, 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>

<script >

 // Use a field to reference the current WebPartManager.
  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 dropdown 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 is allowed, toggle the scope.
  protected void RadioButton2_CheckedChanged(object sender, EventArgs e)
  {
    if (_manager.Personalization.CanEnterSharedScope && 
        _manager.Personalization.Scope == PersonalizationScope.User)
      _manager.Personalization.ToggleScope();
  }
</script>

이 코드 블록에서는 몇 가지 사항에 주목해야 합니다.

InitComplete 메서드에서 코드는 현재 페이지에서 사용되는 디스플레이 모드를 확인하고 드롭다운 목록 컨트롤에 디스플레이 모드를 채웁니다. 또한 현재 사용자가 페이지에서 공유 개인 설정 범위로 전환할 수 있는지 여부를 확인하고 적절한 라디오 단추 컨트롤을 선택합니다.
DisplayModeDropdown_SelectedIndexChanged 메서드는 실제로 WebPartManager 컨트롤과 사용자가 선택한 모드를 사용하여 페이지의 디스플레이 모드를 변경합니다.
LinkButton1_Click 메서드는 페이지에서 개인 설정 상태를 다시 설정합니다. 즉, 페이지에 대한 사용자 개인 설정 데이터가 개인 설정 데이터 저장소에서 모두 제거되고 페이지가 기본 상태로 돌아갑니다.
RadioButton1_CheckChanged 및 RadioButton2_CheckChanged 메서드는 개인 설정 범위를 사용자 범위 또는 공유 범위로 전환합니다.

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

디스플레이 모드 컨트롤을 호스팅할 웹 페이지 만들기

디스플레이 모드를 변경하기 위한 사용자 정의 컨트롤을 만들었으므로 이제 웹 파트 기능을 제공하기 위한 다른 서버 컨트롤과 웹 파트 영역이 포함되어 있고 사용자 정의 컨트롤을 호스팅하는 웹 페이지를 만들 차례입니다.

디스플레이 모드를 변경할 수 있는 웹 페이지를 만들려면

사용자 지정 컨트롤에 대한 컴파일된 어셈블리를 웹 사이트의 Bin 폴더에 배치합니다.

이 연습을 실행하려면 컴파일된 사용자 지정 WebPart 컨트롤이 미리 준비되어 있어야 합니다. 이 연습에서는 WebPartDisplayMode 클래스의 클래스 개요 항목에 있는 TextDisplayWebPart라는 사용자 지정 컨트롤을 사용합니다. 컴파일된 어셈블리의 이름은 사용하는 언어에 따라 TextDisplayWebPartCS.dll 또는 TextDisplayWebPartVB.dll이어야 합니다.

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

텍스트 편집기에서 새 파일을 만듭니다.

파일의 맨 위에 페이지 선언 하나와 register 지시문 두 개를 추가합니다. 두 개의 register 지시문 중 하나는 사용자 정의 컨트롤용이고, 다른 하나는 이 연습에 사용되는 컴파일된 사용자 지정 WebPart 컨트롤용입니다. 이 지시문의 Assembly 특성은 사용자 지정 컨트롤의 어셈블리 파일 이름(확장명 제외)을 참조해야 합니다.

<%@ page language="VB" %>
<%@ register TagPrefix="uc1" 
  TagName="DisplayModeMenuVB" 
  Src="DisplayModeMenuVB.ascx" %>
<%@ register tagprefix="aspSample" 
  Namespace="Samples.AspNet.VB.Controls" 
  Assembly="TextDisplayWebPartVB"%>

<%@ page language="C#" %>
<%@ register TagPrefix="uc1" 
  TagName="DisplayModeMenuCS" 
  Src="DisplayModeMenuCS.ascx" %>
<%@ register tagprefix="aspSample" 
  Namespace="Samples.AspNet.CS.Controls" 
  Assembly="TextDisplayWebPartCS"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
Sub Button1_Click(Byval sender As Object, _
                  ByVal e As EventArgs)
  WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode
End Sub
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
void Button1_Click(object sender, EventArgs e)
{
  WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode;
}
</script>

코드 블록을 추가한 후 다음 태그를 파일에 추가합니다.

이 코드 예제에는 <asp:webpartmanager> 요소, 페이지의 가능한 디스플레이 모드에 해당하는 웹 파트 영역, 몇 가지 컨트롤 등을 포함하여 웹 파트 페이지에 필요한 다양한 기능이 포함되어 있습니다. 이러한 기능에 대한 자세한 내용은 연습: 웹 파트 페이지 만들기를 참조하십시오.

페이지의 나머지 부분에 대한 코드는 다음 코드 블록과 같습니다.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
  <title>Web Parts Display Modes</title>
</head>
<body>
  <form id="Form2" >
    <asp:webpartmanager id="WebPartManager1"  />
    <uc1:DisplayModeMenuVB ID="DisplayModeMenu1"  />
    <asp:webpartzone
      id="WebPartZone1"
       BackImageUrl="~/MyImage.gif">
        <zonetemplate>
          <asp:Calendar 
            ID="Calendar1" 
            Runat="server" 
            Title="My Calendar" />
        </zonetemplate>
    </asp:webpartzone>
    <asp:WebPartZone ID="WebPartZone2" Runat="server">
    </asp:WebPartZone>
    <asp:EditorZone ID="editzone1" Runat="server">
      <ZoneTemplate>
        <asp:AppearanceEditorPart 
          ID="appearanceeditor1" 
          Runat="server" />
        <asp:LayoutEditorPart 
          ID="LayoutEditorPart1" 
          Runat="server" />
      </ZoneTemplate>
    </asp:EditorZone>
    <asp:CatalogZone ID="catalogzone1" Runat="server">
      <ZoneTemplate>
        <asp:DeclarativeCatalogPart 
          ID="declarativepart1" 
          Runat="server">
          <WebPartsTemplate>
          <aspSample:TextDisplayWebPart 

            id="textwebpart" 
            title = "Text Content WebPart"/>  
          </WebPartsTemplate>
        </asp:DeclarativeCatalogPart>
      </ZoneTemplate>
    </asp:CatalogZone>
    <br />
    <asp:button
      id="button1"

      text="Catalog Mode"
      OnClick="Button1_Click"
    />
  </form>
</body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
  <title>Web Parts Display Modes</title>
</head>
<body>
  <form id="Form2" >
    <asp:webpartmanager id="WebPartManager1"  />
    <uc1:DisplayModeMenuCS ID="DisplayModeMenu1"  />
    <asp:webpartzone
      id="WebPartZone1"
       BackImageUrl="~/MyImage.gif">
        <zonetemplate>
          <asp:Calendar 
            ID="Calendar1" 
            Runat="server" 
            Title="My Calendar" />
        </zonetemplate>
    </asp:webpartzone>
    <asp:WebPartZone ID="WebPartZone2" Runat="server">
    </asp:WebPartZone>
    <asp:EditorZone ID="editzone1" Runat="server">
      <ZoneTemplate>
        <asp:AppearanceEditorPart 
          ID="appearanceeditor1" 
          Runat="server" />
        <asp:LayoutEditorPart 
          ID="LayoutEditorPart1" 
          Runat="server" />
      </ZoneTemplate>
    </asp:EditorZone>
    <asp:CatalogZone ID="catalogzone1" Runat="server">
      <ZoneTemplate>
        <asp:DeclarativeCatalogPart 
          ID="declarativepart1" 
          Runat="server">
          <WebPartsTemplate>
          <aspSample:TextDisplayWebPart 

            id="textwebpart" 
            title = "Text Content WebPart" AllowClose="true"/>  
          </WebPartsTemplate>
        </asp:DeclarativeCatalogPart>
      </ZoneTemplate>
    </asp:CatalogZone>
    <br />
    <asp:button
      id="button1"

      text="Catalog Mode"
      OnClick="Button1_Click"
    />
  </form>
</body>
</html>

파일 이름을 Displaymodes.aspx로 지정하고 웹 사이트의 디렉터리에 저장합니다.

웹 페이지를 테스트하여 디스플레이 모드 변경

웹 파트 컨트롤을 포함하고 다양한 페이지 디스플레이 모드 간을 전환할 수 있는 웹 페이지를 실행하는 데 필요한 모든 항목을 만들었습니다.

페이지를 테스트하고 디스플레이 모드를 변경하려면

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

페이지는 다음 스크린 샷과 같습니다.

디스플레이 모드를 변경할 수 있는 컨트롤이 포함된 페이지

Display Mode 드롭다운 목록 컨트롤을 클릭합니다.

페이지에 사용할 수 있는 여러 가지 디스플레이 모드가 표시됩니다. 이 페이지에는 WebPartZone 컨트롤, EditorZone 컨트롤 및 CatalogZone 컨트롤이 포함되어 있으므로 기본 Browse 디스플레이 모드 및 각 영역 종류에 해당하는 디스플레이 모드가 드롭다운 목록에 나타납니다.

참고:
페이지에는 컨트롤 간에 연결을 만들고 드롭다운 목록에 연결 디스플레이 모드를 추가할 수 있는 ConnectionsZone 컨트롤도 포함되어 있습니다. 그러나 연결은 이 연습의 범위를 벗어난 내용이므로 여기에서 다루지 않습니다.

드롭다운 목록에서 Catalog 모드를 선택합니다.

그러면 카탈로그 모드 UI가 나타나고 페이지에 추가할 수 있는 TextDisplayWebPart 컨트롤이 카탈로그에 표시됩니다.
페이지를 찾아보기 모드로 되돌리려면 Close 단추를 클릭합니다.
디스플레이 모드로 전환할 때 사용자 정의 컨트롤 없이 다른 방법을 사용하려면 페이지 아래쪽에 있는 Catalog Mode 단추를 클릭합니다. 이에 대한 코드는 웹 페이지의 Button1_Click 메서드에 나타납니다.

이렇게 하면 페이지가 카탈로그 모드로 전환됩니다.
카탈로그에서 사용자 지정 컨트롤 옆에 있는 확인란을 선택한 다음 Add 단추를 클릭하여 해당 컨트롤을 페이지에 추가합니다.
Close를 클릭하여 페이지를 찾아보기 모드로 되돌립니다.

추가된 컨트롤이 페이지에 나타납니다.
Display Mode 드롭다운 목록 컨트롤에서 Edit을 선택합니다.

이렇게 하면 페이지가 편집 모드로 전환됩니다. 영역의 제목이 표시되고 WebPartZone에 있는 각 서버 컨트롤의 제목 표시줄에 작은 삼각형 모양의 동사 메뉴 단추가 나타납니다. 동사 메뉴는 사용자가 컨트롤에 적용할 수 있는 다양한 작업을 제공합니다.
TextDisplayWebPart 컨트롤에서 동사 메뉴를 클릭합니다.

그러면 드롭다운 메뉴가 나타납니다.
동사 메뉴에서 Edit 옵션을 클릭합니다.

그러면 <asp:editorzone> 요소 내에 선언된 특수 편집 UI가 나타납니다. 이러한 컨트롤을 사용하여 사용자 지정 컨트롤의 레이아웃과 모양을 변경할 수 있습니다.
편집 UI를 사용하여 사용자 지정 컨트롤의 제목을 변경합니다. 그런 다음 Apply를 클릭하여 변경 내용을 적용합니다.
사용자 지정 컨트롤의 제목 표시줄에 마우스 포인터를 놓습니다. 제목 표시줄을 클릭한 다음 컨트롤을 WebPartZone1에서 WebPartZone2로 끌어 옵니다.
Display Mode 드롭다운 목록 컨트롤을 사용하여 페이지를 다시 찾아보기 모드로 변경합니다.

페이지는 다음 스크린 샷과 같습니다.

다양한 디스플레이 모드를 변경한 이후의 페이지

참고 항목

다음을 통해 공유