チュートリアル : ユーザーコントロールに Web パーツパーソナル化を実装する

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

更新 : 2007 年 11 月

このチュートリアルは、Web パーツパーソナル化によりユーザー固有の既定値を Web ページ上に提供する、ASP.NET ユーザーコントロールの作成方法について説明します。

ASP.NET Web パーツを使用すると、ユーザーは、目的に合わせて外観と内容を変更できるモジュール式のレイアウトを使用して、Web ページを作成できます。パーソナル化と呼ばれる重要な Web パーツ機能では、各ページのユーザー固有の設定を保存し、その後のブラウザセッションでこれらの設定を再利用できます。

Web パーツとパーソナル化を使用すると、多くの Web アプリケーションで役に立つ機能、つまり、ユーザー固有の既定値をフォームに提供する機能を備えた Web ページを作成できます。このチュートリアルでは、ユーザー固有の既定値を、ユーザーコントロール (パーソナル化できる Web パーツコントロールと見なされる) を実装することで提供する方法を示します。この開発方法は、たとえばカスタマサービスエージェント用のアプリケーションを作成してオンラインフォームに入力するような場合に役立つことがあります。Web パーツとパーソナル化の機能を使用すると、ページで各エージェントを認識できます。ユーザーコントロールにより、各エージェントはフォーム上のフィールドの既定値を保存でき、その後ページにアクセスしたときにその既定値が自動的に埋め込まれます。

メモ :
このチュートリアルで作成するユーザーコントロールは、WebPart クラスを継承しません。ただしこのチュートリアルでは、ユーザーコントロールが WebPart コントロールとして機能できることを学びます。チュートリアルを実行しているときに、ユーザーコントロールを WebPartZoneBase ゾーンに追加します。これにより、ASP.NET が GenericWebPart コントロールでユーザーコントロールをラップします。これで、ユーザーコントロールは他の WebPart コントロールのように動作するため、パーソナル化について学ぶことができます。

このチュートリアルで作成するユーザーコントロールは、WebPart クラスを継承しません。ただしこのチュートリアルでは、ユーザーコントロールが WebPart コントロールとして機能できることを学びます。チュートリアルを実行しているときに、ユーザーコントロールを WebPartZoneBase ゾーンに追加します。これにより、ASP.NET が GenericWebPart コントロールでユーザーコントロールをラップします。これで、ユーザーコントロールは他の WebPart コントロールのように動作するため、パーソナル化について学ぶことができます。

このチュートリアルでは、次の作業を行う方法について説明します。

パーソナル化できるプロパティを持つユーザーコントロールを作成し、その値を長期ストレージに保存します。
Web ページのフォーム上にユーザー固有の既定値を表示します。

ゾーン内のユーザーコントロールを実際の WebPart コントロールとして操作します。

メモ :
この種のアプリケーションは、ASP.NET プロファイルを使用して開発できます。ただし、この場合、買い物カゴアプリケーションのように、ユーザーに関してアプリケーション全体で再利用する情報は格納されません。代わりに、ページごとのユーザー固有の設定または各コントロールの設定を保存します。プロファイルの詳細については、「ASP.NET プロファイルプロパティの概要」を参照してください。

この種のアプリケーションは、ASP.NET プロファイルを使用して開発できます。ただし、この場合、買い物カゴアプリケーションのように、ユーザーに関してアプリケーション全体で再利用する情報は格納されません。代わりに、ページごとのユーザー固有の設定または各コントロールの設定を保存します。プロファイルの詳細については、「ASP.NET プロファイルプロパティの概要」を参照してください。

前提条件

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

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

パーソナル化できるユーザーコントロールの作成

ここでは、エージェントの情報フォーム用のユーザーインターフェイス (UI) を備えたユーザーコントロールを作成します。また、このコントロールは、名前や電話情報用のパーソナル化できるプロパティを公開します。

メモ :
Web パーツパーソナル化は既定で有効になるため、有効にする必要はありません。パーソナル化の詳細については、「Web パーツのパーソナル化の概要」を参照してください。

ユーザーコントロール用のパーソナル化できるプロパティを作成するには

テキストエディタで新しいファイルを作成し、ファイルの先頭に次のコントロール宣言と、開始と終了の <script> タグを追加します。

<%@ control language="VB" classname="AccountUserControl" %>
<script runat="server">
</script>

<%@ control language="C#" classname="AccountUserControl" %>
<script runat="server">
</script>

次の例に示すように、UserName という名前と Phone という名前の 2 つのパーソナル化できるプロパティを作成するコードを、<script> タグ内に追加します。

メモ :
それぞれのプロパティが Personalizable 属性を持ちます。これにより、Web パーツパーソナル化が、データベースにプロパティ値を格納できるようになります。

  <Personalizable()> _
  Property UserName() As String

    Get
      If Textbox1.Text Is Nothing Or Textbox1.Text.Length < 0 Then
          Return String.Empty
      Else
          Return Textbox1.Text
      End If
    End Get

    Set(ByVal value As String)
      Textbox1.Text = value
    End Set

  End Property

  <Personalizable()> _
  Property Phone() As String

    Get
      If Textbox2.Text Is Nothing Or Textbox2.Text.Length < 0 Then
          Return String.Empty
      Else
          Return Textbox2.Text
      End If
    End Get

    Set(ByVal value As String)
      Textbox2.Text = value
    End Set

  End Property

  [Personalizable]
  public string UserName
  {
    get
    {
      if(Textbox1.Text == null | Textbox1.Text.Length < 0)
        return String.Empty;
      else
        return Textbox1.Text;
    }

    set
    {
      Textbox1.Text = value;
    }
  }

  [Personalizable]
  public string Phone
  {
    get
    {
      if(Textbox2.Text == null | Textbox2.Text.Length < 0)
        return String.Empty;
      else
        return Textbox2.Text;
    }

    set
    {
      Textbox2.Text = value;
    }
  }

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

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

ファイルに AccountUserControlCS.ascx または AccountUserControlVB.ascx (使用する言語に応じて異なります) という名前を付け、Web サイトのルートディレクトリに保存します。

これで、パーソナル化できるプロパティが追加されて既定値が保存されるため、ユーザーコントロールに UI コントロールを追加してユーザーの名前と電話番号を表示できます。

ユーザーコントロールに UI コントロールを追加するには

次のコード例に示すように、<script> タグの下に、<div> タグでラップされた Label コントロールと TextBox コントロールを追加し、ユーザーの名前を格納します。
```
<div>
<asp:label id="Label1" runat="server">Name</asp:label>
<asp:textbox id="Textbox1" runat="server" />
</div>
```
次に示すように、上で追加したコントロールの下に、<div> タグでラップされた Label コントロールと TextBox コントロールを追加し、ユーザーの電話番号を格納します。
```
<div>
<asp:label id="Label2" runat="server">Phone</asp:label>
<asp:textbox id="Textbox2" runat="server" />
</div>
```
上で追加したコントロールの下に、<div> タグでラップされた <asp:button> 要素を追加し、ポストバックを実行してユーザーの情報を保存します。
```
<div>
<asp:button id="Button1" runat="server" 
  text="Save Form Values" />
</div>
```
ファイルを保存します。

Web パーツコントロールとしてのユーザーコントロールの参照

これで、パーソナル化できるプロパティを持つユーザーコントロールが作成されたため、ASP.NET Web ページを作成し、このユーザーコントロールを Web パーツコントロールとしてホストできます。パーソナル化機能が動作するには、コントロールを Web パーツコントロールとしてホストする必要があります。

ユーザーコントロールを Web パーツコントロールとして参照するには

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

次の例に示すように、ページ宣言の下に、前に作成したユーザーコントロールを参照する宣言を追加します。

<%@ register tagprefix="uc1" 
    tagname="AccountUserControl" 
    src="AccountUserControlvb.ascx"%>

<%@ register tagprefix="uc1" 
    tagname="AccountUserControl" 
    src="AccountUserControlcs.ascx"%>

コントロール参照の下に、ユーザーコントロールを Web パーツコントロールとしてホストする、次の基本的なページ構造を追加します。

メモ :
ユーザーコントロールが Web パーツコントロールとして機能するには、ページに <asp:webpartmanager> 要素を組み込み、ユーザーコントロールを <asp:webpartzone> 要素および <zonetemplate> 要素に連続して組み込む必要があります。

<html>
<head runat="server">
    <title>Personalizable User Control</title>
</head>
<body>
    <form id="form1" runat="server">
      <asp:webpartmanager id="WebPartManager1" runat="server"  />
      <asp:webpartzone id="zone1" runat="server" headertext="Main">
        <zonetemplate>
          <uc1:AccountUserControl 
            runat="server" 
            id="accountwebpart"
            title="Agent Information" /> 
        </zonetemplate>
      </asp:webpartzone>
    </form>
</body>
</html>

ファイルに Hostaccountcontrol.aspx という名前を付け、ユーザーコントロールと同じディレクトリに保存します。

これでパーソナル化できるユーザーコントロールが作成され、Web フォームページでそれが Web パーツコントロールとして参照されます。最後の手順では、このユーザーコントロールをテストします。

パーソナル化できるユーザーコントロールをテストするには

Hostaccountcontrol.aspx ページをブラウザに読み込みます。
[Name] フィールドおよび [Phone] フィールドに値を入力し、[Save Form Values] をクリックします。
ブラウザを閉じます。
ページをもう一度ブラウザに読み込みます。

前で入力した値がフォームに表示されます。これらは、パーソナル化できるプロパティに保存され、ブラウザにページを読み込んだときにデータベースから復元された値です。
フォームに新しい名前を入力しますが、保存を実行するボタンはクリックしません。
ブラウザを閉じます。
ページをもう一度ブラウザに読み込みます。

パーソナル化したプロパティに入力および保存した元の値は、新しい値を保存していないため、フォームに再表示されます。

次の手順

このチュートリアルでは、パーソナル化できるプロパティを持つユーザーコントロールの作成に関連する基本的な作業について説明しました。特定のコントロールおよびページ用のユーザー固有の設定を保存し、新しいブラウザセッションでユーザーがページにもう一度アクセスすると、保存されたこれらの設定を表示できるコントロールを作成しました。次に行う作業の例を示します。

Web パーツページの作成に関連するその他のコンポーネントについて調べます。概要については、「チュートリアル : Web パーツページの作成」を参照してください。
ユーザーコントロールの操作についてさらに習得します。詳細については、「ASP.NET ユーザーコントロールの概要」を参照してください。
ユーザーコントロールに比べてプログラムによるより詳細な制御が可能で、すべての範囲の Web パーツ機能を備えた独自のカスタム Web パーツコントロールを作成する方法について習得します。詳細については、「方法 : ユーザーコントロールを Web パーツコントロールとして処理する」を参照してください。

参照

概念

ASP.NET Web パーツの概要

Web パーツのパーソナル化の概要

次の方法で共有

チュートリアル : ユーザーコントロールに Web パーツパーソナル化を実装する

前提条件

パーソナル化できるユーザーコントロールの作成

ユーザーコントロール用のパーソナル化できるプロパティを作成するには

ユーザーコントロールに UI コントロールを追加するには

Web パーツコントロールとしてのユーザーコントロールの参照

ユーザーコントロールを Web パーツコントロールとして参照するには

パーソナル化できるユーザーコントロールをテストするには

次の手順

参照

概念

その他のリソース

次の方法で共有

チュートリアル : ユーザー コントロールに Web パーツ パーソナル化を実装する

前提条件

パーソナル化できるユーザー コントロールの作成

ユーザー コントロール用のパーソナル化できるプロパティを作成するには

ユーザー コントロールに UI コントロールを追加するには

Web パーツ コントロールとしてのユーザー コントロールの参照

ユーザー コントロールを Web パーツ コントロールとして参照するには

パーソナル化できるユーザー コントロールをテストするには

次の手順

参照

概念

その他のリソース

チュートリアル : ユーザーコントロールに Web パーツパーソナル化を実装する

パーソナル化できるユーザーコントロールの作成

ユーザーコントロール用のパーソナル化できるプロパティを作成するには

ユーザーコントロールに UI コントロールを追加するには

Web パーツコントロールとしてのユーザーコントロールの参照

ユーザーコントロールを Web パーツコントロールとして参照するには

パーソナル化できるユーザーコントロールをテストするには