クライアント動作と Web サーバーコントロールとを関連付けるエクステンダコントロールの作成

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

更新 : 2007 年 11 月

充実したユーザーエクスペリエンスを作成するために、ASP.NET の AJAX 機能を使用することで、Web アプリケーションの機能を拡張できます。Web ブラウザの ECMAScript (JavaScript)、DHTML、および AJAX の各機能により、視覚効果や、検証などのクライアント処理を追加できます。

このチュートリアルでは、クライアント動作をカプセル化して Web サーバーコントロールに関連付けるエクステンダコントロールの作成方法について説明します。このクライアント動作により、ブラウザの DOM (Document Object Model) 要素に機能が追加されます。次に、エクステンダコントロールが 1 種類以上の ASP.NET サーバーコントロールに関連付けられ、そのサーバーコントロールに動作が追加されます。複数のエクステンダコントロールを ASP.NET サーバーコントロールに関連付けることができます。

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

クライアント動作をカプセル化し、ASP.NET Web ページ上の Web サーバーコントロールに追加されるエクステンダコントロールを作成します。
Web サーバーエクステンダコントロールに関連付けられるクライアント動作を作成します。

クライアント動作を使用して、ブラウザ DOM からイベントを処理します。

メモ :
個別のエクステンダコントロールがなくても、ASP.NET サーバーコントロールに充実したクライアント機能を追加できます。このチュートリアルに示すクライアント機能と同じ機能を含む Web サーバーコントロールを作成する方法の例については、「Web サーバーコントロールへのクライアント機能の追加」を参照してください。

個別のエクステンダコントロールがなくても、ASP.NET サーバーコントロールに充実したクライアント機能を追加できます。このチュートリアルに示すクライアント機能と同じ機能を含む Web サーバーコントロールを作成する方法の例については、「Web サーバーコントロールへのクライアント機能の追加」を参照してください。

カスタムエクステンダコントロールをコンパイルしてアセンブリを生成し、同じアセンブリ内のリソースとして関連付けられた JavaScript ファイルを埋め込みます。
ASP.NET AJAX 対応の Web ページで、コンパイルしたカスタムエクステンダコントロールを参照します。

クライアント要件の識別

このチュートリアルでは、ブラウザでコントロールが選択された (つまりフォーカスを得た) ときに、Web ページ内のコントロール (TextBox コントロール、Button コントロールなど) を強調表示する単純なクライアント動作を実装します。たとえば、コントロールがフォーカスを得たときに背景色を変更し、フォーカスが別のコントロールに移動したときに既定の色に戻すことができます。

この動作を実装するには、このチュートリアルのクライアントコントロールが次の表に示す機能を備えている必要があります。

必要な機能	実装
DOM 要素を強調表示する方法。	ASP.NET Web ページ内の DOM 要素を強調表示するために、クライアントコントロールは、クラス名により識別されるカスケードスタイルシート (CSS: Cascading Style Sheet) スタイルを適用します。このスタイルはユーザーが構成できます。
DOM 要素を強調表示されていない状態に戻す方法。	ASP.NET ページ内の DOM 要素から強調表示を削除するために、クライアントコントロールは、クラス名により識別される CSS スタイルを適用します。このスタイルはユーザーが構成でき、既定のスタイルとして DOM 要素に適用されます。
DOM 要素がいつ選択されたかを識別する方法。	DOM 要素がいつ選択されたか (フォーカスを得たか) を識別するために、コントロールは DOM 要素の onfocus イベントを処理します。
DOM 要素がいつ選択解除されたかを識別する方法。	コントロールがいつ選択解除されたかを識別するために、コントロールは DOM 要素の onblur イベントを処理します。

エクステンダコントロールの作成

ASP.NET ページ開発者が使用するクライアント動作をカプセル化するために、エクステンダコントロールを使用できます。エクステンダコントロールは、System.Web.UI 名前空間内の ExtenderControl 抽象クラスを継承する Web サーバーコントロールです。特定の種類の Web サーバーコントロールにエクステンダコントロールを適用できます。TargetControlTypeAttribute 属性を使用して、エクステンダコントロールを適用できる Web サーバーコントロールの種類を識別します。

このチュートリアルのエクステンダコントロールは、すべての種類の Web サーバーコントロールに適用できます。クラス定義の例を次に示します。

<TargetControlType(GetType(Control))> _
Public Class FocusExtender
    Inherits ExtenderControl

[TargetControlType(typeof(Control))]
public class FocusExtender : ExtenderControl

新しいエクステンダコントロールには、クライアント要件の実装に使用される 2 つのプロパティがあります。

HighlightCssClass は、DOM 要素に適用される CSS クラスを識別し、コントロールがフォーカスを得たときに強調表示します。
NoHighlightCssClass は、フォーカスがないときに DOM 要素に適用される CSS クラスを識別します。

ExtenderControl 抽象クラスの継承

エクステンダコントロールで実装する必要がある ExtenderControl 抽象クラスのメンバを次の表に示します。

メンバ	説明
GetScriptDescriptors	ECMAScript (JavaScript) クライアントコンポーネントを表す ScriptDescriptor オブジェクトのコレクションを返します。これには、作成するクライアントの種類、割り当てるプロパティ、およびハンドラが追加されるイベントが含まれます。
GetScriptReferences	コントロールに含めるクライアントスクリプトライブラリに関する情報を含む ScriptReference オブジェクトのコレクションを返します。クライアントスクリプトライブラリはクライアントの種類を定義し、コントロールに必要なその他の JavaScript コードを格納します。

このチュートリアルのエクステンダコントロールは、GetScriptDescriptors() メソッドを使用してクライアント動作の種類のインスタンスを定義します。コントロールは新しい ScriptBehaviorDescriptor オブジェクト (ScriptBehaviorDescriptor クラスは ScriptDescriptor クラスから派生します) を作成し、そのオブジェクトを GetScriptDescriptors メソッドの戻り値に格納します。

ScriptBehaviorDescriptor オブジェクトは、クライアントクラス (Samples.FocusBehavior) の名前、および関連付けられた (対象の) Web サーバーコントロールの ClientID 値を格納します。クライアントクラス名と ClientID プロパティ値は、ScriptBehaviorDescriptor オブジェクトのコンストラクタに渡されます。対象の Web サーバーコントロールへの参照は、GetScriptDescriptors(Control) メソッドへのパラメータとして指定されます。参照を使用すると、対象の Web サーバーコントロールの ClientID 値を確認できます。これは、描画される DOM 要素の id 値です。

ScriptBehaviorDescriptor クラスは、クライアント動作のプロパティ値の設定に使用されます。このプロパティ値は、サーバー上のエクステンダコントロールのプロパティから取得されます。クライアント動作のプロパティを定義するために、エクステンダコントロールは ScriptBehaviorDescriptor クラスの AddProperty メソッドを使用します。次に、エクステンダコントロールは、サーバーエクステンダコントロールの対応するプロパティに基づいて、クライアント動作のプロパティの名前と値を指定します。この例では ScriptBehaviorDescriptor オブジェクトを使用して、クライアント動作の highlightCssClass プロパティと nohighlightCssClass プロパティの値を設定します。

エクステンダコントロールは、GetScriptDescriptors メソッドの戻り値で ScriptBehaviorDescriptor オブジェクトを渡します。したがって、Web サーバーコントロールがブラウザに表示されると、ASP.NET は、定義済みのすべてのプロパティとイベントハンドラを使用してクライアント動作のインスタンスを作成する JavaScript を描画します。動作インスタンスは、対象の Web サーバーコントロールから表示される ClientID プロパティに基づいて DOM 要素にアタッチされます。ページ内のこのチュートリアルから ASP.NET サーバーコントロールとエクステンダコントロールを追加する、宣言の ASP.NET マークアップの例を次に示します。

<asp:TextBox ID="TextBox1" runat="server" />
<sample: FocusExtender runat="server"
    ID="FocusExtender1" 
    HighlightCssClass="MyHighLight"
    NoHighlightCssClass="MyLowLight"
    TargetControlID="TextBox1" />

ページのレンダリングされた出力には、作成するクライアント動作を識別する $create メソッドの呼び出しが含まれます。クライアント動作のプロパティの値、およびクライアント動作の対象となる DOM 要素の id 値も指定されます。レンダリングされた $create メソッドの例を次に示します。

$create(Samples.FocusBehavior, {"highlightCssClass":"MyHighLight","nohighlightCssClass":"MyLowLight"}, null, null, $get('TextBox1'));

このチュートリアルのエクステンダコントロールは、GetScriptReferences メソッドを使用してクライアント動作の種類を定義するスクリプトライブラリの場所を渡します。この例では、これは FocusBehavior.js という名前のスクリプトファイルへの URL です。このファイルは、チュートリアルの後半で作成します。新しい ScriptReference オブジェクトを作成した後、Path プロパティをクライアントコードを含むファイルの URL に設定することで、参照が行われます。

GetScriptDescriptors メソッドおよび GetScriptReferences メソッドの実装を次に示します。

Protected Overrides Function GetScriptReferences() As IEnumerable(Of ScriptReference)
    Dim reference As ScriptReference = New ScriptReference()
    reference.Path = ResolveClientUrl("FocusBehavior.js")

    Return New ScriptReference() {reference}
End Function

Protected Overrides Function GetScriptDescriptors(ByVal targetControl As Control) As IEnumerable(Of ScriptDescriptor)
    Dim descriptor As ScriptBehaviorDescriptor = New ScriptBehaviorDescriptor("Samples.FocusBehavior", targetControl.ClientID)
    descriptor.AddProperty("highlightCssClass", Me.HighlightCssClass)
    descriptor.AddProperty("nohighlightCssClass", Me.NoHighlightCssClass)

    Return New ScriptDescriptor() {descriptor}
End Function

protected override IEnumerable<ScriptReference> GetScriptReferences()
{
    ScriptReference reference = new ScriptReference();
    reference.Path = ResolveClientUrl("FocusBehavior.js");

    return new ScriptReference[] { reference };
}

protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors(Control targetControl)
{
    ScriptBehaviorDescriptor descriptor = new ScriptBehaviorDescriptor("Samples.FocusBehavior", targetControl.ClientID);
    descriptor.AddProperty("highlightCssClass", this.HighlightCssClass);
    descriptor.AddProperty("nohighlightCssClass", this.NoHighlightCssClass);

    return new ScriptDescriptor[] { descriptor };
}

クライアント動作の作成

エクステンダコントロールでは、GetScriptReferences メソッドは、動作の種類のクライアントコードを含む JavaScript ファイル (FocusBehavior.js) を指定します。ここでは、そのファイル内の JavaScript コードについて説明します。

クライアント動作コードは、GetScriptDescriptors メソッドが返す ScriptDescriptor オブジェクトに指定されたメンバと一致します。クライアント動作には、サーバーエクステンダコントロール内のメンバに対応しないメンバを指定することもできます。

このチュートリアルのエクステンダコントロールは、クライアント動作の名前を Samples.FocusBehavior に設定し、クライアント動作の highlightCssClass と nohighlightCssClass の 2 つのプロパティを定義します。

クライアントコンポーネントと動作を作成する方法の詳細については、「プロトタイプモデルを使用したクライアントコンポーネントクラスの作成」を参照してください。

クライアント名前空間の作成

クライアントコードは、まず Type クラスの registerNamespace メソッドを呼び出して、独自の名前空間 (Samples) を作成する必要があります。クライアント名前空間を登録する方法の例を次に示します。

// Register the namespace for the control.
Type.registerNamespace('Samples');

クライアントクラスの定義

Samples.FocusBehavior クラスは、Samples.FocusBehavior クライアントクラスを定義します。このクラスには、Web サーバーコントロールによって指定されたプロパティ値を保持する 2 つのプロパティが含まれます。

クラスプロトタイプの定義

Samples.FocusBehavior クラスを定義した後、コードはクラスのプロトタイプを定義します。プロトタイプには、プロパティの get アクセサと set アクセサ、および DOM 要素の onfocus イベントと onblur イベントのイベントハンドラが含まれます。また、動作のインスタンスが作成されたときに呼び出される initialize メソッド、およびページで動作が不要になったときにクリーンアップを実行する dispose メソッドも含まれます。

DOM 要素のイベントハンドラの定義

クライアントクラスのイベントハンドラは、クラスプロトタイプのメソッドとして定義されます。addHandlers メソッドを使用することで、ハンドラはイベントデリゲートおよびブラウザ DOM のイベントに関連付けられます。このメソッドについては、initialize メソッドと共にこのトピックの後半で説明します。

プロパティの get メソッドと set メソッドの定義

エクステンダコントロールの GetScriptDescriptors メソッドの ScriptDescriptor オブジェクトで指定される各プロパティには、対応するクライアントアクセサが必要です。クライアントプロパティアクセサは、クライアントクラスプロトタイプの get_<property name> メソッドおよび set_<property name> メソッドとして定義されます。

initialize メソッドと dispose メソッドの実装

initialize メソッドは、動作のインスタンスが作成されたときに呼び出されます。このメソッドを使用して、既定のプロパティ値の設定、関数デリゲートの作成、およびイベントハンドラとしてのデリゲートの追加を行います。

Samples.FocusBehavior クラスの initialize メソッドは、次の処理を行います。

Sys.UI.Behavior 基本クラスの initialize メソッドを呼び出します。
addHandlers メソッドを呼び出して、関連付けられた DOM 要素の onfocus イベントと onblur イベントのハンドラとしてイベントデリゲートを追加します。イベント名の "on" 部分 (onfocus など) は指定しません。

dispose メソッドは、ページ上で動作のインスタンスが使用されなくなり、削除されたときに呼び出されます。このメソッドを使用して、DOM イベントハンドラなど、動作で不要になったリソースを解放します。

Sample.FocusBehavior クラスの dispose メソッドは、次の処理を行います。

clearHandlers メソッドを呼び出して、関連付けられた DOM 要素の onfocus イベントと onblur イベントのハンドラとしてのイベントデリゲートを消去します。

Behavior 基本クラスの dispose メソッドを呼び出します。

メモ :
クライアントクラスの dispose メソッドは、複数回呼び出すことができます。dispose メソッドに含めるコードでこのことが考慮されていることを確認します。

動作の登録

クライアント動作を作成する最後のタスクでは、registerClass メソッドを呼び出してクライアントクラスを登録します。クラスはクライアント動作であるため、registerClass メソッドの呼び出しには、登録する JavaScript クラス名が含まれます。また、Behavior を基本クラスとして指定します。

以下に示す完全な例には、Sys.Application クラスの notifyScriptLoaded メソッドの呼び出しも含まれています。この呼び出しは、JavaScript ファイルが読み込まれたことを Microsoft AJAX Library に通知するために必要です。

Samples.FocusBehavior クライアント動作の完全な JavaScript コード例を次に示します。このチュートリアルのコードを実行するには、JavaScript ファイルに FocusBehavior.js という名前を付けて、Scripts ディレクトリに配置する必要があります。

// Register the namespace for the control.
Type.registerNamespace('Samples');

//
// Define the behavior properties.
//
Samples.FocusBehavior = function(element) { 
    Samples.FocusBehavior.initializeBase(this, [element]);

    this._highlightCssClass = null;
    this._nohighlightCssClass = null;
}

//
// Create the prototype for the behavior.
//

Samples.FocusBehavior.prototype = {


    initialize : function() {
        Samples.FocusBehavior.callBaseMethod(this, 'initialize');

        $addHandlers(this.get_element(), 
                     { 'focus' : this._onFocus,
                       'blur' : this._onBlur },
                     this);

        this.get_element().className = this._nohighlightCssClass;
    },

    dispose : function() {
        $clearHandlers(this.get_element());

        Samples.FocusBehavior.callBaseMethod(this, 'dispose');
    },

    //
    // Event delegates
    //

    _onFocus : function(e) {
        if (this.get_element() && !this.get_element().disabled) {
            this.get_element().className = this._highlightCssClass;          
        }
    },

    _onBlur : function(e) {
        if (this.get_element() && !this.get_element().disabled) {
            this.get_element().className = this._nohighlightCssClass;          
        }
    },


    //
    // Behavior properties
    //

    get_highlightCssClass : function() {
        return this._highlightCssClass;
    },

    set_highlightCssClass : function(value) {
        if (this._highlightCssClass !== value) {
            this._highlightCssClass = value;
            this.raisePropertyChanged('highlightCssClass');
        }
    },

    get_nohighlightCssClass : function() {
        return this._nohighlightCssClass;
    },

    set_nohighlightCssClass : function(value) {
        if (this._nohighlightCssClass !== value) {
            this._nohighlightCssClass = value;
            this.raisePropertyChanged('nohighlightCssClass');
        }
    }
}

// Optional descriptor for JSON serialization.
Samples.FocusBehavior.descriptor = {
    properties: [   {name: 'highlightCssClass', type: String},
                    {name: 'nohighlightCssClass', type: String} ]
}

// Register the class as a type that inherits from Sys.UI.Control.
Samples.FocusBehavior.registerClass('Samples.FocusBehavior', Sys.UI.Behavior);

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

ASP.NET ページの完全なコード例を次に示します。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>ASP.NET AJAX Behavior Sample</title>
    <style type="text/css">
    .LowLight
    {
        background-color:#EEEEEE;
    }

    .HighLight
    {
        background-color:#FFFFF0;
    }
    .LowLightButton
    {
        font-weight:normal;
        width:100px;
    }

    .HighLightButton
    {
        font-weight:bold;
        width:100px;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <table border="0" cellpadding="2">
              <tr>
                <td><asp:Label runat="server" ID="Label1" AssociatedControlID="TextBox1">Name</asp:Label></td>
                <td><asp:TextBox ID="TextBox1" runat="server" /></td>
              </tr>
              <tr>
                <td><asp:Label runat="server" ID="Label2" AssociatedControlID="TextBox2">Phone</asp:Label></td>
                <td><asp:TextBox ID="TextBox2" runat="server" /></td>
              </tr>
              <tr>
                <td><asp:Label runat="server" ID="Label3" AssociatedControlID="TextBox3">E-mail</asp:Label></td>
                <td><asp:TextBox ID="TextBox3" runat="server" /></td>
              </tr>
            </table>

            <asp:Button runat="server" ID="Button1" Text="Submit Form" />

            <sample:FocusExtender ID="FocusExtender1" runat="server"
                                  NoHighlightCssClass="LowLight"
                                  HighlightCssClass="HighLight"
                                  TargetControlID="TextBox1" />
            <sample:FocusExtender ID="FocusExtender2" runat="server"
                                  NoHighlightCssClass="LowLight"
                                  HighlightCssClass="HighLight"
                                  TargetControlID="TextBox2" />
            <sample:FocusExtender ID="FocusExtender3" runat="server"
                                  NoHighlightCssClass="LowLight"
                                  HighlightCssClass="HighLight"
                                  TargetControlID="TextBox3" />
            <sample:FocusExtender ID="FocusExtender4" runat="server"
                                  NoHighlightCssClass="LowLightButton"
                                  HighlightCssClass="HighLightButton"
                                  TargetControlID="Button1" />
        </div>

    </form>
</body>
</html>

FocusExtender クラスの完全なコード例を次に示します。通常、このコードは App_Code ディレクトリに配置します。

Imports System
Imports System.Data
Imports System.Configuration
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls
Imports System.Collections.Generic

Namespace Samples.VB

    <TargetControlType(GetType(Control))> _
    Public Class FocusExtender
        Inherits ExtenderControl

        Private _highlightCssClass As String
        Private _noHighlightCssClass As String

        Public Property HighlightCssClass() As String
            Get
                Return _highlightCssClass
            End Get
            Set(ByVal value As String)
                _highlightCssClass = value
            End Set
        End Property

        Public Property NoHighlightCssClass() As String
            Get
                Return _noHighlightCssClass
            End Get
            Set(ByVal value As String)
                _noHighlightCssClass = value
            End Set
        End Property

        Protected Overrides Function GetScriptReferences() As IEnumerable(Of ScriptReference)
            Dim reference As ScriptReference = New ScriptReference()
            reference.Path = ResolveClientUrl("FocusBehavior.js")

            Return New ScriptReference() {reference}
        End Function

        Protected Overrides Function GetScriptDescriptors(ByVal targetControl As Control) As IEnumerable(Of ScriptDescriptor)
            Dim descriptor As ScriptBehaviorDescriptor = New ScriptBehaviorDescriptor("Samples.FocusBehavior", targetControl.ClientID)
            descriptor.AddProperty("highlightCssClass", Me.HighlightCssClass)
            descriptor.AddProperty("nohighlightCssClass", Me.NoHighlightCssClass)

            Return New ScriptDescriptor() {descriptor}
        End Function
    End Class
End Namespace

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections.Generic;

namespace Samples.CS
{
    [TargetControlType(typeof(Control))]
    public class FocusExtender : ExtenderControl
    {
        private string _highlightCssClass;
        private string _noHighlightCssClass;

        public string HighlightCssClass
        {
            get { return _highlightCssClass; }
            set { _highlightCssClass = value; }
        }

        public string NoHighlightCssClass
        {
            get { return _noHighlightCssClass; }
            set { _noHighlightCssClass = value; }
        }

        protected override IEnumerable<ScriptReference> GetScriptReferences()
        {
            ScriptReference reference = new ScriptReference();
            reference.Path = ResolveClientUrl("FocusBehavior.js");

            return new ScriptReference[] { reference };
        }

        protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors(Control targetControl)
        {
            ScriptBehaviorDescriptor descriptor = new ScriptBehaviorDescriptor("Samples.FocusBehavior", targetControl.ClientID);
            descriptor.AddProperty("highlightCssClass", this.HighlightCssClass);
            descriptor.AddProperty("nohighlightCssClass", this.NoHighlightCssClass);

            return new ScriptDescriptor[] { descriptor };
        }
    }
}

テスト用のエクステンダコントロールの動的コンパイル

このチュートリアルのエクステンダコントロールなど、すべての Web サーバーコントロールは、Web ページで参照する前にコンパイルする必要があります。ASP.NET Version 2.0 の動的コンパイル機能を使用して、Web サーバーコントロールを手動でコンパイルしてアセンブリを生成することなくコントロールをテストできます。これにより、Web サーバーコントロールコードを最初に作成してデバッグするときに時間を短縮できます。次の手順では、App_Code フォルダを使用してエクステンダコントロールを動的にコンパイルする方法を示します。

動的にコンパイルするためにエクステンダコントロールを App_Code フォルダに配置するには

Web サイトのルートフォルダに App_Code フォルダを作成します。

.cs または .vb コントロールソースファイルと関連するクラスを App_Code フォルダに移動します。

または

以前にこのコントロールのアセンブリを Bin フォルダに追加している場合は、そのアセンブリを削除します。App_Code フォルダ内のソースファイルの編集を続行します。プロジェクトを実行するたびに、コントロールソースコードがコンパイルされます。

メモ :
コントロールをコンパイルして生成したアセンブリを Bin フォルダに格納するか、コントロールのソースファイルを App_Code フォルダに格納できますが、両方を行うことはできません。両方のフォルダにコントロールを追加すると、ページパーサーはページのコントロールへの参照を解決できないためにエラーを生成します。

コントロールをコンパイルして生成したアセンブリを Bin フォルダに格納するか、コントロールのソースファイルを App_Code フォルダに格納できますが、両方を行うことはできません。両方のフォルダにコントロールを追加すると、ページパーサーはページのコントロールへの参照を解決できないためにエラーを生成します。

Web ページを実行します。エクステンダコントロールが動的にコンパイルされます。

Web ページでの動的にコンパイルされたエクステンダコントロールのテスト

次の手順では、ASP.NET AJAX 対応の Web ページでエクステンダコントロールをテストする方法について説明します。Web サーバーコントロールのコードは、App_Code フォルダから動的にコンパイルされます。

ASP.NET ページ内で動作を使用するには

新しい ASP.NET Web ページを作成します。
ページに ScriptManager コントロールがない場合は追加します。
強調表示されたテキストボックスと強調表示されていないテキストボックスの CSS スタイル規則を作成します。

コントロールは、任意の方法で強調表示できます。たとえば、コントロールの背景色の変更、境界線の追加、テキストのフォントの変更などの方法があります。

@ Register ディレクティブをページに追加し、エクステンダコントロールの名前空間と TagPrefix 属性を指定します。

メモ :
この例では、サーバーコントロールコードは動的にコンパイルできるように App_Code フォルダにあります。したがって、アセンブリ属性は指定しません。

TextBox コントロールと Button コントロールをページに追加し、Id プロパティを設定します。

コントロールのマークアップには runat="server" を含める必要があります。
FocusExtender コントロールのインスタンスをページに追加します。
FocusExtender コントロールの TargetControlID プロパティを、前の手順で追加した Button コントロールの ID に設定します。
HighlightCssClass プロパティを強調表示の CSS スタイルに設定し、NoHighlightCssClass プロパティを強調表示なしの CSS スタイルに設定します。
ページを実行し、各コントロールを選択します。

Button コントロールを選択すると、強調表示されます。
FocusExtender コントロールの TargetControlID プロパティを TextBox コントロールの ID に変更した後、ページを再度実行します。

今度は、TextBox コントロールがフォーカスを得たときに強調表示されます。FocusExtender コントロールにカプセル化された動作は、ページ上の別の ASP.NET サーバーコントロールに適用できます。動作を複数のコントロールに適用するには、エクステンダコントロールの複数のインスタンスをページに追加し、各インスタンスを別の ASP.NET サーバーコントロールに関連付けます。

エクステンダコントロールのアセンブリへのコンパイル

JavaScript コンポーネントと Web サーバーコントロールの拡張コードをアセンブリに埋め込むと、カスタムエクステンダコントロールを簡単に配置できるようになります。アセンブリの作成により、コントロールのバージョン管理も簡単になります。また、コンパイルしてアセンブリを生成しなければ、コントロールをデザイナのツールボックスに追加することはできません。

次の手順では、Visual Studio を使用して既存のチュートリアルプロジェクトで新しいコードライブラリを作成する方法について説明します。コードファイルのコピーを、このチュートリアルのプロジェクト内の新しいコードライブラリに移動します。コードライブラリでエクステンダコントロールをコンパイルすると、ユーザーが配置できるアセンブリが作成されます。

メモ :
この手順を実行するには、Microsoft Visual Studio 2005 または Visual Studio 2008 を使用する必要があります。Microsoft Visual Web Developer Express Edition は使用できません。これは、Visual Web Developer Express Edition を使用すると同じソリューション内に 2 つのプロジェクトを作成できないためです。

既存のプロジェクトに新しいコードライブラリを追加するには

Visual Studio で、[ファイル] メニューの [新規作成] をクリックし、[プロジェクト] をクリックします。

[新しいプロジェクト] ダイアログボックスが表示されます。
[プロジェクトの種類] で、[Visual C#] または [Visual Basic] を選択します。
[テンプレート] で、[クラスライブラリ] を選択し、プロジェクトに Samples という名前を付けます。
[ソリューション] の一覧で、[ソリューションに追加] を選択し、[OK] をクリックします。

既存のソリューションに Samples クラスライブラリが追加されます。

カスタムサーバーエクステンダコントロールをコードライブラリに移動するには

次の参照を Samples クラスライブラリプロジェクトに追加します。この参照は、カスタムサーバーエクステンダコントロールで必要です。
- System.Drawing
- System.Web
- System.Web.Extensions
ソリューションエクスプローラで、元のチュートリアルプロジェクトから Samples クラスライブラリプロジェクトのルートに FocusExtender.cs ファイルまたは FocusExtender.vb ファイルと、FocusBehavior.js ファイルをコピーします。
FocusBehavior.js ファイルの [プロパティ] ウィンドウで、[ビルドアクション] を [埋め込まれたリソース] に設定します。

次のプロパティを AssemblyInfo ファイルに追加します。

<Assembly: System.Web.UI.WebResource("Samples.FocusBehavior.js", "text/javascript")>

[assembly: System.Web.UI.WebResource("Samples.FocusBehavior.js", "text/javascript")]

メモ :
AssemblyInfo.vb ファイルは、ソリューションエクスプローラの [My Project] ノードにあります。[My Project] ノードにファイルが表示されない場合は、[プロジェクト] メニューの [すべてのファイルを表示] をクリックします。AssemblyInfo.cs ファイルは、ソリューションエクスプローラの [プロパティ] ノードにあります。

AssemblyInfo.vb ファイルは、ソリューションエクスプローラの [My Project] ノードにあります。[My Project] ノードにファイルが表示されない場合は、[プロジェクト] メニューの [すべてのファイルを表示] をクリックします。AssemblyInfo.cs ファイルは、ソリューションエクスプローラの [プロパティ] ノードにあります。

JavaScript ファイルの WebResource 定義は、[assembly namespace].[JavaScript File name].js の名前付け規則に従う必要があります。

メモ :
既定では、Visual Studio はアセンブリ名前空間をアセンブリ名に設定します。アセンブリのプロパティでアセンブリ名前空間を編集できます。

FocusExtender クラスファイルで、GetScriptReferences メソッド内の ScriptReference オブジェクトを変更して、Samples アセンブリに埋め込まれたクライアントコントロールスクリプトを参照するようにします。このためには、次の変更を行います。

Path プロパティを、"Samples" に設定された Assembly で置き換えます。
Name プロパティを追加し、値を "Samples.FocusBehavior.js" に設定します。

この変更の結果の例を次に示します。

        Protected Overrides Function GetScriptReferences() As IEnumerable(Of ScriptReference)
            Dim reference As ScriptReference = New ScriptReference()
            reference.Assembly = "Samples"
            reference.Name = "Samples.FocusBehavior.js"

            Return New ScriptReference() {reference}
        End Function

     protected override IEnumerable<ScriptReference> GetScriptReferences()
        {
            ScriptReference reference = new ScriptReference();
            reference.Assembly = "Samples";
            reference.Name = "Samples.FocusBehavior.js";

            return new ScriptReference[] { reference };
        }

プロジェクトをビルドします。

コンパイルが完了すると、Samples.dll という名前のアセンブリが生成されます。JavaScript コードファイル (FocusBehavior.js) は、このアセンブリにリソースとして埋め込まれます。

メモ :
新しいソースファイルの追加、または既存のソースファイルの変更の場合は、必ずクラスライブラリプロジェクトを再度ビルドしてください。

Web ページ内のアセンブリからのコンパイルされたエクステンダコントロールの使用

ここで、ASP.NET AJAX 対応の Web ページで、コンパイルしたカスタムエクステンダコントロールを参照します。

ASP.NET AJAX 対応の Web ページで、コンパイルしたカスタムエクステンダコントロールを参照するには

新しい ASP.NET AJAX プロジェクトを作成します。
Web サイトのルートディレクトリに Bin フォルダを作成します。
Samples クラスプロジェクトの Bin\Debug フォルダまたは Bin\Release フォルダから新しい Bin フォルダに Samples.dll アセンブリをコピーします。
TestFocusExtender.aspx という名前の新しい ASP.NET Web ページを追加した後、次のマークアップを新しいページに追加します。
```
<%@ Register Assembly="Samples" Namespace="Samples.VB" TagPrefix="sample" %>
```
```
<%@ Register Assembly="Samples" Namespace="Samples.CS" TagPrefix="sample" %>
```
サーバーコントロールはアセンブリにコンパイルされるため、@ Register ディレクティブには、Namespace 属性と TagPrefix 属性の他に、Samples アセンブリを参照する Assembly 属性が含まれています。
ページを実行し、各コントロールを選択します。

FocusBehavior コントロールを選択すると、強調表示されます。

コンパイルされたカスタムエクステンダコントロールを使用する Web ページには、@ Register ディレクティブの Assembly 属性が含まれます。それ以外の場合、この Web ページは App_Code フォルダ内のコントロールに使用した Web ページと同じです。

参照

概念

Web サーバーコントロールへのクライアント機能の追加

ASP.NET UpdatePanel コントロールとデータバインドコントロールの使用

参照

Sys.UI.Behavior Class CTP

ExtenderControl

ScriptManager

次の方法で共有

クライアント動作と Web サーバーコントロールとを関連付けるエクステンダコントロールの作成

クライアント要件の識別

エクステンダコントロールの作成

ExtenderControl 抽象クラスの継承

クライアント動作の作成

クライアント名前空間の作成

クライアントクラスの定義

クラスプロトタイプの定義

DOM 要素のイベントハンドラの定義

プロパティの get メソッドと set メソッドの定義

initialize メソッドと dispose メソッドの実装

動作の登録

テスト用のエクステンダコントロールの動的コンパイル

動的にコンパイルするためにエクステンダコントロールを App_Code フォルダに配置するには

Web ページでの動的にコンパイルされたエクステンダコントロールのテスト

ASP.NET ページ内で動作を使用するには

エクステンダコントロールのアセンブリへのコンパイル

既存のプロジェクトに新しいコードライブラリを追加するには

カスタムサーバーエクステンダコントロールをコードライブラリに移動するには

Web ページ内のアセンブリからのコンパイルされたエクステンダコントロールの使用

ASP.NET AJAX 対応の Web ページで、コンパイルしたカスタムエクステンダコントロールを参照するには

参照

概念

参照

その他のリソース

次の方法で共有

クライアント動作と Web サーバー コントロールとを関連付けるエクステンダ コントロールの作成

クライアント要件の識別

エクステンダ コントロールの作成

ExtenderControl 抽象クラスの継承

クライアント動作の作成

クライアント名前空間の作成

クライアント クラスの定義

クラス プロトタイプの定義

DOM 要素のイベント ハンドラの定義

プロパティの get メソッドと set メソッドの定義

initialize メソッドと dispose メソッドの実装

動作の登録

テスト用のエクステンダ コントロールの動的コンパイル

動的にコンパイルするためにエクステンダ コントロールを App_Code フォルダに配置するには

Web ページでの動的にコンパイルされたエクステンダ コントロールのテスト

ASP.NET ページ内で動作を使用するには

エクステンダ コントロールのアセンブリへのコンパイル

既存のプロジェクトに新しいコード ライブラリを追加するには

カスタム サーバー エクステンダ コントロールをコード ライブラリに移動するには

Web ページ内のアセンブリからのコンパイルされたエクステンダ コントロールの使用

ASP.NET AJAX 対応の Web ページで、コンパイルしたカスタム エクステンダ コントロールを参照するには

参照

概念

参照

その他のリソース

クライアント動作と Web サーバーコントロールとを関連付けるエクステンダコントロールの作成

エクステンダコントロールの作成

クライアントクラスの定義

クラスプロトタイプの定義

DOM 要素のイベントハンドラの定義

テスト用のエクステンダコントロールの動的コンパイル

動的にコンパイルするためにエクステンダコントロールを App_Code フォルダに配置するには

Web ページでの動的にコンパイルされたエクステンダコントロールのテスト

エクステンダコントロールのアセンブリへのコンパイル

既存のプロジェクトに新しいコードライブラリを追加するには

カスタムサーバーエクステンダコントロールをコードライブラリに移動するには

Web ページ内のアセンブリからのコンパイルされたエクステンダコントロールの使用

ASP.NET AJAX 対応の Web ページで、コンパイルしたカスタムエクステンダコントロールを参照するには