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

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

更新 : 2007 年 11 月

このチュートリアルでは、Microsoft Visual Studio 2005 などのビジュアルページデザインツールで、Web パーツコントロールを使用した Web ページを作成するための基本的なコンポーネントとタスクについて、実際にページを作成しながら説明します。

多くの Web アプリケーションでは、コンテンツの表示形式を変更したり、ユーザーが見たいコンテンツを選択したり、配置を変えたりできるようにするための機能を設定すると便利です。ASP.NET Web パーツでは、コンテンツをモジュール方式で表示する Web ページを作成できます。作成された Web ページの外観やコンテンツは、ユーザーの好みに合わせて変更できます。Web パーツの一般的な概要については、「ASP.NET Web パーツの概要」を参照してください。Web パーツのコントロールセットの概要については、「Web パーツコントロールセットの概要」を参照してください。

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

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

前提条件

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

個々のユーザーを識別できるサイト。ASP.NET メンバシップを使用して既にサイトを設定している場合は、そのサイトをこのチュートリアルで使用できます。作成したサイトがない場合については、Windows のユーザーアカウント名を使用してユーザーを識別できるサイトを設定する方法についての手順を示します。
Web ページを作成するためのビジュアルデザイン環境。このチュートリアルでは Visual Studio 2005 を使用します。
設定済みのパーソナル化プロバイダとデータベース。Web パーツのパーソナル化は既定で有効に設定されており、Microsoft SQL Server Express Edition の SQL パーソナル化プロバイダ (SqlPersonalizationProvider) を使用して、パーソナル化データを格納します。このチュートリアルでは、SQL Server Express と既定の SQL プロバイダを使用します。SQL Server Express をインストール済みである場合、構成は必要ありません。SQL Server Express は、Microsoft Visual Studio 2005 のインストール時にオプションでインストールすることも、Microsoft.com から無料でダウンロードすることもできます。完全バージョンの SQL Server を使用するには、ASP.NET アプリケーションサービスデータベースをインストールして構成し、SQL パーソナル化プロバイダを構成してそのデータベースに接続する必要があります。詳細については、「SQL Server 向けアプリケーションサービスデータベースの作成と構成」を参照してください。

Web サイトの作成と設定

このチュートリアルでは、Web パーツの設定が特定のユーザーに対して保持されるように、ユーザー ID を所有していることを前提としています。メンバシップを使用するように Web サイトを既に構成している場合は、そのサイトを使用することをお勧めします。そのようなサイトを所有していない場合は、新しいサイトを作成し、現在の Windows のユーザー名をユーザー ID として使用できます。

新しい Web サイトを作成するには

Visual Studio で、新しい ASP.NET Web サイトを作成します。

詳細については、「チュートリアル : メンバシップとユーザーログインを使用する Web サイトの作成」を参照してください。

Web パーツを使用する簡単なページの作成

ここでは、Web パーツコントロールを使用して静的なコンテンツを表示するページを作成します。まず、Web パーツを使用して 2 つの必須要素を持ったページを作成します。最初に、Web パーツページに、すべての Web パーツコントロールを調整するための WebPartManager コントロールが必要です。次に、Web パーツページに、1 つまたは複数のゾーンが必要です。このゾーンは、WebPart やその他のサーバーコントロールを含む複合コントロールで、ページの指定した領域に配置されます。

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

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

Web パーツコントロールを格納するためのページを作成するには

既定のページを閉じ、WebPartsDemo.aspx という名前の新しいページを追加します。
デザインビューに切り替えます。
[表示] メニューの [視覚補助] をクリックし、[ASP.NET 非ビジュアルコントロール] と [詳細] が選択されていることを確認します。

これにより、レイアウトタグと UI を持たないコントロールを表示できます。

body 要素の直前に新しい行を追加します。

メモ :
これを実行できない場合は、div 要素を選択して Esc キーを 2 回押すことにより body 要素を選択し、左方向キーを押して Enter キーを押します。

挿入ポイントを改行文字の前に置きます。
ツールバーの [フォーマットのブロック] ボックスの一覧の [見出し 1] をクリックします。
見出しに「Web Parts Demonstration Page」というテキストを追加します。
ツールボックスの [WebParts] タブの WebPartManager コントロールをページにドラッグし、改行文字と <div> タグの間に置きます。

WebPartManager コントロールは出力のレンダリングを行わないので、デザイナ画面で灰色の四角形として表示されます。
挿入ポイントを div 要素の中に置きます。
[テーブル] メニューの [テーブルの挿入] をクリックし、1 つの行と 3 つの列を含むテーブルを指定して、[OK] をクリックします。
WebPartZone コントロールをテーブルの左側の列にドラッグします。WebPartZone コントロールを右クリックし、[プロパティ] をクリックし、次のプロパティを設定します。

ID: SidebarZone

HeaderText: Sidebar
2 番目の WebPartZone コントロールをテーブルの真ん中の列にドラッグし、次のプロパティを設定します。

ID: MainZone

HeaderText: Main
ファイルを保存し、開いた状態のままにします。

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

Web パーツゾーンのレイアウトの指定には、zonetemplate 要素を使用します。ゾーンテンプレートの内側に、ASP.NET コントロールを追加できます。カスタム Web パーツコントロール、ユーザーコントロール、または既存のサーバーコントロールのいずれでもかまいません。ここでは、Label コントロールを使用し、単に静的なテキストを追加します。通常のサーバーコントロールを WebPartZone ゾーンに置くと、ASP.NET は実行時にそのコントロールを Web パーツコントロールとして処理するので、コントロール上で Web パーツ機能が有効になります。

Main ゾーンの内容を作成するには

デザインビューで、ツールボックスの [標準] タブから Label コントロールをそのゾーンの ID プロパティが MainZone に設定されている内容領域にドラッグします。
ソースビューに切り替えます。

zonetemplate 要素が追加され、Label コントロールが MainZone にラップされます。
title という名前の属性を asp:label 要素に追加し、その値を Content に設定します。asp:label 要素から Text="Label" 属性を削除します。asp:label 要素に、「<h2>Welcome to my Home Page</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>
```
ファイルを保存します。

次に、ページに Web パーツコントロールとしても追加できるユーザーコントロールを作成します。

ユーザーコントロールを作成するには

新しい Web ユーザーコントロールをサイトに追加して、SearchUserControl.ascx という名前の検索コントロールとして使用します。[別のファイルにコードを書き込む] がオフになっていることを確認してください。

メモ :
このチュートリアルでは、このユーザーコントロールに実際の検索機能を実装しません。単に、Web パーツの機能を示すためだけに使用します。

デザインビューに切り替えます。
ツールボックスの [標準] タブから、TextBox コントロールをページにドラッグします。
カーソルを上で追加したテキストボックスの後に置き、Enter キーを押して新しい行を追加します。
Button コントロールを、ページの、追加したテキストボックスの下の新しい行にドラッグします。

ソースビューに切り替えて、ユーザーコントロールのソースコードが次の例のようになっていることを確認します。

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

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

ファイルを保存し、閉じます。

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

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

ここで、Web パーツコントロールを Sidebar ゾーンに追加します。Sidebar ゾーンには、リンクの一覧を含むコントロールと、チュートリアルの前の手順で作成したユーザーコントロールの 2 つを追加します。リンクは、Main ゾーンの静的なテキストを作成したときと同様に、標準の Label サーバーコントロールとして追加されます。ただし、ユーザーコントロールに含まれている個々のサーバーコントロールは、(ラベルコントロールと同様に) ゾーンに直接含めることもできますが、ここでは違います。ここでは、前の手順で作成したユーザーコントロールに含まれます。これは、ユーザーコントロールに任意のコントロールや追加機能をパッケージ化し、ゾーンでそのコントロールを Web パーツコントロールとして参照するときの共通の特徴です。

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

WebPartsDemo.aspx ページを開きます。
デザインビューに切り替えます。
作成したユーザーコントロールページ SearchUserControl.ascx を、[ソリューションエクスプローラ] から ID プロパティが SidebarZone に設定されているゾーンにドラッグします。
WebPartsDemo.aspx ページを保存します。
ソースビューに切り替えます。

SidebarZone の asp:webpartzone 要素に、リンクを含む asp:label 要素を追加し、ユーザーコントロールタグに、Title 属性を追加して Search という値を設定します。次に例を示します。

<asp:WebPartZone id="SidebarZone" runat="server" 
   headertext="Sidebar">
   <zonetemplate>
      <asp:label runat="server" 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" runat="server"
          title="Search" />
   </zonetemplate>
</asp:WebPartZone>

ファイルを保存し、閉じます。

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

ページをテストするには

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

ページに 2 つのゾーンが表示されます。ページのスクリーンショットを次に示します。

2 つのゾーンがある Web パーツデモページ

個々のコントロールのタイトルバーにある下向きの矢印を使用すると、コントロール上で実行できる操作の動詞メニューにアクセスできます。いずれかのコントロールの動詞メニューをクリックし、[最小化] をクリックして、コントロールが最小化されたことを確認します。動詞メニューの [元に戻す] をクリックすると、コントロールが元のサイズに戻ります。

ユーザーによるページの編集とレイアウトの変更を可能にする方法

Web パーツを使用すると、ユーザーは、Web パーツコントロールをあるゾーンから別のゾーンへドラッグして、そのレイアウトを変更できます。ユーザーが WebPart コントロールをあるゾーンから別のゾーンに移動できるだけではなく、コントロールの外観、レイアウト、動作を含めて、さまざまな特徴を編集できるように設定することもできます。Web パーツコントロールセットには、WebPart コントロールの基本的な編集機能があります。このチュートリアルでは実行しませんが、カスタム編集コントロールを作成して、ユーザーが WebPart コントロールの機能を編集できるように設定することもできます。WebPart コントロールの位置の変更と同様に、コントロールのプロパティの編集でも、ASP.NET パーソナル化によって提供される、ユーザーによる変更を保存する機能を利用します。

ここでは、ページの任意の WebPart コントロールの基本的な特性をユーザーが編集できる機能を追加します。このような機能を有効にするには、asp:editorzone 要素と 2 つの編集コントロールと共に、別のカスタムユーザーコントロールをページに追加します。

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

Visual Studio で、[ファイル] メニューの [新規作成] をポイントし、[ファイル] をクリックします。
[新しい項目の追加] ダイアログで、[Web ユーザーコントロール] をクリックします。新しいファイルに DisplayModeMenu.ascx という名前を付けます。[別のファイルにコードを書き込む] チェックボックスをオフにします。
[追加] をクリックして、新しいコントロールを作成します。
ソースビューに切り替えます。

新しいファイルにある既存のコードをすべて削除し、次のコードを貼り付けます。このユーザーコントロールコードでは、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" />
    <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>

<%@ 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" />
    <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>

ファイルを保存します。

メモ :
このユーザーコントロールでは、Web パーツページの共有モードとユーザーのパーソナル化モードを切り替えることができますが、パーソナル化機能を使用するには、Web.config ファイルに指定されている適切なアクセス許可が必要です。このチュートリアルでは、これらのアクセス許可を付与する方法については説明しません。したがって、この機能は有効化されません。ページの実行時、ユーザーコントロール上のユーザーのラジオボタンと共有のラジオボタンは非表示になります。パーソナル化の詳細については、「Web パーツのパーソナル化」を参照してください。

このユーザーコントロールでは、Web パーツページの共有モードとユーザーのパーソナル化モードを切り替えることができますが、パーソナル化機能を使用するには、Web.config ファイルに指定されている適切なアクセス許可が必要です。このチュートリアルでは、これらのアクセス許可を付与する方法については説明しません。したがって、この機能は有効化されません。ページの実行時、ユーザーコントロール上のユーザーのラジオボタンと共有のラジオボタンは非表示になります。パーソナル化の詳細については、「Web パーツのパーソナル化」を参照してください。

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

WebPartsDemo.aspx ページを開きます。
デザインビューに切り替えます。
挿入ポイントを、前に追加した WebPartManager コントロールの直後に置きます。Enter キーを押して、WebPartManager コントロールの後ろに空白行を作成します。
作成したユーザーコントロール (DisplayModeMenu.ascx) を WebPartsDemo.aspx ページにドラッグし、空白行にドロップします。
ツールボックスの [WebParts] タブから EditorZone コントロールを WebPartsDemo.aspx ページの残りのオープンテーブルセルにドラッグします。
ツールボックスの [WebParts] タブから AppearanceEditorPart コントロールと LayoutEditorPart コントロールを EditorZone コントロールにドラッグします。

ソースビューに切り替えます。

テーブルセル内の結果コードは、次のように記述されています。

<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>

メモ :
このチュートリアルでは、AppearanceEditorPart コントロールと LayoutEditorPart コントロールが使われていますが、BehaviorEditorPart コントロールと PropertyGridEditorPart コントロールは使われていません。その理由は、後の 2 つのコントロールは、このチュートリアルでは説明していない設定を必要とするためです。

このチュートリアルでは、AppearanceEditorPart コントロールと LayoutEditorPart コントロールが使われていますが、BehaviorEditorPart コントロールと PropertyGridEditorPart コントロールは使われていません。その理由は、後の 2 つのコントロールは、このチュートリアルでは説明していない設定を必要とするためです。

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

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

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

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

ページをブラウザに読み込みます。
[Display Mode] メニューの [Edit] をクリックします。

ゾーンのタイトルが表示されます。
[My Links] コントロールのタイトルバーにカーソルを置いて、Sidebar ゾーンから Main ゾーンの下部へドラッグします。

ページは次のようになります。

My Links コントロールが移動した Web パーツデモページ
[Display Mode]、[Browse] の順にクリックします。

ページが最新表示され、ゾーン名が消え、[My Links] コントロールは、ユーザーが配置した位置にあります。
パーソナル化の機能を確認し、ブラウザを閉じた後でページを再度読み込むにはユーザーが行った変更が保存され、将来のブラウザセッションで使用できます。
[Display Mode] メニューの [Edit] をクリックします。

ページ上の各コントロールのタイトルバーに下向きの矢印が表示され、これを押すと動詞のドロップダウンメニューが開きます。
下向きの矢印をクリックして、[My Links] コントロールに動詞メニューを表示し、[Edit] をクリックします。

EditorZone コントロールが表示され、追加した EditorPart コントロールを確認できます。
編集コントロールの [表示] セクションで、[タイトル] を「My Favorites」に変更します。[Chrome 型] リストで [タイトルのみ] を選択し、[適用] をクリックします。

次のスクリーンショットに、編集モードのページを示します。

編集モードの Web パーツデモページ
[Display Mode] メニューの [Browse] をクリックして、ブラウズモードに戻します。

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

編集を終えた Web パーツデモページ

実行時の Web パーツの追加

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

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

このチュートリアルでは、FileUpload コントロールと Calendar コントロールが入ったテンプレートを作成します。このテンプレートを使用して、カタログの基本的な機能をテストします。ただし、このカタログの Web パーツコントロールは実際には機能しません。カスタムの Web コントロールまたはユーザーコントロールがあれば、それを静的な内容の代わりに使用できます。

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

WebPartsDemo.aspx ページを開きます。
デザインビューに切り替えます。
ツールボックスの [WebParts] タブから CatalogZone コントロールを、テーブルの右側の列の EditorZone コントロールの下へドラッグします。

2 つのコントロールを同じテーブルセルに入れても、両方が同時に表示されることはないので、問題ありません。
プロパティペインで、CatalogZone コントロールの HeaderText プロパティに文字列「Add Web Parts」を割り当てます。
ツールボックスの [WebParts] タブから DeclarativeCatalogPart コントロールを CatalogZone コントロールの内容領域にドラッグします。
DeclarativeCatalogPart コントロールの右上隅にある矢印をクリックして [タスク] メニューを表示し、[テンプレートの編集] をクリックします。
ツールボックスの [標準] タブから FileUpload コントロールと Calendar コントロールを DeclarativeCatalogPart コントロールの [WebPartsTemplate] セクションにドラッグします。

ソースビューに切り替え、asp:catalogzone 要素のソースコードを確認します。

DeclarativeCatalogPart コントロールに webpartstemplate 要素が含まれていることを確認します。この要素には、カタログからページに追加できる 2 つのサーバーコントロールが含まれます。

メモ :
カスタムコントロールを作成している場合は、ここで、この例のサーバーコントロールの 1 つをカスタムコントロールに置き換えることができます。ただし、その手順は、このチュートリアルの説明範囲を超えるので省略します。詳細については、WebPart クラスのドキュメントでコード例を参照してください。

カスタムコントロールを作成している場合は、ここで、この例のサーバーコントロールの 1 つをカスタムコントロールに置き換えることができます。ただし、その手順は、このチュートリアルの説明範囲を超えるので省略します。詳細については、WebPart クラスのドキュメントでコード例を参照してください。

カタログに追加した各コントロールに Title プロパティを追加します。ここでは、下のコード例に示した、タイトルの文字列値を使用します。タイトルは、通常、デザイン時にこれらの 2 つのサーバーコントロールに設定できるプロパティではありませんが、ユーザーが実行時にカタログからこれらのコントロールを WebPartZone ゾーンに追加すると、それぞれのコントロールが GenericWebPart コントロールでラップされます。これにより 2 つのコントロールは Web パーツコントロールとして動作するようになるので、タイトルを表示できます。

DeclarativeCatalogPart コントロールに含まれる 2 つのコントロールのコードは、次のように記述されます。
```
<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>
```
このページを保存します。

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

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

ページをブラウザに読み込みます。
[Display Mode] メニューの [Catalog] をクリックします。

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

コントロールが Main ゾーンに追加されます。必要に応じて、カタログからコントロールの複数のインスタンスをページに追加できます。ファイルアップロードコントロールとカレンダーを Main ゾーンに表示したページを次の図に示します。

カタログから Main ゾーンに追加されたコントロール
[Display Mode] メニューの [Browse] をクリックします。

カタログが消え、ページが最新表示されます。
ブラウザを閉じ、ページを読み込み直します。

行った変更が保持されています。

次の手順

このチュートリアルでは、ASP.NET Web ページで簡単な Web パーツコントロールを使用するための基本的な操作方法を示しました。より高度な別の Web パーツ機能を試すこともできます。次に行う作業の例を示します。

このチュートリアルの静的な Web パーツよりも高度な機能を持った Web パーツコントロールを作成します。Web パーツコントロールはユーザーコントロールとしても、カスタムコントロールとしても作成できます。詳細については、WebPart クラスのドキュメントを参照してください。

参照

次の方法で共有

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

前提条件

Web サイトの作成と設定

新しい Web サイトを作成するには

Web パーツを使用する簡単なページの作成

Web パーツコントロールを格納するためのページを作成するには

Main ゾーンの内容を作成するには

ユーザーコントロールを作成するには

Web パーツコントロールを Sidebar ゾーンに追加するには

ページをテストするには

ユーザーによるページの編集とレイアウトの変更を可能にする方法

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

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

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

実行時の Web パーツの追加

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

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

次の手順

参照

処理手順

概念

参照

その他のリソース

次の方法で共有

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

前提条件

Web サイトの作成と設定

新しい Web サイトを作成するには

Web パーツを使用する簡単なページの作成

Web パーツ コントロールを格納するためのページを作成するには

Main ゾーンの内容を作成するには

ユーザー コントロールを作成するには

Web パーツ コントロールを Sidebar ゾーンに追加するには

ページをテストするには

ユーザーによるページの編集とレイアウトの変更を可能にする方法

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

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

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

実行時の Web パーツの追加

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

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

次の手順

参照

処理手順

概念

参照

その他のリソース

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

Web パーツコントロールを格納するためのページを作成するには

ユーザーコントロールを作成するには

Web パーツコントロールを Sidebar ゾーンに追加するには

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

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