次の方法で共有

方法 : ユーザー コントロールを Web パーツ コントロールとして処理する

  • [アーティクル]

更新 : 2007 年 11 月

ASP.NET Web パーツ コントロール セットを使用すると、既存の Web サーバー コントロールを Web パーツ コントロールとして使用することにより、コードを最大限に再利用し、Web パーツのパーソナル化の効果を高めることができます。ユーザー コントロールは、Web パーツ コントロールとして使用できる一種のサーバー コントロールです。このトピックでは、既存のユーザー コントロールを Web パーツ コントロールとして処理する方法を示します。

w9b5ett0.alert_note(ja-jp,VS.90).gifメモ :

この手順を実行するには、個々のユーザーを識別できる ASP.NET Web サイトが必要です。このようなサイトを既に構成している場合、それを使用できます。サイトをまだ構成していない場合、仮想ディレクトリの作成方法の詳細については、「方法 : IIS 5.0 および 6.0 内で仮想ディレクトリを作成および構成する」を参照してください。また、Web パーツのパーソナル化を扱うことができるユーザー コントロールが必要です。このようなユーザー コントロールがない場合、「コード」セクションにサンプル コントロールが示されます。

Web パーツ アプリケーションで使用されるユーザー コントロールは、実行時に WebPart コントロールのすべての機能を持ちます。詳細については、「Web パーツ アプリケーションでの ASP.NET サーバー コントロールの使用」を参照してください。ユーザー コントロールはサーバー コントロールとしての通常の機能も保持しますが、Web パーツ アプリケーションで使用されているユーザー コントロールでは出力キャッシュが無効になるという例外があります。Web パーツ コントロール セットでは、ページ要求のたびにすべてのコントロールをコントロール ツリーに追加する必要があります。これは、パーソナル化機能が有効になり、パーソナル化データがコントロールとの間を往復するために必要です。しかし、ユーザー コントロールで出力キャッシュが有効になっていると、そのコントロールはコントロール ツリーに追加されないため、Web パーツ機能と衝突します。この理由から、Web パーツ アプリケーションのユーザー コントロールでは、既定で出力キャッシュが無効になっています。

ユーザー コントロールをホストする Web パーツ ページを作成するには

  1. 新しい ASP.NET ページを作成します。次のページ宣言をページの先頭に追加します。

    <@page language="VB" %>

    <@page language="C#" %>

  2. 追加したページ宣言の後に、HTML タグによる次の基本的なページ構造を追加します。

    <html>
<head>
  <title>Web Parts Demo Page</title>
</head>
<body>
  <h1>Web Parts User Control Demonstration</h1>
  <form runat="server">
  <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>

  3. サイト内の、パーソナル化を有効にしたディレクトリにページを保存します。

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

  1. ページの <form> 要素のすぐ下に WebPartManager コントロールを追加します。

    <asp:webpartmanager id="WebPartManager1" runat="server" />

  2. <asp:webpartmanager> 要素のすぐ下の、表の最初の <td> タグ セット (表の最初の列) 内に、後で追加するユーザー コントロールを格納する WebPartZone コントロールを追加します。

    <asp:webpartzone id="SideBarZone" runat="server" 
  headertext="Sidebar Zone">
  <zonetemplate>
  </zonetemplate>
</asp:webpartzone>

  3. 追加したゾーンの <zonetemplate> 要素内に、既存のサーバー コントロールといくつかの静的なコンテンツを追加します。これらも、Web パーツ ゾーン内にあるため、実行時に Web パーツ コントロールとして処理されます。

    <asp:label runat="server" id="linksPart" title="My 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>

  4. 表の 2 番目の <td> タグ セット (表の 2 番目の列) 内に、後で追加するユーザー コントロールを格納する別の WebPartZone コントロールを追加します。

    <asp:webpartzone id="MainZone" runat="server" 
  headertext="Main Zone">
  <zonetemplate>
  </zonetemplate>
</asp:webpartzone>

  5. 表の 3 番目の <td> 要素 (3 番目の列) 内に、<asp:editorzone> 要素を追加します。<zonetemplate> 要素を追加し、次に、<asp:appearanceeditorpart> 要素および <asp:layouteditorpart> 要素を追加します。エディタ ゾーンのコードは、次のようになります。

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

  6. このページを保存します。

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

  1. テキスト エディタで新しいファイルを作成します。このファイルには、Web パーツ コントロールとしてページに追加されるユーザー コントロールが格納されます。

    w9b5ett0.alert_note(ja-jp,VS.90).gifメモ :

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

  2. 新しいファイルの上部に、次の例に示すようなコントロール宣言を追加します。

    <%@ control language="VB" classname="SearchUserControl" %>

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

  3. コントロール宣言の後に 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>

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

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

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

    w9b5ett0.alert_security(ja-jp,VS.90).gifセキュリティに関するメモ :

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

Web パーツ メイン ゾーン内でユーザー コントロールを参照するには

  1. Web ページの上部、ページ宣言の直後に、作成したユーザー コントロールを参照する次の宣言を追加します。このトピックで示すユーザー コントロール サンプルを使用しない場合、使用しているユーザー コントロールのパスおよびファイル名に src 属性を設定する必要があります。オプションで、別の値を tagname 属性に代入することもできます。

    [VB]

    <%@ register tagprefix="uc1" tagname="SearchUserControl" 
    src="searchusercontrolvb.ascx" %>

    [C#]

    <%@ register tagprefix="uc1" tagname="SearchUserControl" 
    src="searchusercontrolcs.ascx" %>

  2. メイン ゾーンの <zonetemplate> 要素内で、以前に作成したユーザー コントロールを参照します。

    <uc1:SearchUserControl id="searchPart" runat="server"
  title="Search" />

  3. ページを保存して閉じます。

使用例

ユーザー コントロールをホストするサンプル Web パーツ ページの、完全なコード リストのコード例を次に示します。また、Web パーツ コントロールとしてページ内で参照されるサンプル ユーザー コントロールのコードも示します。ユーザー コントロールは、パーソナル化が可能な完全な Web パーツ コントロールとして処理されるためには、[Personalizable] コード属性を使用してパブリック プロパティを公開する必要があります。

<!-- Web Parts page to host the user control -->
<%@ page language="VB" %>
<%@ register tagprefix="uc1" tagname="SearchUserControl" 
  src="searchusercontrol.ascx" %>

<html>
<head>
  <title>Web Parts Demo Page</title>
</head>
<body>
  <h1>Web Parts User Control Demonstration</h1>
  <form runat="server" id="form1">
  <asp:webpartmanager id="WebPartManager1" runat="server" />
  <asp:webpartpagemenu
    id="pagemenu1"
    runat="server"
    Mode="Menu"
    MenuStyle-BorderWidth="1">
    <browsemodeverb text="Browse" />
    <designmodeverb text="Design" />
    <editmodeverb text="Edit" />
  </asp:webpartpagemenu>
  <table cellspacing="0" cellpadding="0" border="0">
    <tr>
      <td valign="top">
        <asp:webpartzone id="SideBarZone" runat="server" 
          headertext="Sidebar Zone">
          <zonetemplate>
            <asp:label runat="server" id="linksPart" title="My 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>
          </zonetemplate>
        </asp:webpartzone>
      </td>
      <td valign="top">
        <asp:webpartzone id="MainZone" runat="server" 
          headertext="Main Zone">
          <zonetemplate>
            <uc1:SearchUserControl id="searchPart" runat="server"
              title="Search" />
          </zonetemplate>
        </asp:webpartzone>
      </td>
      <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>
    </tr>
  </table>
  </form>
</body>
</html>


<!-- Web Parts user control -->
<%@ 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>
<asp:textbox runat="server" id="inputBox"></asp:textbox>
<br />
<asp:button runat="server" id="searchButton" text="Search" />

<!-- Web Parts page to host the user control -->
<%@ page language="C#" %>
<%@ register tagprefix="uc1" tagname="SearchUserControl" 
  src="searchusercontrol.ascx" %>

<html>
<head>
  <title>Web Parts Demo Page</title>
</head>
<body>
  <h1>Web Parts User Control Demonstration</h1>
  <form runat="server" id="form1">
  <asp:webpartmanager id="WebPartManager1" runat="server" />
  <asp:webpartpagemenu
    id="pagemenu1"
    runat="server"
    Mode="Menu"
    MenuStyle-BorderWidth="1">
    <browsemodeverb text="Browse" />
    <designmodeverb text="Design" />
    <editmodeverb text="Edit" />
  </asp:webpartpagemenu>
  <table cellspacing="0" cellpadding="0" border="0">
    <tr>
      <td valign="top">
        <asp:webpartzone id="SideBarZone" runat="server" 
          headertext="Sidebar Zone">
          <zonetemplate>
            <asp:label runat="server" id="linksPart" title="My 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>
          </zonetemplate>
        </asp:webpartzone>
      </td>
      <td valign="top">
        <asp:webpartzone id="MainZone" runat="server" 
          headertext="Main Zone">
          <zonetemplate>
            <uc1:SearchUserControl id="searchPart" runat="server"
              title="Search" />
          </zonetemplate>
        </asp:webpartzone>
      </td>
      <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>
    </tr>
  </table>
  </form>
</body>
</html>


<!-- Web Parts user control -->
<%@ control language="C#" classname="SearchUserControl" %>
<script runat="server">
  private int results;
  
  [Personalizable]
  public int ResultsPerPage
  {
    get
      {return results;}
    
    set
      {results = value;}
  }    
</script>
<asp:textbox runat="server" id="inputBox"></asp:textbox>
<br />
<asp:button runat="server" id="searchButton" text="Search" />

サンプル コードを実行し、[表示モード] ページ メニューをクリックすると、このメニューで各種のパーソナル化モード、Browse、Design、Editの間を切り替えることができます。Designモードでは、2 つの Web パーツ コントロールのヘッダーをクリックし、他のゾーンにドラッグすることで、ページのレイアウトを変更できます。Editモードでは、いずれかの Web パーツ コントロールのヘッダー内で編集イメージをクリックして、そのコントロールのさまざまな UI プロパティを設定できます。

参照

処理手順

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

概念

ASP.NET Web パーツの概要

Web パーツ アプリケーションでの ASP.NET サーバー コントロールの使用