チュートリアル : Web パーツページの作成

[アーティクル]
10/22/2014

更新 : 2007 年 11 月

このチュートリアルでは、Web パーツコントロールを使用する Web ページを作成するために不可欠なコンポーネントとタスクを実践的に説明します。

多くの Web アプリケーションでは、ユーザーが表示するコンテンツを選択および整理できるようにすることは有効です。ASP.NET Web パーツ機能は、モジュールコンテンツを表示し、必要に応じてユーザーが外観やコンテンツを変更できるような Web ページを作成するためのコントロールのセットで構成されます。Web パーツの一般的な概要については、「ASP.NET Web パーツの概要」を参照してください。このチュートリアルで使用されているコンポーネントを含む、Web パーツコントロールセットの主要なコンポーネントの詳細については、「Web パーツコントロールセットの概要」を参照してください。

このチュートリアルでは、Web パーツコントロールを使用して、ユーザーが変更したり、パーソナル化したりできる Web ページを作成します。このチュートリアルでは、以下のタスクを行います。

ページに Web パーツコントロールを追加する。
カスタムユーザーコントロールを作成し、Web パーツコントロールとして使用する。
ページ上の Web パーツコントロールのレイアウトをユーザーがパーソナル化できるようにする。
Web パーツコントロールの外観をユーザーが編集できるようにする。
ユーザーが使用可能な Web パーツコントロールのカタログから選択できるように設定する。

前提条件

このチュートリアルを実行するための要件は次のとおりです。

サイトをホストするコンピュータにインストールして構成したインターネットインフォメーションサービス (IIS: Internet Information Services)。IIS のインストールと構成の詳細については、インストールに含まれている IIS ヘルプドキュメント、または Microsoft TechNet サイト (Internet Information Services 6.0 Technical Resources) にある IIS オンラインドキュメントを参照してください。
個別のユーザーを識別できる ASP.NET Web サイト。そのようなサイトを既に構成している場合は、このチュートリアルの開始点としてそのサイトを使用できます。サイトをまだ構成していない場合、仮想ディレクトリまたはサイトの作成方法の詳細については、「方法 : IIS 5.0 および 6.0 内で仮想ディレクトリを作成および構成する」または「方法 : IIS 6.0 でローカル ASP.NET Web サイトを作成および構成する」を参照してください。
構成済みのパーソナル化プロバイダおよびデータベース。Web パーツのパーソナル化は既定で有効になっており、Microsoft SQL Server Standard Edition に付属の SQL パーソナル化プロバイダ (SqlPersonalizationProvider) を使用してパーソナル化データを格納します。このチュートリアルでは、SSE と既定の SQL プロバイダを使用します。SSE をインストール済みである場合、構成は必要ありません。SSE は、Microsoft Visual Studio 2005 のインストール時にオプションでインストールすることも、Microsoft.com から無料でダウンロードすることもできます。詳細については、Microsoft SQL Server 2005 Express Edition Web サイトを参照してください。SQL Server のいずれかの完全バージョンを使用するには、ASP.NET アプリケーションサービスデータベースをインストールして設定し、そのデータベースに接続する SQL パーソナル化プロバイダを設定する必要があります。詳細については、「SQL Server 向けアプリケーションサービスデータベースの作成と構成」を参照してください。また、SQL データベース以外のデータベースやストレージソリューションで使用するカスタムプロバイダを作成して設定することもできます。詳細とコード例については、「メンバシッププロバイダの実装」を参照してください。

Web パーツを使用した簡単なページの作成

ここでは、静的コンテンツを表示する Web パーツを使用したページを作成します。

メモ :
Web パーツのパーソナル化は Web パーツコントロールセットの既定で有効になっているため、有効化のための操作は必要ありません。サイトで Web パーツページを初めて実行したときに、ASP.NET により、ユーザーのパーソナル化設定を格納する既定のパーソナル化プロバイダが設定されます。既定のプロバイダは、サイトのディレクトリのサブディレクトリに作成されたデータベースを使用します。パーソナル化の詳細については、「Web パーツのパーソナル化の概要」を参照してください。

Web パーツのパーソナル化は Web パーツコントロールセットの既定で有効になっているため、有効化のための操作は必要ありません。サイトで Web パーツページを初めて実行したときに、ASP.NET により、ユーザーのパーソナル化設定を格納する既定のパーソナル化プロバイダが設定されます。既定のプロバイダは、サイトのディレクトリのサブディレクトリに作成されたデータベースを使用します。パーソナル化の詳細については、「Web パーツのパーソナル化の概要」を参照してください。

Web ページを作成するには

テキストエディタで新しいファイルを作成し、ファイルの先頭に次のページ宣言を追加します。
```
<%@ page language="VB" %>
```
```
<%@ page language="C#" %>
```

ページ宣言の下に、次のコード例に示すように、完全なページ構造を作成するタグを入力します。

このページには、1 つの行と 3 つの列で構成される空のテーブルが含まれています。このテーブルに、後で追加する Web パーツコントロールを格納します。

<html>
<head runat="server">
  <title>Web Parts Page</title>
</head>
<body>
  <h1>Web Parts Demonstration Page</h1>
  <form runat="server" 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 という名前を付け、Web サイトのディレクトリに保存します。

次の手順では、ゾーンを設定します。ゾーンは、ページの特定の領域を占める、Web パーツコントロールを格納する複合コントロールです。

ページにゾーンを追加するには

ページの <form> 要素のすぐ下に、次の例に示すように <asp:webpartmanager> 要素を追加します。
```
<asp:webpartmanager id="WebPartManager1" runat="server" />
```
WebPartManager コントロールは、Web パーツコントロールを使用するすべてのページに必須のコントロールです。
テーブル内の最初の <td> 要素の中に <asp:webpartzone> 要素を追加し、次の例に示すようにそのプロパティ値を割り当てます。

<asp:webpartzone> 要素には、<zonetemplate> 要素も含まれます。Web パーツコントロールは、<zonetemplate> 要素内に配置されます。
```
<table cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td valign="top">
      <asp:webpartzone id="SideBarZone" runat="server" 
        headertext="Sidebar">
        <zonetemplate>
        </zonetemplate>
      </asp:webpartzone>
    </td>
```
テーブル内の 2 番目の <td> 要素の中に <asp:webpartzone> 要素を追加し、次の例に示すようにそのプロパティ値を割り当てます。
```
<td valign="top">
   <asp:webpartzone id="MainZone" runat="server" headertext="Main">
     <zonetemplate>
     </zonetemplate>
   </asp:webpartzone>
</td>
```
WebPartsDemo.aspx ファイルを保存します。

これで、個別に制御できる 2 つのゾーンがページに作成されました。ただし、いずれのゾーンも内容がないので、次の手順で内容を作成します。このチュートリアルでは、静的コンテンツのみを表示する Web パーツコントロールを使用します。

Web パーツゾーンのレイアウトは、<zonetemplate> 要素によって指定されます。ゾーンテンプレートの内部には、任意の Web サーバーコントロール (カスタム Web パーツコントロール、ユーザーコントロール、または既存のサーバーコントロール) を追加できます。このチュートリアルでは Label サーバーコントロールを使用し、その中に静的テキストを単純に追加します。WebPartZone ゾーンに標準の ASP.NET サーバーコントロールを追加すると、ASP.NET は実行時にそれを Web パーツコントロールとして扱います。これにより、標準のサーバーコントロールで Web パーツ機能のほとんどを使用できるようになります。

ゾーンのコンテンツを作成するには

Main ゾーンの <zonetemplate> 要素の中に、次のコード例に示すようなコンテンツを含む <asp:label> 要素を追加します。

<asp:webpartzone id="MainZone" runat="server" headertext="Main">
  <zonetemplate>
    <asp:label id="contentPart" runat="server" 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 ファイルを保存します。
テキストエディタで新しいファイルを作成します。

このファイル内に、Web パーツコントロールとしてページに追加するユーザーコントロールを作成します。
新しいファイルの先頭に、次の例に示すようなコントロール宣言を入力します。
```
<%@ control language="VB" classname="SearchUserControl" %>
```
```
<%@ control language="C#" classname="SearchUserControl" %>
```
メモ :

このチュートリアルの検索コントロールは、実際の検索機能を実装しません。Web パーツ機能を実証するためにのみ使用します。
コントロール宣言の後に 1 組の <script> タグを追加し、その中に、パーソナライズ可能なプロパティを作成するためのコードを追加します。

ResultsPerPage プロパティには Personalizable 属性があることに注意してください。ユーザーインターフェイス (UI) に、デザインビューの設定を変更するためのエディットコントロールを追加している場合、このプロパティにより、コントロールのユーザーはページごとに返される検索結果の数をパーソナライズ化できるようになります。

コントロールのコードが次のコード例のようになるようにします。
```
<%@ control language="VB" classname="SearchUserControl" %>
<script runat="server">
  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 runat="server">
  private int results;

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

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

メモ :
このチュートリアルの検索コントロールは、実際の検索機能を実装しません。Web パーツ機能を実証するためにのみ使用します。

次のコード例に示されるように、<script> 要素の下にテキストボックスとボタンを追加して、検索コントロールのための UI を作成します。

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

セキュリティに関するメモ :
このコントロールは、ユーザー入力を受け付けるテキストボックスを持つため、セキュリティ上の脅威になる可能性があります。既定では、ASP.NET Web ページはユーザー入力を検証し、入力に HTML 要素やスクリプトが含まれていないことを確認します。詳細については、「スクリプトによる攻略の概要」を参照してください。

このコントロールは、ユーザー入力を受け付けるテキストボックスを持つため、セキュリティ上の脅威になる可能性があります。既定では、ASP.NET Web ページはユーザー入力を検証し、入力に HTML 要素やスクリプトが含まれていないことを確認します。詳細については、「スクリプトによる攻略の概要」を参照してください。

使用している言語に応じて SearchUserControlVB.ascx または SearchUserControlCS.ascx という名前をファイルに付け、WebPartsDemo.aspx ページと同じディレクトリに保存します。

リンクの一覧を含むコントロールと前の手順で作成したユーザーコントロールの 2 つのコントロールを、Sidebar ゾーンに追加します。リンクは、Main ゾーンの静的テキストを作成したときと同様に、単一の標準 Label サーバーコントロールとして追加します。ユーザーコントロールに含まれる個々のサーバーコントロールはゾーンに直接追加できますが、この場合は直接追加しません。その代わりに、サーバーコントロールを前の手順で作成したユーザーコントロールの一部にします。これは、ユーザーコントロールに含めるコントロールと付加機能をパッケージ化して、そのユーザーコントロールをゾーン内で Web パーツコントロールとして参照するための一般的な方法です。

実行時に、ASP.NET は GenericWebPart コントロールのある両方のコントロールをラップします。Web サーバーコントロールが GenericWebPart コントロールでラップされると、この汎用パーツコントロールが親コントロールとなり、この親コントロールの ChildControl プロパティを通じてサーバーコントロールにアクセスできます。この汎用パーツコントロールを使用することにより、標準の Web サーバーコントロールに、WebPart クラスから派生した Web パーツコントロールと同じ基本動作と属性を持たせることができます。

テキストエディタで 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" runat="server" 
  headertext="Sidebar">
  <zonetemplate>
    <asp:label runat="server" 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" runat="server"
      title="Search" />
  </zonetemplate>
</asp:WebPartZone>

WebPartsDemo.aspx ファイルを保存します。

ここでページをテストできます。

ページをテストするには

ページをブラウザに読み込みます。

ページに 2 つのゾーンが表示されます。ページ上の各コントロールのタイトルバーに、下向き矢印が表示されます。これには、動詞メニューと呼ばれるドロップダウンメニューが含まれています。動詞とは、コントロールのクローズ、最小化、編集など、ユーザーがサーバーコントロールに対して実行できる操作です。動詞メニューに含まれている各項目が動詞です。ページは次の図のようになります。
コントロールのタイトルバーの下向き矢印をクリックして動詞メニューを表示し、[最小化] リンクをクリックします。

コントロールが最小化されます。
動詞メニューの [元に戻す] をクリックします。

このようにして、Web パーツコントロールのビジュアル状態の表示を変更できます。

ユーザーによるページの編集とレイアウトの変更の有効化

ユーザーは、Web パーツコントロールをゾーンから別のゾーンへドラッグすることで、レイアウトを変更できます。また、外観、レイアウト、動作などのコントロールの特性をユーザーが編集できるようにすることもできます。Web パーツコントロールセットには、WebPart コントロールの基本的な編集機能が用意されています。このチュートリアルでは扱いませんが、ユーザーが WebPart コントロールの機能を編集するために使用できるカスタムエディタコントロールを作成することもできます。WebPart コントロールの位置を変更した場合と同様に、そのプロパティを編集した場合にも、ユーザーが行った変更が ASP.NET パーソナル化によって保存されます。

ここでは、ページの任意の WebPart コントロールの基本的な特性をユーザーが編集できるようにします。

ページレイアウトを変更するためのユーザーコントロールを作成するには

テキストエディタに新しいファイルを作成し、次のコードにコピーします。

このコードでは、ページのビューモードや表示モードを変更できるように設定した Web パーツコントロールの機能を使用します。また、特定の表示モードを変えずに、ページの物理的な外観とレイアウトを変更することもできます。

<%@ control language="vb" classname="DisplayModeMenuVB"%>
<script runat="server">
  ' 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" runat="server" 
    Borderwidth="1" 
    Width="230" 
    BackColor="lightgray"
    Font-Names="Verdana, Arial, Sans Serif" >
    <asp:Label ID="Label1" runat="server" 
      Text="&nbsp;Display Mode" 
      Font-Bold="true"
      Font-Size="8"
      Width="120" />
    <div>
    <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" />
    </div>
    <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>

<%@ 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="&nbsp;Display Mode" 
      Font-Bold="true"
      Font-Size="8"
      Width="120" />
    <div>
    <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" />
    </div>
    <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>

ファイルに 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" runat="server" />

<uc2:DisplayModeMenuCS ID="DisplayModeMenu1" runat="server" />

テーブル内の 3 番目の <td> 要素の中に、<asp:editorzone> 要素を追加します。<zonetemplate>、<asp:appearanceeditorpart>、および <asp:layouteditorpart> の各要素を追加します。

この時点で、コードは次の例のようになります。

<td valign="top">
  <asp:editorzone id="EditorZone1" runat="server">
    <zonetemplate>
      <asp:appearanceeditorpart 
        runat="server" 
        id="AppearanceEditorPart1" />
      <asp:layouteditorpart 
        runat="server" 
        id="LayoutEditorPart1" />
    </zonetemplate>
  </asp:editorzone>
</td>

メモ :
その他の 2 つのコントロール BehaviorEditorPart と PropertyGridEditorPart は、このチュートリアルの範囲から外れる設定が必要なため、使用されません。

WebPartsDemo.aspx ファイルを保存します。

これで、表示モードの変更とページレイアウトの変更を行うためのユーザーコントロールを作成し、プライマリ Web ページでそのコントロールを参照しました。

ここで、ページの編集とレイアウトの変更の機能をテストできます。

レイアウトの変更をテストするには

ページをブラウザに読み込みます。
[表示モード] メニューの [編集] をクリックします。

ゾーンのタイトルが表示されます。
リンク コントロールのタイトルバーを使用して、このコントロールを Sidebar ゾーンから Main ゾーンの下部にドラッグします。

ページは次のスクリーンショットのようになります。
[表示モード] メニューの [Browse] をクリックします。

ページが更新され、ゾーンの名前が表示されなくなります。リンク コントロールは、移動後の位置のままになります。
ブラウザを閉じ、ページを読み込み直します。

加えた変更は、後でブラウザセッションに使用できるように保存されます。これは、パーソナル化が機能することを説明する例です。
[Display Mode] メニューの [Edit] をクリックします。
下向きの矢印をクリックして、[リンク] コントロールに動詞メニューを表示し、[編集] 動詞をクリックします。

先ほど追加した EditorPart コントロールを表示した EditorZone コントロールが表示されます。
エディットコントロールの [表示] セクションで、[タイトル] を「お気に入り」に変更し、[クロム型] ドロップダウンリストの [タイトルのみ] をクリックしてから、[適用] をクリックします。

変更後のページ (編集モードのまま) は、次の図のようになります。
[表示モード] メニューの [Browse] をクリックして、ブラウズモードに戻します。

次のスクリーンショットに示されているように、コントロールのタイトルが更新され、境界線がなくなりました。

実行時の Web パーツの追加

ユーザーが実行時に Web パーツコントロールをページに追加できるようにすることもできます。そのためには、ユーザーが使用できる Web パーツコントロールを含んだ Web パーツカタログをページに設定します。

メモ :
ここでは、FileUpload コントロールと Calendar コントロールを含むテンプレートを作成します。このテンプレートを使用して、カタログの基本的な機能をテストします。ただし、このカタログの Web パーツコントロールは実際には機能しません。カスタム Web コントロールまたはユーザーコントロールがある場合は、それを静的テキストの代わりに使用できます。

ここでは、FileUpload コントロールと Calendar コントロールを含むテンプレートを作成します。このテンプレートを使用して、カタログの基本的な機能をテストします。ただし、このカタログの Web パーツコントロールは実際には機能しません。カスタム Web コントロールまたはユーザーコントロールがある場合は、それを静的テキストの代わりに使用できます。

ユーザーが実行時に Web パーツを追加できるようにするには

WebPartsDemo.aspx ファイルに次のコードを追加します。
- テーブルの 3 番目の列の中の <asp:editorzone> 要素のすぐ下に <asp:catalogzone> 要素を追加します。
- <zonetemplate> 要素を追加し、その中に <asp:declarativecatalogpart> 要素と <webpartstemplate> 要素を追加します。
- <asp:fileupload> 要素と <asp:calendar> 要素を追加します。
コードは次のコード例のようになります。
```
<asp:catalogzone id="CatalogZone1" runat="server" 
  headertext="Add Web Parts">
  <zonetemplate>
    <asp:declarativecatalogpart id="catalogpart1" 
      runat="server" Title="My Catalog">
      <webPartsTemplate>
         <asp:fileupload runat="server" id="upload1" 
           title="Upload Files" />
         <asp:calendar runat="server" id="cal1" 
            Title="Team Calendar" />
      </webPartsTemplate>
    </asp:declarativecatalogpart>
  </zonetemplate>
</asp:catalogzone>
```
メモ :

EditorZone コントロールと CatalogZone コントロールは同時に表示されないため、同じテーブルセル内に格納できます。
WebPartsDemo.aspx ファイルを保存します。

メモ :
EditorZone コントロールと CatalogZone コントロールは同時に表示されないため、同じテーブルセル内に格納できます。

ここでカタログをテストできます。

Web パーツカタログをテストするには

ページをブラウザに読み込みます。
[表示モード] メニューの [カタログ] をクリックします。

[Add Web Parts] という名前のカタログが表示されます。
[お気に入り] コントロールを、Main ゾーンから Sidebar ゾーンの上部にドラッグします。
[Add Web Parts] カタログのチェックボックスを両方ともオンにし、[追加] ドロップダウンリストの [Main] をクリックします。
カタログの [追加] をクリックします。

コントロールが Main ゾーンに追加されます。必要に応じて、コントロールの複数のインスタンスをカタログからページに追加できます。

ファイルアップロードコントロールとカレンダーを Main ゾーンに表示したページを次の図に示します。
[表示モード] メニューの [Browse] をクリックします。

カタログが非表示になり、ページが更新されます。
ブラウザを閉じます。ページを再び読み込みます。

変更内容は保存されています。

次の手順

このチュートリアルでは、ASP.NET Web ページで簡単な Web パーツコントロールを使用するための基本的な操作方法を示しました。より高度な別の Web パーツ機能を試すこともできます。たとえば、ユーザーコントロールまたはカスタムコントロールとして Web パーツコントロールを作成できます。詳細については、WebPart クラスのドキュメントを参照してください。

参照

次の方法で共有

チュートリアル : Web パーツページの作成

前提条件

Web パーツを使用した簡単なページの作成

Web ページを作成するには

ページにゾーンを追加するには

ゾーンのコンテンツを作成するには

Sidebar ゾーンのコンテンツを作成するには

ページをテストするには

ユーザーによるページの編集とレイアウトの変更の有効化

ページレイアウトを変更するためのユーザーコントロールを作成するには

ユーザーがレイアウトを変更できるようにするには

レイアウトの変更をテストするには

実行時の Web パーツの追加

ユーザーが実行時に Web パーツを追加できるようにするには

Web パーツカタログをテストするには

次の手順

参照

処理手順

概念

参照

その他のリソース

次の方法で共有

チュートリアル : Web パーツ ページの作成

前提条件

Web パーツを使用した簡単なページの作成

Web ページを作成するには

ページにゾーンを追加するには

ゾーンのコンテンツを作成するには

Sidebar ゾーンのコンテンツを作成するには

ページをテストするには

ユーザーによるページの編集とレイアウトの変更の有効化

ページ レイアウトを変更するためのユーザー コントロールを作成するには

ユーザーがレイアウトを変更できるようにするには

レイアウトの変更をテストするには

実行時の Web パーツの追加

ユーザーが実行時に Web パーツを追加できるようにするには

Web パーツ カタログをテストするには

次の手順

参照

処理手順

概念

参照

その他のリソース

チュートリアル : Web パーツページの作成

ページレイアウトを変更するためのユーザーコントロールを作成するには

Web パーツカタログをテストするには