プロファイル、テーマ、Web パーツ

  • [アーティクル]

作成者: Microsoft

ASP.NET 2.0 では、構成とインストルメンテーションに大きな変更があります。 新しい ASP.NET 構成 API を使用すると、構成の変更をプログラムで行うことができます。 さらに、多くの新しい構成設定が存在すると、新しい構成とインストルメンテーションが可能になります。

ASP.NET 2.0 は、カスタマイズされた Web サイトの領域の大幅な改善を表します。 既に取り上げたメンバーシップ機能に加えて、プロファイル、テーマ、Web パーツを ASP.NET すると、Web サイトのパーソナル化が大幅に強化されます。

ASP.NET プロファイル

ASP.NET プロファイルはセッションに似ています。 違いは、プロファイルが永続的であるのに対し、ブラウザーを閉じるとセッションが失われることです。 セッションとプロファイルのもう 1 つの大きな違いは、プロファイルが厳密に型指定されているため、開発プロセス中に IntelliSense を提供することです。

プロファイルは、アプリケーションのマシン構成ファイルまたはweb.config ファイルのいずれかで定義されます。 (サブフォルダー web.config ファイルにプロファイルを定義することはできません。次のコードでは、Web サイトの訪問者の名と姓を格納するプロファイルを定義します。

<profile>
    <properties>
        <add name="FirstName" />
        <add name="LastName" />
    </properties>
</profile>

プロファイル プロパティの既定のデータ型は System.String です。 上記の例では、データ型は指定されませんでした。 したがって、FirstName プロパティと LastName プロパティはどちらも String 型です。 前述のように、プロファイル プロパティは厳密に型指定されます。 次のコードでは、Int32 型の age の新しいプロパティを追加します。

<profile>
    <properties>
        <add name="FirstName" />
        <add name="LastName" />
        <add name="Age" type="Int32"/>
    </properties>
</profile>

プロファイルは通常、ASP.NET フォーム認証で使用されます。 フォーム認証と組み合わせて使用すると、各ユーザーにはユーザー ID に関連付けられた個別のプロファイルがあります。 ただし、次に示すように、構成ファイルの anonymousIdentification> 要素と allowAnonymous 属性を使用して<、匿名アプリケーションでのプロファイルの使用を許可することもできます。

<anonymousIdentification enabled="true" />
<profile>
    <properties>
        <add name="FirstName" allowAnonymous="true" />
        <add name="LastName" allowAnonymous="true" />
    </properties>
</profile>

匿名ユーザーがサイトを参照すると、ASP.NET はユーザーの ProfileCommon のインスタンスを作成します。 このプロファイルでは、ブラウザーの Cookie に格納されている一意の ID を使用して、ユーザーを一意の訪問者として識別します。 このようにして、匿名で閲覧しているユーザーのプロファイル情報を格納できます。

プロファイル グループ

プロファイルのプロパティをグループ化できます。 プロパティをグループ化することで、特定のアプリケーションの複数のプロファイルをシミュレートできます。

次の構成では、2 つのグループの FirstName プロパティと LastName プロパティを構成します。購入者と見込み客。

<profile>
    <properties>
        <group name="Buyers">
            <add name="FirstName" />
            <add name="Lastname" />
            <add name="NumberOfPurchases" type="Int32" />
        </group>
        <group name="Prospects">
            <add name="FirstName" />
            <add name="Lastname" />
        </group>
    </properties>
</profile>

その後、次のように特定のグループにプロパティを設定できます。

Profile.Buyers.NumberOfPurchases += 1;

複雑なオブジェクトの格納

これまでに説明した例では、単純なデータ型をプロファイルに格納しています。 serializeAs 属性を使用してシリアル化する方法を次のように指定することで、プロファイルに複雑なデータ型を格納することもできます。

<add name="PurchaseInvoice"
     type="PurchaseInvoice"
     serializeAs="Binary"
/>

この場合、型は PurchaseInvoice です。 PurchaseInvoice クラスはシリアル化可能としてマークする必要があり、任意の数のプロパティを含めることができます。 たとえば、PurchaseInvoice に NumItemsPurchased というプロパティがある場合、コードでそのプロパティを次のように参照できます。

Profile.PurchaseInvoice.NumItemsPurchased

プロファイルの継承

複数のアプリケーションで使用するプロファイルを作成できます。 ProfileBase から派生したプロファイル クラスを作成すると、次に示すように inherits 属性を使用して、複数のアプリケーションでプロファイルを再利用できます。

<profile inherits="PurchasingProfile" />

この場合、 PurchasingProfile クラスは次のようになります。

using System;
using System.Web.Profile;
public class PurchasingProfile : ProfileBase {
    private string _ProductName;
    private Int32 _ProductID;
    public string ProductName {
        get { return _ProductName; }
        set { _ProductName = value; }
    }
    public Int32 ProductID {
        get { return _ProductID; }
        set { _ProductID = value; }
    }
}

プロファイル プロバイダー

ASP.NET プロファイルでは、プロバイダー モデルが使用されます。 既定のプロバイダーは、SqlProfileProvider プロバイダーを使用して、Web アプリケーションの App_Data フォルダーのSQL Server Express データベースに情報を格納します。 データベースが存在しない場合、プロファイルが情報の格納を試みると、ASP.NET によって自動的に作成されます。

ただし、場合によっては、独自のプロファイル プロバイダーを開発する必要があります。 ASP.NET プロファイル機能を使用すると、さまざまなプロバイダーを簡単に使用できます。

カスタム プロファイル プロバイダーは、次の場合に作成します。

  • プロファイル情報は、FoxPro データベースや Oracle データベースなど、.NET Frameworkに含まれるプロファイル プロバイダーでサポートされていないデータ ソースに格納する必要があります。
  • .NET Frameworkに含まれるプロバイダーによって使用されるデータベース スキーマとは異なるデータベース スキーマを使用してプロファイル情報を管理する必要があります。 一般的な例として、プロファイル情報を既存のSQL Server データベース内のユーザー データと統合する必要があります。

必須クラス

プロファイル プロバイダーを実装するには、System.Web.Profile.ProfileProvider 抽象クラスを継承するクラスを作成します。 ProfileProvider 抽象クラスは、System.Configuration.Provider.ProviderBase 抽象クラスを継承する System.Configuration.SettingsProvider 抽象クラスを継承します。 この継承チェーンにより、 ProfileProvider クラスの必須メンバーに加えて、 SettingsProvider クラスと ProviderBase クラスの必須メンバーを実装する必要があります。

次の表では、 ProviderBase、 SettingsProvider、 ProfileProvider 抽象クラスから実装する必要があるプロパティとメソッドについて説明します。

ProviderBase メンバー

メンバー 説明
Initialize メソッド プロバイダー インスタンスの名前と構成設定の NameValueCollection を入力として受け取ります。 実装固有の値や、マシン構成またはWeb.config ファイルで指定されたオプションなど、プロバイダー インスタンスのオプションとプロパティ値を設定するために使用されます。

SettingsProvider メンバー

メンバー 説明
ApplicationName プロパティ 各プロファイルと共に格納されるアプリケーション名。 プロファイル プロバイダーは、アプリケーション名を使用して、アプリケーションごとにプロファイル情報を個別に格納します。 これにより、異なるアプリケーションで同じユーザー名が作成された場合、複数の ASP.NET アプリケーションで同じデータ ソースを競合なく使用できます。 または、同じアプリケーション名を指定することで、複数の ASP.NET アプリケーションでプロファイル データ ソースを共有することもできます。
GetPropertyValues メソッド SettingsContext オブジェクトと SettingsPropertyCollection オブジェクトを入力として受け取ります。 SettingsContext は、ユーザーに関する情報を提供します。 情報を主キーとして使用して、ユーザーのプロファイル プロパティ情報を取得できます。 SettingsContext オブジェクトを使用して、ユーザー名と、ユーザーが認証されているか匿名であるかを取得します。 SettingsPropertyCollection には、SettingsProperty オブジェクトのコレクションが含まれています。 各 SettingsProperty オブジェクトには、プロパティの名前と型、およびプロパティの既定値や、プロパティが読み取り専用かどうかなどの追加情報が用意されています。 GetPropertyValues メソッドは、入力として指定された SettingsProperty オブジェクトに基づいて、SettingsPropertyValueCollection に SettingsPropertyValue オブジェクトを設定します。 指定したユーザーのデータ ソースの値は、各 SettingsPropertyValue オブジェクトの PropertyValue プロパティに割り当てられ、コレクション全体が返されます。 メソッドを呼び出すと、指定したユーザー プロファイルの LastActivityDate 値も現在の日付と時刻に更新されます。
SetPropertyValues メソッド 入力として SettingsContext と SettingsPropertyValueCollection オブジェクトを受け取ります。 SettingsContext は、ユーザーに関する情報を提供します。 情報を主キーとして使用して、ユーザーのプロファイル プロパティ情報を取得できます。 SettingsContext オブジェクトを使用して、ユーザー名と、ユーザーが認証されているか匿名であるかを取得します。 SettingsPropertyValueCollection には、SettingsPropertyValue オブジェクトのコレクションが含まれています。 各 SettingsPropertyValue オブジェクトは、プロパティの名前、型、および値に加えて、プロパティの既定値や、プロパティが読み取り専用かどうかを示す追加情報を提供します。 SetPropertyValues メソッドは、指定したユーザーのデータ ソースのプロファイル プロパティ値を更新します。 メソッドを呼び出すと、指定したユーザー プロファイルの LastActivityDate 値と LastUpdatedDate 値も現在の日時に更新されます。

ProfileProvider メンバー

メンバー 説明
DeleteProfiles メソッド ユーザー名の文字列配列を入力として受け取り、アプリケーション名が ApplicationName プロパティ値と一致する指定された名前のすべてのプロファイル情報とプロパティ値をデータ ソースから削除します。 データ ソースでトランザクションがサポートされている場合は、すべての削除操作をトランザクションに含め、削除操作が失敗した場合はトランザクションをロールバックして例外をスローすることをお勧めします。
DeleteProfiles メソッド ProfileInfo オブジェクトのコレクションを入力として受け取り、アプリケーション名が ApplicationName プロパティ値と一致する各プロファイルのすべてのプロファイル情報とプロパティ値をデータ ソースから削除します。 データ ソースでトランザクションがサポートされている場合は、すべての削除操作をトランザクションに含め、トランザクションをロールバックし、削除操作が失敗した場合は例外をスローすることをお勧めします。
DeleteInactiveProfiles メソッド ProfileAuthenticationOption 値と DateTime オブジェクトを入力として受け取り、最後のアクティビティの日付が指定された日時以下で、アプリケーション名が ApplicationName プロパティ値と一致する場合に、すべてのプロファイル情報とプロパティ値をデータ ソースから削除します。 ProfileAuthenticationOption パラメーターは、匿名プロファイル、認証済みプロファイルのみ、またはすべてのプロファイルのみを削除するかどうかを指定します。 データ ソースでトランザクションがサポートされている場合は、すべての削除操作をトランザクションに含め、トランザクションをロールバックし、削除操作が失敗した場合は例外をスローすることをお勧めします。
GetAllProfiles メソッド ProfileAuthenticationOption 値、ページ インデックスを指定する整数、ページ サイズを指定する整数、およびプロファイルの合計数に設定される整数への参照を入力として受け取ります。 アプリケーション名が ApplicationName プロパティ値と一致するデータ ソース内のすべてのプロファイルの ProfileInfo オブジェクトを含む ProfileInfoCollection を返します。 ProfileAuthenticationOption パラメーターは、匿名プロファイル、認証済みプロファイルのみ、またはすべてのプロファイルのみを返すかを指定します。 GetAllProfiles メソッドによって返される結果は、ページ インデックスとページ サイズの値によって制限されます。 ページ サイズの値は、ProfileInfoCollection で返される ProfileInfo オブジェクトの最大数を指定します。 ページ インデックス値は、返す結果のページを指定します。1 は最初のページを識別します。 合計レコードのパラメーターは、プロファイルの合計数に設定された out パラメーター (Visual Basic では ByRef を使用できます) です。 たとえば、データ ストアにアプリケーションの 13 個のプロファイルが含まれており、ページ インデックス値が 2 でページ サイズが 5 の場合、返される ProfileInfoCollection には 6 番目から 10 番目のプロファイルが含まれます。 メソッドが戻るとき、レコードの合計値は 13 に設定されます。
GetAllInactiveProfiles メソッド ProfileAuthenticationOption 値、DateTime オブジェクト、ページ インデックスを指定する整数、ページ サイズを指定する整数、およびプロファイルの合計数に設定される整数への参照を入力として受け取ります。 最後のアクティビティの日付が指定した DateTime 以下で、アプリケーション名が ApplicationName プロパティ値と一致するデータ ソース内のすべてのプロファイルの ProfileInfo オブジェクトを含む ProfileInfoCollection を返します。 ProfileAuthenticationOption パラメーターは、匿名プロファイル、認証済みプロファイルのみ、またはすべてのプロファイルのみを返すかを指定します。 GetAllInactiveProfiles メソッドによって返される結果は、ページ インデックスとページ サイズの値によって制限されます。 ページ サイズの値は、ProfileInfoCollection で返される ProfileInfo オブジェクトの最大数を指定します。 ページ インデックス値は、返す結果のページを指定します。1 は最初のページを識別します。 合計レコードのパラメーターは、プロファイルの合計数に設定された out パラメーター (Visual Basic では ByRef を使用できます) です。 たとえば、データ ストアにアプリケーションの 13 個のプロファイルが含まれており、ページ インデックス値が 2 でページ サイズが 5 の場合、返される ProfileInfoCollection には 6 番目から 10 番目のプロファイルが含まれます。 メソッドが戻るとき、レコードの合計値は 13 に設定されます。
FindProfilesByUserName メソッド ProfileAuthenticationOption 値、ユーザー名を含む文字列、ページ インデックスを指定する整数、ページ サイズを指定する整数、およびプロファイルの合計数に設定される整数への参照を入力として受け取ります。 ユーザー名が指定したユーザー名と一致し、アプリケーション名が ApplicationName プロパティ値と一致するデータ ソース内のすべてのプロファイルの ProfileInfo オブジェクトを含む ProfileInfoCollection を返します。 ProfileAuthenticationOption パラメーターは、匿名プロファイル、認証済みプロファイルのみ、またはすべてのプロファイルのみを返すかを指定します。 データ ソースでワイルドカード文字などの追加の検索機能がサポートされている場合は、ユーザー名に対してより広範な検索機能を提供できます。 FindProfilesByUserName メソッドによって返される結果は、ページ インデックスとページ サイズの値によって制限されます。 ページ サイズの値は、ProfileInfoCollection で返される ProfileInfo オブジェクトの最大数を指定します。 ページ インデックス値は、返す結果のページを指定します。1 は最初のページを識別します。 合計レコードのパラメーターは、プロファイルの合計数に設定された out パラメーター (Visual Basic では ByRef を使用できます) です。 たとえば、データ ストアにアプリケーションの 13 個のプロファイルが含まれており、ページ インデックス値が 2 でページ サイズが 5 の場合、返される ProfileInfoCollection には 6 番目から 10 番目のプロファイルが含まれます。 メソッドが戻るとき、レコードの合計値は 13 に設定されます。
FindInactiveProfilesByUserName メソッド ProfileAuthenticationOption 値、ユーザー名、DateTime オブジェクト、ページ インデックスを指定する整数、ページ サイズを指定する整数、およびプロファイルの合計数に設定される整数への参照を入力として受け取ります。 ユーザー名が指定したユーザー名と一致し、最後のアクティビティの日付が指定した DateTime 以下で、アプリケーション名が ApplicationName プロパティ値と一致するデータ ソース内のすべてのプロファイルの ProfileInfo オブジェクトを含む ProfileInfoCollection を返します。 ProfileAuthenticationOption パラメーターは、匿名プロファイル、認証済みプロファイルのみ、またはすべてのプロファイルのみを返すかを指定します。 データ ソースでワイルドカード文字などの追加の検索機能がサポートされている場合は、ユーザー名に対してより広範な検索機能を提供できます。 FindInactiveProfilesByUserName メソッドによって返される結果は、ページ インデックスとページ サイズの値によって制限されます。 ページ サイズの値は、ProfileInfoCollection で返される ProfileInfo オブジェクトの最大数を指定します。 ページ インデックス値は、返す結果のページを指定します。1 は最初のページを識別します。 合計レコードのパラメーターは、プロファイルの合計数に設定された out パラメーター (Visual Basic では ByRef を使用できます) です。 たとえば、データ ストアにアプリケーションの 13 個のプロファイルが含まれており、ページ インデックス値が 2 でページ サイズが 5 の場合、返される ProfileInfoCollection には 6 番目から 10 番目のプロファイルが含まれます。 メソッドが戻るとき、レコードの合計値は 13 に設定されます。
GetNumberOfInActiveProfiles メソッド ProfileAuthenticationOption 値と DateTime オブジェクトを入力として受け取り、最後のアクティビティの日付が指定された DateTime 以下で、アプリケーション名が ApplicationName プロパティ値と一致するデータ ソース内のすべてのプロファイルの数を返します。 ProfileAuthenticationOption パラメーターは、匿名プロファイル、認証済みプロファイルのみ、またはすべてのプロファイルのみをカウントするかどうかを指定します。

ApplicationName

プロファイル プロバイダーはアプリケーションごとにプロファイル情報を個別に格納するため、データ スキーマにアプリケーション名が含まれていることと、クエリと更新にアプリケーション名も含まれていることを確認する必要があります。 たとえば、次のコマンドを使用して、ユーザー名とプロファイルが匿名かどうかに基づいてデータベースからプロパティ値を取得し、 ApplicationName 値がクエリに確実に含まれるようにします。

SELECT Property
FROM PropertyTable
WHERE Username = 'user1'
AND IsAnonymous = False
AND ApplicationName = 'MyApplication'

ASP.NET テーマ

ASP.NET 2.0 テーマとは

Web アプリケーションの最も重要な側面の 1 つは、サイト全体で一貫した外観です。 ASP.NET 1.x 開発者は通常、カスケード スタイル シート (CSS) を使用して、一貫した外観を実装します。 ASP.NET 2.0 テーマは、ASP.NET 開発者が ASP.NET サーバー コントロールと HTML 要素の外観を定義する機能を提供するため、CSS によって大幅に改善されます。 ASP.NET テーマは、個々のコントロール、特定の Web ページ、または Web アプリケーション全体に適用できます。 テーマでは、CSS ファイル、オプションのスキン ファイル、イメージが必要な場合はオプションの Images ディレクトリを組み合わせて使用します。 スキン ファイルは、ASP.NET サーバー コントロールの外観を制御します。

テーマはどこに保存されますか?

テーマが格納される場所は、そのスコープによって異なります。 任意のアプリケーションに適用できるテーマは、次のフォルダーに格納されます。

C:\WINDOWS\Microsoft.NET\Framework\v2.x.xxxxx\ASP.NETClientFiles\Themes\<Theme_Name>

特定のアプリケーションに固有のテーマは、Web サイトのルートにあるディレクトリに格納されます App\_Themes\<Theme\_Name> 。

Note

スキン ファイルでは、外観に影響するサーバー コントロールのプロパティのみを変更する必要があります。

グローバル テーマは、Web サーバー上で実行されている任意のアプリケーションまたは Web サイトに適用できるテーマです。 これらのテーマは、既定で ASP に格納されます。v2.x.xxxxx ディレクトリ内にある NETClientfiles\Themes ディレクトリ。 または、テーマ ファイルを Web サイトのルートにある aspnet_client/system_web/[version]/Themes/[theme_name] フォルダーに移動することもできます。

アプリケーション固有のテーマは、ファイルが存在するアプリケーションにのみ適用できます。 これらのファイルは、Web サイトの App\_Themes/<theme\_name> ルートにあるディレクトリに格納されます。

テーマのコンポーネント

テーマは、1 つ以上の CSS ファイル、オプションのスキン ファイル、およびオプションの Images フォルダーで構成されます。 CSS ファイルには任意の名前 (default.css や theme.css など) を指定でき、themes フォルダーのルートに含まれている必要があります。 CSS ファイルは、特定のセレクターの通常の CSS クラスと属性を定義するために使用されます。 CSS クラスの 1 つをページ要素に適用するには、 CSSClass プロパティが使用されます。

スキン ファイルは、ASP.NET サーバー コントロールのプロパティ定義を含む XML ファイルです。 次に示すコードは、スキン ファイルの例です。

<asp:TextBox runat="server"
    BackColor="#FFC080"
    BorderColor="Black"
    BorderStyle="Solid"
    BorderWidth="1px"
    Font-Names="Tahoma, Verdana, Arial"
    Font-Size="Smaller" />

<asp:Button runat="server"
    BackColor="#C04000"
    BorderColor="Maroon"
    BorderStyle="Solid"
    BorderWidth="2px"
    Font-Names="Tahoma,Verdana,Arial"
    Font-Size="Smaller"
    ForeColor="#FFFFC0" />

次の図 1 は、テーマを適用せずに参照された小さな ASP.NET ページを示しています。 図 2 は 、テーマが適用された同じファイルを示しています。 背景色とテキストの色は、CSS ファイルを使用して構成されます。 ボタンとテキスト ボックスの外観は、上記のスキン ファイルを使用して構成されます。

テーマなし

図 1: テーマなし

適用されたテーマ

図 2: 適用されたテーマ

上記のスキン ファイルは、すべての TextBox コントロールと Button コントロールの既定のスキンを定義します。 つまり、ページに挿入されたすべての TextBox コントロールと Button コントロールは、この外観になります。 コントロールの SkinID プロパティを使用して、これらのコントロールの特定のインスタンスに適用できるスキンを定義することもできます。

次のコードでは、Button コントロールのスキンを定義します。 GoButton の SkinID プロパティを持つ Button コントロールのみが、スキンの外観を受け取ります。

<asp:Button runat="server"
    BackColor="#C04000"
    BorderColor="Maroon"
    BorderStyle="Solid"
    BorderWidth="2px"
    Font-Names="Tahoma,Verdana,Arial"
    Font-Size="Smaller"
    ForeColor="#FFFFC0"
    Text=go
    SkinID=goButton
    Width="95px" />

既定のスキンは、サーバー コントロールの種類ごとに 1 つだけ持つことができます。 追加のスキンが必要な場合は、SkinID プロパティを使用する必要があります。

ページにテーマを適用する

テーマは、次のいずれかの方法を使用して適用できます。

  • <web.config ファイルの pages> 要素内
  • ページの @Page ディレクティブ内
  • プログラムを使用する

構成ファイルでのテーマの適用

アプリケーション構成ファイルにテーマを適用するには、次の構文を使用します。

<system.web>
    <pages theme="CoolTheme" />
    ...
</system.web>

ここで指定するテーマ名は、themes フォルダーの名前と一致している必要があります。 このフォルダーは、このコースで前述した任意の場所に存在できます。 存在しないテーマを適用しようとすると、構成エラーが発生します。

ページ ディレクティブでのテーマの適用

@ Page ディレクティブでテーマを適用することもできます。 このメソッドを使用すると、特定のページにテーマを使用できます。

ディレクティブに @Page テーマを適用するには、次の構文を使用します。

<%@ Page Language="C#" Theme=CoolTheme CodeFile="Default.aspx.cs" ... %>

ここでも、ここで指定したテーマは、前述のテーマ フォルダーと一致している必要があります。 存在しないテーマを適用しようとすると、ビルド エラーが発生します。 また、Visual Studio によって 属性が強調表示され、そのようなテーマが存在しないことを通知します。

プログラムによるテーマの適用

テーマをプログラムで適用するには、Page_PreInit メソッドでページの Theme プロパティを指定する必要があります。

プログラムでテーマを適用するには、次の構文を使用します。

Page.Theme = CoolTheme;

ページのライフサイクルにより、PreInit メソッドでテーマを適用する必要があります。 その時点以降に適用した場合、ページ テーマはランタイムによって既に適用されており、その時点での変更はライフサイクルの遅すぎます。 存在しないテーマを適用すると、 HttpException が発生します。 テーマをプログラムで適用すると、いずれかのサーバー コントロールに SkinID プロパティが指定されている場合、ビルド警告が発生します。 この警告は、テーマが宣言によって適用されておらず、無視できることを通知するためのものです。

演習 1: テーマを適用する

この演習では、web サイトに ASP.NET テーマを適用します。

重要

Microsoft Word を使用してスキン ファイルに情報を入力する場合は、通常の引用符をスマート引用符に置き換えないことを確認してください。 スマートクォートはスキンファイルに問題を引き起こします。

  1. 新しい ASP.NET Web サイトを作成します。

  2. ソリューション エクスプローラーでプロジェクトを右クリックし、[新しい項目の追加] を選択します。

  3. ファイルの一覧から [Web 構成ファイル] を選択し、[追加] をクリックします。

  4. ソリューション エクスプローラーでプロジェクトを右クリックし、[新しい項目の追加] を選択します。

  5. [スキン ファイル] を選択し、[追加] をクリックします。

  6. App_Themes フォルダー内にファイルを配置するかどうかを確認するメッセージが表示されたら、[はい] をクリックします。

  7. ソリューション エクスプローラーのApp_Themes フォルダー内の SkinFile フォルダーを右クリックし、[新しい項目の追加] を選択します。

  8. ファイルの一覧から [スタイル シート] を選択し、[追加] をクリックします。 これで、新しいテーマを実装するために必要なすべてのファイルが作成されました。 ただし、Visual Studio には、テーマ フォルダー SkinFile という名前が付けられています。 そのフォルダーを右クリックし、名前を CoolTheme に変更します。

  9. SkinFile.skin ファイルを開き、ファイルの末尾に次のコードを追加します。

    <asp:TextBox runat="server"
    BackColor="#FFC080"
    BorderColor="Black"
    BorderStyle="Solid"
    BorderWidth="1px"
    Font-Names="Tahoma, Verdana, Arial"
    Font-Size="Smaller"
/>

<asp:Button runat="server"
    BackColor="#C04000"
    BorderColor="Maroon"
    BorderStyle="Solid"
    BorderWidth="2px"
    Font-Names="Tahoma,Verdana,Arial"
    Font-Size="Smaller"
    ForeColor="#FFFFC0"
/>

<asp:Button runat="server"
    BackColor="#C04000"
    BorderColor="Maroon"
    BorderStyle="Solid"
    BorderWidth="2px"
    Font-Names="Tahoma,Verdana,Arial"
    Font-Size="Smaller"
    ForeColor="#FFFFC0"
    Text="go"
    SkinID="goButton"
    Width="95px"
/>

  10. SkinFile.skin ファイルを保存します。

  11. StyleSheet.css を開きます。

  12. その中のすべてのテキストを次のように置き換えます。

    body {
    background-color: #FFDEAD;
}

  13. StyleSheet.css ファイルを保存します。

  14. Default.aspx ページを開きます。

  15. TextBox コントロールと Button コントロールを追加します。

  16. ページを保存します。 次に、Default.aspx ページを参照します。 通常の Web フォームとして表示されます。

  17. web.config ファイルを開きます。

  18. 開始 <system.web> タグのすぐ下に次のコードを追加します。

    <pages theme="CoolTheme" />

  19. web.config ファイルを保存します。 次に、Default.aspx ページを参照します。 テーマが適用された状態で表示されます。

  20. まだ開いていない場合は、Visual Studio で Default.aspx ページを開きます。

  21. ボタンを選択します。

  22. SkinID プロパティを goButton に変更します。 Visual Studio には、Button コントロールの有効な SkinID 値を含むドロップダウンが用意されています。

  23. ページを保存します。 ブラウザーでページをもう一度プレビューします。 ボタンに "go" と表示され、外観が広くなります。

SkinID プロパティを使用すると、特定の種類のサーバー コントロールのインスタンスごとに異なるスキンを簡単に構成できます。

StyleSheetTheme プロパティ

ここまでは、Theme プロパティを使用したテーマの適用についてのみ説明しました。 Theme プロパティを使用すると、スキン ファイルはサーバー コントロールの宣言型設定をオーバーライドします。 たとえば、演習 1 では、Button コントロールの SkinID に "goButton" を指定し、Button のテキストを "go" に変更しました。 デザイナーの Button の Text プロパティが "Button" に設定されているのに、テーマがオーバーロードしていることに気付いたかもしれません。 テーマは、デザイナーのプロパティ設定を常にオーバーライドします。

テーマのスキン ファイルで定義されているプロパティをデザイナーで指定されたプロパティでオーバーライドできるようにする場合は、Theme プロパティではなく StyleSheetTheme プロパティを使用できます。 StyleSheetTheme プロパティは Theme プロパティと同じですが、Theme プロパティのようにすべての明示的なプロパティ設定がオーバーライドされるわけではありません。

この動作を確認するには、演習 1 でプロジェクトからweb.config ファイルを開き、 要素を <pages> 次のように変更します。

<pages styleSheetTheme="CoolTheme" />

ここで Default.aspx ページを参照すると、Button コントロールの Text プロパティが "Button" に再び表示されます。 これは、デザイナーの明示的なプロパティ設定が、goButton SkinID によって設定された Text プロパティをオーバーライドしているためです。

テーマのオーバーライド

グローバル テーマは、アプリケーションの App_Themes フォルダーに同じ名前でテーマを適用することでオーバーライドできます。 ただし、テーマは真のオーバーライド シナリオでは適用されません。 ランタイムが App_Themes フォルダー内のテーマ ファイルを検出すると、それらのファイルを使用してテーマが適用され、グローバル テーマは無視されます。

StyleSheetTheme プロパティはオーバーライド可能であり、次のようにコードでオーバーライドできます。

const String THEME_NAME = "CoolTheme";
public override string StyleSheetTheme {
    get { return THEME_NAME; }
    set { Page.StyleSheetTheme = THEME_NAME; }
}

Web パーツ

ASP.NET Web パーツは、エンド ユーザーが Web ページのコンテンツ、外観、および動作をブラウザーから直接変更できるようにする、Web サイトを作成するための統合されたコントロール セットです。 変更は、サイト上のすべてのユーザーまたは個々のユーザーに適用できます。 ユーザーがページとコントロールを変更すると、設定を保存して、今後のブラウザー セッション (パーソナル化と呼ばれる機能) にわたってユーザーの個人設定を保持できます。 これらの Web パーツ機能は、開発者が開発者や管理者の介入なしに、エンド ユーザーが Web アプリケーションを動的にカスタマイズできるようにする機能を意味します。

Web パーツ コントロール セットを使用すると、開発者はエンド ユーザーが次のことができます。

  • ページ コンテンツをカスタマイズします。 ユーザーは、新しい Web パーツ コントロールをページに追加したり、削除したり、非表示にしたり、通常のウィンドウのように最小化したりできます。
  • ページ レイアウトをカスタマイズします。 ユーザーは、Web パーツ コントロールをページ上の別のゾーンにドラッグしたり、外観、プロパティ、動作を変更したりできます。
  • コントロールのエクスポートとインポート。 ユーザーは、他のページまたはサイトで使用する Web パーツ コントロールの設定をインポートまたはエクスポートし、コントロール内のプロパティ、外観、さらにはデータを保持できます。 これにより、エンド ユーザーに対するデータ入力と構成の要求が軽減されます。
  • 接続を作成します。 ユーザーはコントロール間の接続を確立して、たとえば、グラフ コントロールが株価ティッカー コントロール内のデータのグラフを表示できるようにします。 ユーザーは、接続自体だけでなく、グラフ コントロールのデータの表示方法の外観と詳細をカスタマイズできます。
  • サイト レベルの設定を管理およびカスタマイズします。 承認されたユーザーは、サイト レベルの設定を構成したり、サイトまたはページにアクセスできるユーザーの決定、コントロールへのロールベースのアクセスの設定などを行うことができます。 たとえば、管理ロールのユーザーは、Web パーツ コントロールをすべてのユーザーが共有するように設定し、管理者ではないユーザーが共有コントロールをカスタマイズできないようにすることができます。

通常、Web パーツは、Web パーツ コントロールを使用するページの作成、個々の Web パーツ コントロールの作成、ポータルなどのカスタマイズ可能な完全な Web アプリケーションの作成の 3 つの方法のいずれかで作業します。

ページ開発

ページ開発者は、Microsoft Visual Studio 2005 などのビジュアル デザイン ツールを使用して、Web パーツを使用するページを作成できます。 Visual Studio などのツールを使用する利点の 1 つは、Web パーツ コントロール セットに、ビジュアル デザイナーで Web パーツ コントロールをドラッグ アンド ドロップで作成および構成するための機能が用意されていることです。 たとえば、デザイナーを使用して Web パーツ ゾーンまたは Web パーツ エディター コントロールをデザインサーフェイスにドラッグし、Web パーツ コントロール セットによって提供される UI を使用してデザイナーでコントロールを右に構成できます。 これにより、Web パーツ アプリケーションの開発を高速化し、記述する必要があるコードの量を減らすことができます。

コントロール開発

既存の ASP.NET コントロールは、標準の Web サーバー コントロール、カスタム サーバー コントロール、ユーザー コントロールなど、Web パーツ コントロールとして使用できます。 環境のプログラムによる制御を最大限に行うには、WebPart クラスから派生するカスタム Web パーツ コントロールを作成することもできます。 個々の Web パーツ コントロールの開発では、通常、ユーザー コントロールを作成して Web パーツ コントロールとして使用するか、カスタム Web パーツ コントロールを開発します。

カスタム Web パーツ コントロールを開発する例として、カスタマイズ可能な Web パーツ コントロールとしてパッケージ化するのに役立つ可能性がある他の ASP.NET サーバー コントロールによって提供される機能 (予定表、リスト、財務情報、ニュース、電卓、コンテンツを更新するためのリッチ テキスト コントロール、データベースに接続する編集可能なグリッド) を提供するコントロールを作成できます。 表示を動的に更新するグラフ、または天気や旅行の情報。 ビジュアル デザイナーにコントロールを提供する場合、Visual Studio を使用するページ開発者は、追加のコードを記述することなく、コントロールを Web パーツ ゾーンにドラッグして、デザイン時に構成できます。

パーソナル化は、Web パーツ機能の基盤です。 これにより、ユーザーはページ上の Web パーツ コントロールのレイアウト、外観、および動作を変更またはカスタマイズできます。 個人用設定は有効期間が長く、現在のブラウザー セッション中 (ビューステートと同様) だけでなく、長期ストレージにも保持されるため、ユーザーの設定は今後のブラウザー セッションでも保存されます。 Web パーツ ページでは、パーソナル化が既定で有効になっています。

UI 構造コンポーネントはパーソナル化に依存し、すべての Web パーツ コントロールに必要なコア構造とサービスを提供します。 すべての Web パーツ ページで必要な 1 つの UI 構造コンポーネントは、WebPartManager コントロールです。 表示されることはありませんが、このコントロールには、ページ上のすべての Web パーツ コントロールを調整する重要なタスクがあります。 たとえば、個々のすべての Web パーツ コントロールを追跡します。 Web パーツ ゾーン (ページ上の Web パーツ コントロールを含む領域) と、どのコントロールがどのゾーンにあるかを管理します。 また、ブラウズ、接続、編集、カタログ モードなど、ページに含めることができるさまざまな表示モード、パーソナル化の変更がすべてのユーザーまたは個々のユーザーに適用されるかどうかも追跡および制御します。 最後に、Web パーツ コントロール間の接続と通信を開始して追跡します。

UI 構造コンポーネントの 2 番目の種類は ゾーンです。 ゾーンは、Web パーツ ページのレイアウト マネージャーとして機能します。 パーツ クラス (パーツ コントロール) から派生したコントロールを含み、編成し、水平方向または垂直方向にモジュール型のページ レイアウトを実行する機能を提供します。 ゾーンには、共通の一貫性のある UI 要素 (ヘッダーとフッターのスタイル、タイトル、罫線のスタイル、アクション ボタンなど) も用意されています。これらの一般的な要素は、コントロールのクロムと呼ばれます。 さまざまな表示モードとさまざまなコントロールで、いくつかの特殊な種類のゾーンが使用されます。 さまざまな種類のゾーンについては、後述の「Web パーツの基本コントロール」セクションで説明します。

Web パーツ UI コントロールは、すべて Part クラスから派生し、Web パーツ ページ上のプライマリ UI で構成されます。 Web パーツ コントロール セットは柔軟で、パーツ コントロールを作成するためのオプションを含みます。 独自のカスタム Web パーツ コントロールを作成するだけでなく、既存の ASP.NET サーバー コントロール、ユーザー コントロール、またはカスタム サーバー コントロールを Web パーツ コントロールとして使用することもできます。 Web パーツ ページの作成に最も一般的に使用される重要なコントロールについては、次のセクションで説明します。

Web パーツの重要なコントロール

Web パーツ コントロール セットは広範ですが、一部のコントロールは、Web パーツが機能するために必要な場合や、Web パーツ ページで最も頻繁に使用されるコントロールであるために不可欠です。 Web パーツの使用を開始し、基本的な Web パーツ ページを作成する際に、次の表で説明する基本的な Web パーツ コントロールについて理解しておくと役立ちます。

Web パーツ コントロール 説明
Webpartmanager ページ上のすべての Web パーツ コントロールを管理します。 すべての Web パーツ ページに対して 1 つの WebPartManager コントロールが必要です (1 つだけ)。
Catalogzone CatalogPart コントロールを格納します。 このゾーンを使用して、ユーザーがページに追加するコントロールを選択できる Web パーツ コントロールのカタログを作成します。
Editorzone EditorPart コントロールが含まれます。 このゾーンを使用して、ユーザーがページ上の Web パーツ コントロールを編集およびカスタマイズできるようにします。
Webpartzone ページのメイン UI を構成する WebPart コントロールの全体的なレイアウトを含み、提供します。 Web パーツ コントロールを使用してページを作成するときは常に、このゾーンを使用します。 ページには、1 つ以上のゾーンを含めることができます。
Connectionszone WebPartConnection コントロールを含み、接続を管理するための UI を提供します。
WebPart (GenericWebPart) プライマリ UI をレンダリングします。ほとんどの Web パーツ UI コントロールはこのカテゴリに分類されます。 プログラムによるコントロールを最大限に活用するために、基本 WebPart コントロールから派生するカスタム Web パーツ コントロールを作成できます。 既存のサーバー コントロール、ユーザー コントロール、またはカスタム コントロールを Web パーツ コントロールとして使用することもできます。 これらのコントロールのいずれかがゾーンに配置されるたびに、 WebPartManager コントロールは実行時に GenericWebPart コントロールで自動的にラップされるため、Web パーツ機能で使用できます。
Catalogpart ユーザーがページに追加できる使用可能な Web パーツ コントロールの一覧が含まれます。
WebPartConnection ページ上の 2 つの Web パーツ コントロール間の接続を作成します。 接続では、Web パーツ コントロールの 1 つをプロバイダー (データの) として定義し、もう 1 つはコンシューマーとして定義します。
Editorpart 特殊化されたエディター コントロールの基本クラスとして機能します。
EditorPart コントロール (AppearanceEditorPart、LayoutEditorPart、BehaviorEditorPart、PropertyGridEditorPart) ユーザーがページ上の Web パーツ UI コントロールのさまざまな側面をカスタマイズできるようにする

ラボ: Web パーツ ページを作成する

このラボでは、ASP.NET プロファイルを介して情報を保持する Web パーツ ページを作成します。

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

チュートリアルのこの部分では、Web パーツ コントロールを使用して静的コンテンツを表示するページを作成します。 Web パーツを操作する最初の手順は、必要な 2 つの構造要素を含むページを作成することです。 まず、Web パーツ ページには、すべての Web パーツ コントロールを追跡および調整するための WebPartManager コントロールが必要です。 2 つ目に、Web パーツ ページには 1 つ以上のゾーンが必要です。これは、WebPart または他のサーバー コントロールを含み、ページの指定された領域を占有する複合コントロールです。

Note

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

Web パーツ コントロールを含むページを作成するには

  1. 既定のページを閉じ、WebPartsDemo.aspx という名前のサイトに新しいページを追加します。

  2. デザイン ビューに切り替えます。

  3. [ 表示 ] メニューで、[ ビジュアル以外のコントロール ] オプションと [ 詳細 ] オプションが選択されていることを確認して、UI を持たないレイアウト タグとコントロールを表示できるようにします。

  4. デザイン画面のタグの前に挿入ポイントを <div> 配置し、Enter キーを押して新しい行を追加します。 新しい行文字の前にカーソルを置き、メニューの [ブロック形式 ] ドロップダウン リスト コントロールをクリックし、[ 見出し 1 ] オプションを選択します。 見出しに、「 Web パーツのデモ ページ」というテキストを追加します。

  5. ツールボックスの [ WebParts ] タブから、 WebPartManager コントロールをページにドラッグし、新しい行文字の直後とタグの前に <div>配置します。

    WebPartManager コントロールは出力をレンダリングしないため、デザイナー画面に灰色のボックスとして表示されます。

  6. 挿入ポイントをタグ内に配置します <div> 。

  7. [ レイアウト ] メニューの [ テーブルの挿入] をクリックし、1 行 3 列の新しいテーブルを作成します。 [セルのプロパティ] ボタンをクリックし、[縦揃え] ドロップダウン リストから上部を選択し、[OK] をクリックし、もう一度 [OK] をクリックしてテーブルを作成します。

  8. WebPartZone コントロールを左のテーブル列にドラッグします。 WebPartZone コントロールを右クリックし、[プロパティ] を選択して、次のプロパティを設定します。

    ID: SidebarZone

    HeaderText: サイドバー

  9. 2 つ目の WebPartZone コントロールを中央のテーブル列にドラッグし、次のプロパティを設定します。

    ID: MainZone

    HeaderText: Main

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

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

Web パーツ ゾーンのレイアウトは、zonetemplate> 要素によって<指定されます。 ゾーン テンプレート内には、カスタム Web パーツ コントロール、ユーザー コントロール、既存のサーバー コントロールのいずれであっても、任意の ASP.NET コントロールを追加できます。 ここでは Label コントロールを使用しており、静的テキストを追加しているだけであることに注意してください。 通常のサーバー コントロールを WebPartZone ゾーンに配置すると、ASP.NET は実行時にコントロールを Web パーツ コントロールとして扱います。これにより、コントロールの Web パーツ機能が有効になります。

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

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

  2. [ソース] ビューに切り替えます。 Zonetemplate 要素が<追加され、MainZone で Label コントロールがラップされていることに注意してください。>

  3. title という名前の属性を asp:label> 要素に<追加し、その値を Content に設定します。 asp:>label 要素から Text="Label" 属性を<削除します。 asp:label> 要素の開始タグと終了タグの<間に、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>

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

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

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

  1. 検索コントロールとして機能する新しい Web ユーザー コントロールをサイトに追加します。 [ ソース コードを別のファイルに配置する] オプションの選択を解除します。 WebPartsDemo.aspx ページと同じディレクトリに追加し、SearchUserControl.ascx という名前を付けます。

    Note

    このチュートリアルのユーザー コントロールには、実際の検索機能は実装されていません。Web パーツの機能を示すためにのみ使用されます。

  2. デザイン ビューに切り替えます。 ツールボックスの [ 標準 ] タブから、TextBox コントロールをページにドラッグします。

  3. 追加したテキスト ボックスの後にカーソルを置き、Enter キーを押して新しい行を追加します。

  4. ボタン コントロールを、追加したテキスト ボックスの下の新しい行のページにドラッグします。

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

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

  6. ファイルを保存して閉じます。

これで、Web パーツ コントロールをサイドバー ゾーンに追加できるようになりました。 サイドバー ゾーンに 2 つのコントロールを追加します。1 つはリンクの一覧を含み、もう 1 つは前の手順で作成したユーザー コントロールです。 リンクは、メイン ゾーンの静的テキストを作成したのと同様に、標準の Label サーバー コントロールとして追加されます。 ただし、ユーザー コントロールに含まれる個々のサーバー コントロールはゾーン (ラベル コントロールなど) に直接含まれる場合がありますが、この場合は含まれません。 代わりに、前の手順で作成したユーザー コントロールの一部です。 これは、ユーザー コントロールに必要なコントロールや追加機能をパッケージ化し、そのコントロールを Web パーツ コントロールとしてゾーン内で参照する一般的な方法を示しています。

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

サイドバー ゾーンに Web パーツ コントロールを追加するには

  1. WebPartsDemo.aspx ページを開きます。

  2. デザイン ビューに切り替えます。

  3. 作成したユーザー コントロール ページ SearchUserControl.ascx をソリューション エクスプローラーから、ID プロパティが SidebarZone に設定されているゾーンにドラッグし、そこにドロップします。

  4. WebPartsDemo.aspx ページを保存します。

  5. [ソース] ビューに切り替えます。

  6. 次の<例に示すように、SidebarZone の asp:webpartzone> 要素内で、ユーザー コントロールへの参照のすぐ上に、含まれているリンクを含む asp:label> 要素を追加<します。 また、次に示すように、値が Search の Title 属性をユーザー コントロール タグに追加します。

    <asp:WebPartZone id="SidebarZone" runat="server"
                 headertext="Sidebar">
    <zonetemplate>
        <asp:label runat="server" id="linksPart" title="My Links">
            <a href="http://www.asp.net">ASP.NET site</a>
            <br />
            <a href="http://www.gotdotnet.com">GotDotNet</a>
            <br />
            <a href="http://www.contoso.com">Contoso.com</a>
            <br />
        </asp:label>
        <uc1:SearchUserControl id="searchPart"
          runat="server" title="Search" />
    </zonetemplate>
</asp:WebPartZone>

  7. ファイルを保存して閉じます。

ブラウザーでページを参照して、ページをテストできるようになりました。 ページには 2 つのゾーンが表示されます。 次のスクリーン ショットは、ページを示しています。

2 つのゾーンを含む Web パーツのデモ ページ

Web パーツ VS チュートリアル 1 のスクリーンショット

図 3: Web パーツ VS チュートリアル 1 のスクリーンショット

各コントロールのタイトル バーには、コントロールに対して実行できるアクションの動詞メニューへのアクセスを提供する下向き矢印があります。 いずれかのコントロールの動詞メニューをクリックし、[ 最小化 ] 動詞をクリックし、コントロールが最小化されていることを確認します。 動詞メニューから [ 復元] をクリックすると、コントロールは通常のサイズに戻ります。

ユーザーがページを編集してレイアウトを変更できるようにする

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

チュートリアルのこの部分では、ユーザーがページ上の 任意の WebPart コントロールの基本的な特性を編集する機能を追加します。 これらの機能を有効にするには、asp:editorzone> 要素と 2 つの編集コントロールと共<に、別のカスタム ユーザー コントロールをページに追加します。

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

  1. Visual Studio の [ ファイル ] メニューの [ 新しい ] サブメニューを選択し、[ ファイル ] オプションをクリックします。

  2. [ 新しい項目の追加 ] ダイアログで、[ Web ユーザー コントロール] を選択します。 新しいファイルに DisplayModeMenu.ascx という名前を付けます。 [ ソース コードを別のファイルに配置する] オプションの選択を解除します。

  3. [追加] をクリックして、新しいコントロールを作成します。

  4. [ソース] ビューに切り替えます。

  5. 新しいファイル内の既存のコードをすべて削除し、次のコードを貼り付けます。 このユーザー コントロール コードでは、Web パーツ コントロール セットの機能を使用して、ページでビューまたは表示モードを変更したり、特定の表示モードの間にページの物理的な外観とレイアウトを変更したりできます。

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

  6. ツール バーの [保存] アイコンをクリックするか、[ファイル] メニューの [保存] を選択して、ファイルを保存します。

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

  1. WebPartsDemo.aspx ページを開き、 デザイン ビューに切り替えます。

  2. 前に追加した WebPartManager コントロールの直後に、挿入ポイントをデザイン ビューに配置します。 WebPartManager コントロールの後に空白行が表示されるように、テキストの後にハード リターンを追加します。 空白行にカーソルを置きます。

  3. 先ほど作成したユーザー コントロール (ファイルの名前は DisplayModeMenu.ascx) を WebPartsDemo.aspx ページにドラッグし、空白行にドロップします。

  4. EditorZone コントロールをツールボックスの WebParts セクションから、WebPartsDemo.aspx ページの残りの開いているテーブル セルにドラッグします。

  5. ツールボックスの [WebParts ] セクションから、AppearanceEditorPart コントロールと LayoutEditorPart コントロールを EditorZone コントロールにドラッグします。

  6. [ソース] ビューに切り替えます。 テーブル セルの結果のコードは、次のコードのようになります。

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

  7. WebPartsDemo.aspx ファイルを保存します。 表示モードの変更とページ レイアウトの変更を可能にするユーザー コントロールを作成し、プライマリ Web ページでコントロールを参照しました。

ページを編集してレイアウトを変更する機能をテストできるようになりました。

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

  1. ブラウザーでページを読み込みます。
  2. [ 表示モード ] ドロップダウン メニューをクリックし、[編集] を選択 します。 ゾーン タイトルが表示されます。
  3. タイトル バーで [個人用リンク] コントロールをサイドバー ゾーンからメイン ゾーンの下部にドラッグします。 ページは次のスクリーン ショットのようになります。

[個人用リンク] コントロールが移動された Web パーツのデモ ページ

Web パーツ VS チュートリアル 2 のスクリーンショット

図 4: Web パーツ VS チュートリアル 2 のスクリーンショット

  1. [ 表示モード ] ドロップダウン メニューをクリックし、[参照] を選択 します。 ページが更新され、ゾーン名が消え、 My Links コントロールが配置された場所に残ります。

  2. 個人用設定が機能していることを示すには、ブラウザーを閉じてから、ページをもう一度読み込みます。 行った変更は、今後のブラウザー セッション用に保存されます。

  3. [表示モード] メニューの [編集] を選択します。

    ページ上の各コントロールは、タイトル バーに下向きの矢印が表示され、動詞のドロップダウン メニューが表示されます。

  4. 矢印をクリックして、[ 個人用リンク ] コントロールに動詞メニューを表示します。 [ 編集 ] 動詞をクリックします。

    EditorZone コントロールが表示され、追加した EditorPart コントロールが表示されます。

  5. 編集コントロールの [ 外観 ] セクションで、[ タイトル ] を [お気に入り] に変更し、[ Chrome の種類 ] ドロップダウン リストを使用して [ タイトルのみ] を選択し、[ 適用] をクリックします。 次のスクリーン ショットは、編集モードのページを示しています。

編集モードの Web パーツのデモ ページ

Web パーツ VS チュートリアル 3 のスクリーンショット

図 5: Web パーツ VS チュートリアル 3 のスクリーンショット

  1. [ 表示モード ] メニューをクリックし、[ 参照 ] を選択してブラウズ モードに戻ります。
  2. 次のスクリーン ショットに示すように、コントロールのタイトルが更新され、罫線は表示されません。

編集済み Web パーツのデモ ページ

Web パーツ VS チュートリアル 4 のスクリーンショット

図 4: Web パーツ VS チュートリアル 4 のスクリーンショット

実行時に Web パーツを追加する

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

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

  1. WebPartsDemo.aspx ページを開き、 デザイン ビューに切り替えます。

  2. ツールボックスの [ WebParts ] タブから、CatalogZone コントロールをテーブルの右側の列 ( EditorZone コントロールの下) にドラッグします。

    両方のコントロールは同時に表示されないため、同じテーブル セルに含めることができます。

  3. [プロパティ] ウィンドウで、文字列 [ Web パーツの追加] を CatalogZone コントロールの HeaderText プロパティに割り当てます。

  4. ツールボックスの [WebParts ] セクションから、DeclarativeCatalogPart コントロールを CatalogZone コントロールのコンテンツ領域にドラッグします。

  5. DeclarativeCatalogPart コントロールの右上隅にある矢印をクリックして[タスク] メニューを表示し、[テンプレートの編集] を選択します。

  6. ツールボックスの [標準] セクションから、FileUpload コントロールと Calendar コントロールを、DeclarativeCatalogPart コントロールの WebPartsTemplate セクションにドラッグします。

  7. [ソース] ビューに切り替えます。 asp:catalogzone> 要素のソース コードを<調べます。 DeclarativeCatalogPart コントロールには、カタログからページに追加できる 2 つの囲まれたサーバー コントロールを含む webpartstemplate> 要素が含まれていること<に注意してください。

  8. 次のコード例の各タイトルに示されている文字列値を使用して、カタログに追加した各コントロールに Title プロパティを追加します。 タイトルは、デザイン時にこれら 2 つのサーバー コントロールで通常設定できるプロパティではありませんが、ユーザーが実行時にカタログから WebPartZone ゾーンにこれらのコントロールを追加すると、それぞれ GenericWebPart コントロールでラップされます。 これにより、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>

  9. ページを保存します。

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

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

  1. ブラウザーでページを読み込みます。

  2. [ 表示モード ] ドロップダウン メニューをクリックし、[カタログ] を選択 します。

    [ Web パーツの追加] というタイトルのカタログが表示されます。

  3. [お気に入り] コントロールをメイン ゾーンからサイドバー ゾーンの上部にドラッグし、そこにドロップします。

  4. [Web パーツカタログの追加] で、両方のチェックボックスを選択し、使用可能なゾーンを含むドロップダウン リストから [メイン] を選択します。

  5. カタログの [ 追加] をクリックします。 コントロールがメイン ゾーンに追加されます。 必要に応じて、カタログからページにコントロールの複数のインスタンスを追加できます。

    次のスクリーン ショットは、ファイル アップロード コントロールとメイン ゾーンの予定表を含むページを示しています。

カタログからメイン ゾーンに追加されたコントロール

図 5: カタログ 6 からメイン ゾーンに追加されたコントロール。[ 表示モード ] ドロップダウン メニューをクリックし、[参照] を選択 します。 カタログが表示されなくなり、ページが更新されます。 7. ブラウザーを閉じます。 ページをもう一度読み込みます。 加えた変更は保持されます。