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

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

更新 : 2007 年 11 月

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

このトピックでは、ASP.NET の AJAX 機能を使用してブラウザの機能を拡張するカスタム Web サーバーコントロールの作成方法について説明します。クライアントコントロールを使用して、クライアントのドキュメントオブジェクトモデル (DOM: Document Object Model) 要素に機能を追加できます。クライアントコントロールは、サーバーコントロールの IScriptControl インターフェイスを実装することにより、そのサーバーコントロールに関連付けることができます。

このトピックでは、次の作業を行う方法について説明します。

クライアント動作をカプセル化し、動作を制御するためにユーザーが設定できるプロパティを含む Web サーバーコントロールを作成します。
Web サーバーコントロールに関連付けられるクライアントコントロールを作成します。

クライアントコントロールのブラウザ DOM からイベントを処理します。

メモ :
エクステンダコントロールを作成すると、Web サーバーコントロールに充実したクライアント機能を追加できます。このエクステンダコントロールは、動作のクライアント機能をカプセル化した後、Web サーバーコントロールに結合できます。エクステンダコントロールは、関連付けられているコントロールの一部ではないため、さまざまな種類の Web サーバーコントロールに関連付けることができる 1 つのエクステンダコントロールを作成できます。例については、「クライアント動作と Web サーバーコントロールとを関連付けるエクステンダコントロールの作成」を参照してください。

エクステンダコントロールを作成すると、Web サーバーコントロールに充実したクライアント機能を追加できます。このエクステンダコントロールは、動作のクライアント機能をカプセル化した後、Web サーバーコントロールに結合できます。エクステンダコントロールは、関連付けられているコントロールの一部ではないため、さまざまな種類の Web サーバーコントロールに関連付けることができる 1 つのエクステンダコントロールを作成できます。例については、「クライアント動作と Web サーバーコントロールとを関連付けるエクステンダコントロールの作成」を参照してください。

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

クライアント要件の識別

クライアント動作を Web サーバーコントロールに追加するには、まずブラウザにおけるコントロールの動作を決定します。次に、動作の実装に必要なクライアント機能を判別します。

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

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

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

Web サーバーコントロールの作成

ASP.NET AJAX 機能を使用してクライアント機能を実現する Web サーバーコントロールは、他の Web サーバーコントロールに似ています。ただし、このコントロールには IScriptControl インターフェイスを System.Web.UI 名前空間から実装することもできます。このトピックでは、TextBox クラスを継承し、IScriptControl インターフェイスを実装して、ASP.NET TextBox コントロールを拡張します。

クラス定義の例を次に示します。

Public Class SampleTextBox
    Inherits TextBox
    Implements IScriptControl

public class SampleTextBox : TextBox, IScriptControl

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

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

IScriptControl インターフェイスの実装

Web サーバーコントロールで実装する必要がある IScriptControl インターフェイスのメンバを次の表に示します。

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

このトピックの Web サーバーコントロールは、GetScriptDescriptors メソッドを使用してクライアントコントロール型のインスタンスを定義します。コントロールは新しい ScriptControlDescriptor オブジェクト (ScriptControlDescriptor クラスは ScriptDescriptor クラスから派生します) を作成し、そのオブジェクトを GetScriptDescriptors メソッドの戻り値に格納します。

ScriptControlDescriptor オブジェクトは、クライアントクラス (Samples.SampleTextBox) の名前、および Web サーバーコントロールの ClientID 値を格納します。この値は、描画される DOM 要素の id 値に使われます。クライアントクラス名と ClientID プロパティ値は、ScriptControlDescriptor オブジェクトのコンストラクタに渡されます。

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

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

<sample:SampleTextBox runat="server"
  ID="SampleTextBox1"
  HighlightCssClass="MyHighLight"
  NoHighlightCssClass="MyLowLight" />

ページのレンダリングされた出力には、作成するクライアントクラスを識別する $create メソッドの呼び出しが含まれます。また、クライアントのプロパティの値、およびクライアントコントロールと関連付けられている DOM オブジェクトの id 値が提供されます。レンダリングされた $create メソッドの例を次に示します。

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

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

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

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

    Return New ScriptReference() {reference}
End Function

Protected Overridable Function GetScriptDescriptors() As IEnumerable(Of ScriptDescriptor)
    Dim descriptor As ScriptControlDescriptor = New ScriptControlDescriptor("Samples.SampleTextBox", Me.ClientID)
    descriptor.AddProperty("highlightCssClass", Me.HighlightCssClass)
    descriptor.AddProperty("nohighlightCssClass", Me.NoHighlightCssClass)

    Return New ScriptDescriptor() {descriptor}
End Function

Function IScriptControlGetScriptReferences() As IEnumerable(Of ScriptReference) Implements IScriptControl.GetScriptReferences
    Return GetScriptReferences()
End Function

Function IScriptControlGetScriptDescriptors() As IEnumerable(Of ScriptDescriptor) Implements IScriptControl.GetScriptDescriptors
    Return GetScriptDescriptors()
End Function

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

    return new ScriptReference[] { reference };
}

protected virtual IEnumerable<ScriptDescriptor> GetScriptDescriptors()
{
    ScriptControlDescriptor descriptor = new ScriptControlDescriptor("Samples.SampleTextBox", this.ClientID);
    descriptor.AddProperty("highlightCssClass", this.HighlightCssClass);
    descriptor.AddProperty("nohighlightCssClass", this.NoHighlightCssClass);

    return new ScriptDescriptor[] { descriptor };
}

IEnumerable<ScriptReference> IScriptControl.GetScriptReferences()
{
    return GetScriptReferences();
}

IEnumerable<ScriptDescriptor> IScriptControl.GetScriptDescriptors()
{
    return GetScriptDescriptors();
}

クライアントコントロールの登録

クライアントコントロールは、現在のページの ScriptManager オブジェクトに登録する必要があります。これは、ScriptManager クラスの RegisterScriptControl<TScriptControl> メソッドを呼び出して、クライアントコントロールに参照を渡すことによって行われます。

この例の Web サーバーコントロールは、自身をクライアントコントロールとしてページの ScriptManager コントロールに登録します。これを行うために、このコントロールは基本 TextBox コントロールの OnPreRender メソッドをオーバーライドします。次に、RegisterScriptControl() メソッドを呼び出し、クライアントコントロールとして自身を登録します。また、GetScriptDescriptors メソッドによって作成されたスクリプト記述子を登録します。これは、コントロールの Render メソッド内で RegisterScriptDescriptors() メソッドを呼び出すことで行われます。

RegisterScriptControl() メソッドおよび RegisterScriptDescriptors() メソッドの呼び出しの例を次に示します。

Protected Overrides Sub OnPreRender(ByVal e As EventArgs)
    If Not Me.DesignMode Then

        ' Test for ScriptManager and register if it exists
        sm = ScriptManager.GetCurrent(Page)

        If sm Is Nothing Then _
            Throw New HttpException("A ScriptManager control must exist on the current page.")

        sm.RegisterScriptControl(Me)
    End If

    MyBase.OnPreRender(e)
End Sub

Protected Overrides Sub Render(ByVal writer As HtmlTextWriter)
    If Not Me.DesignMode Then _
      sm.RegisterScriptDescriptors(Me)

    MyBase.Render(writer)
End Sub

protected override void OnPreRender(EventArgs e)
{
    if (!this.DesignMode)
    {
        // Test for ScriptManager and register if it exists
        sm = ScriptManager.GetCurrent(Page);

        if (sm == null)
            throw new HttpException("A ScriptManager control must exist on the current page.");

        sm.RegisterScriptControl(this);
    }

    base.OnPreRender(e);
}

protected override void Render(HtmlTextWriter writer)
{
    if (!this.DesignMode)
        sm.RegisterScriptDescriptors(this);

    base.Render(writer);
}

Web サーバーコントロールの完全なコードの例を次に示します。

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

    Public Class SampleTextBox
        Inherits TextBox
        Implements IScriptControl

        Private _highlightCssClass As String
        Private _noHighlightCssClass As String
        Private sm As ScriptManager

        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 Sub OnPreRender(ByVal e As EventArgs)
            If Not Me.DesignMode Then

                ' Test for ScriptManager and register if it exists
                sm = ScriptManager.GetCurrent(Page)

                If sm Is Nothing Then _
                    Throw New HttpException("A ScriptManager control must exist on the current page.")

                sm.RegisterScriptControl(Me)
            End If

            MyBase.OnPreRender(e)
        End Sub

        Protected Overrides Sub Render(ByVal writer As HtmlTextWriter)
            If Not Me.DesignMode Then _
              sm.RegisterScriptDescriptors(Me)

            MyBase.Render(writer)
        End Sub

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

            Return New ScriptReference() {reference}
        End Function

        Protected Overridable Function GetScriptDescriptors() As IEnumerable(Of ScriptDescriptor)
            Dim descriptor As ScriptControlDescriptor = New ScriptControlDescriptor("Samples.SampleTextBox", Me.ClientID)
            descriptor.AddProperty("highlightCssClass", Me.HighlightCssClass)
            descriptor.AddProperty("nohighlightCssClass", Me.NoHighlightCssClass)

            Return New ScriptDescriptor() {descriptor}
        End Function

        Function IScriptControlGetScriptReferences() As IEnumerable(Of ScriptReference) Implements IScriptControl.GetScriptReferences
            Return GetScriptReferences()
        End Function

        Function IScriptControlGetScriptDescriptors() As IEnumerable(Of ScriptDescriptor) Implements IScriptControl.GetScriptDescriptors
            Return GetScriptDescriptors()
        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
{
    public class SampleTextBox : TextBox, IScriptControl
    {
        private string _highlightCssClass;
        private string _noHighlightCssClass;
        private ScriptManager sm;

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

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

        protected override void OnPreRender(EventArgs e)
        {
            if (!this.DesignMode)
            {
                // Test for ScriptManager and register if it exists
                sm = ScriptManager.GetCurrent(Page);

                if (sm == null)
                    throw new HttpException("A ScriptManager control must exist on the current page.");

                sm.RegisterScriptControl(this);
            }

            base.OnPreRender(e);
        }

        protected override void Render(HtmlTextWriter writer)
        {
            if (!this.DesignMode)
                sm.RegisterScriptDescriptors(this);

            base.Render(writer);
        }

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

            return new ScriptReference[] { reference };
        }

        protected virtual IEnumerable<ScriptDescriptor> GetScriptDescriptors()
        {
            ScriptControlDescriptor descriptor = new ScriptControlDescriptor("Samples.SampleTextBox", this.ClientID);
            descriptor.AddProperty("highlightCssClass", this.HighlightCssClass);
            descriptor.AddProperty("nohighlightCssClass", this.NoHighlightCssClass);

            return new ScriptDescriptor[] { descriptor };
        }

        IEnumerable<ScriptReference> IScriptControl.GetScriptReferences()
        {
            return GetScriptReferences();
        }

        IEnumerable<ScriptDescriptor> IScriptControl.GetScriptDescriptors()
        {
            return GetScriptDescriptors();
        }
    }
}

クライアントコントロールの作成

Web サーバーコントロールでは、GetScriptReferences メソッドは、コントロール型のクライアントコードを含む JavaScript ファイル (SampleTextBox.js) を指定します。ここでは、そのファイル内の JavaScript コードについて説明します。

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

この例の Web サーバーコントロールは、クライアントコントロールの名前を Samples.SampleTextBox に設定し、クライアントコントロールの highlightCssClass と nohighlightCssClass の 2 つのプロパティを定義します。

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

クライアント名前空間の登録

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

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

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

クライアント名前空間を登録した後、コードは Samples.SampleTextBox クラスを定義します。このクラスには、Web サーバーコントロールによって指定されたプロパティ値を保持する 2 つのプロパティが含まれます。また、Samples.SampleTextBox コントロールに関連付けられた DOM 要素の onfocus イベントおよび onblur イベントのハンドラを指定する 2 つのイベントデリゲートも含まれます。

Samples.SampleTextBox クラス定義の例を次に示します。

Samples.SampleTextBox = function(element) { 
    Samples.SampleTextBox.initializeBase(this, [element]);

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

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

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

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

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

Samples.SampleTextBox コントロールのイベントハンドラメソッドの例を次に示します。

_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;          
    }
},

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

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

メモ :
JavaScript では大文字と小文字が区別されます。get アクセサ名と set アクセサ名は、Web サーバーコントロール内の GetScriptDescriptors メソッドの ScriptDescriptor オブジェクトで指定されるプロパティ名と完全に一致している必要があります。

Samples.SampleTextBox コントロールのプロパティの get アクセサと set アクセサの例を次に示します。

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');
    }
}

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

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

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

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

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

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

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

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

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

Samples.SampleTextBox プロトタイプの initialize メソッドと dispose メソッドを実装する例を次に示します。

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

    this._onfocusHandler = Function.createDelegate(this, this._onFocus);
    this._onblurHandler = Function.createDelegate(this, this._onBlur);

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

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

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

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

コントロールの登録

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

Samples.SampleTextBox コントロールの registerClass メソッドの呼び出しの例を次に示します。この例には、Sys.Application オブジェクトの notifyScriptLoaded メソッドの呼び出しも含まれます。この呼び出しは、JavaScript ファイルが読み込まれたことを Microsoft AJAX Library に通知するために必要です。

Samples.SampleTextBox.registerClass('Samples.SampleTextBox', Sys.UI.Control);

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

Samples.SampleTextBox クライアントコントロールの完全なコード例を次に示します。

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

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

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

//
// Create the prototype for the control.
//

Samples.SampleTextBox.prototype = {


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

        this._onfocusHandler = Function.createDelegate(this, this._onFocus);
        this._onblurHandler = Function.createDelegate(this, this._onBlur);

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

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

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

        Samples.SampleTextBox.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;          
        }
    },


    //
    // Control 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.SampleTextBox.descriptor = {
    properties: [   {name: 'highlightCssClass', type: String},
                    {name: 'nohighlightCssClass', type: String} ]
}

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

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

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

このトピックのコントロールも含め、すべての 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 コントロールを選択すると、強調表示されます。

このトピックで作成した動作を使用する ASP.NET ページの例を次に示します。

コントロールのアセンブリへのコンパイル

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

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

メモ :
この手順を実行するには、Microsoft Visual Studio 2005 を使用する必要があります。Visual Web Developer 2005 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
ソリューションエクスプローラで、元のプロジェクトから SampleTextBox.cs ファイルまたは SampleTextBox.vb ファイルと SampleTextBox.js ファイルをコピーし、Samples クラスライブラリプロジェクトのルートに追加します。
SampleTextBox.js ファイルの [プロパティ] ウィンドウで、[ビルドアクション] を [埋め込まれたリソース] に設定します。

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

<Assembly: WebResource("Samples.SampleTextBox.js", "text/javascript")>

[assembly: System.Web.UI.WebResource("Samples.SampleTextBox.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 では、既定でアセンブリ名前空間がアセンブリ名に設定されます。アセンブリ名前空間は、アセンブリのプロパティで編集できます。

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

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

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

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

            Return New ScriptReference() {reference}
        End Function

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

            return new ScriptReference[] { reference };
        }

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

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

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

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

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

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

新しい ASP.NET AJAX プロジェクトを作成します。
Web サイトのルートディレクトリに Bin フォルダを作成します。
Samples クラスプロジェクトの Bin\Debug フォルダまたは Bin\Release フォルダから新しい Bin フォルダに Samples.dll アセンブリをコピーします。
TestSampleTextBoxAssembly.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 属性があります。
ページを実行し、各コントロールを選択します。

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

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

参照

概念

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

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

参照

Sys.UI.Control クラス

IScriptControl

ScriptManager

次の方法で共有

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

クライアント要件の識別

Web サーバーコントロールの作成

IScriptControl インターフェイスの実装

クライアントコントロールの登録

クライアントコントロールの作成

クライアント名前空間の登録

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

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

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

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

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

コントロールの登録

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

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

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

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

コントロールのアセンブリへのコンパイル

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

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

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

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

参照

概念

参照

その他のリソース

次の方法で共有

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

クライアント要件の識別

Web サーバー コントロールの作成

IScriptControl インターフェイスの実装

クライアント コントロールの登録

クライアント コントロールの作成

クライアント名前空間の登録

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

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

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

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

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

コントロールの登録

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

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

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

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

コントロールのアセンブリへのコンパイル

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

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

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

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

参照

概念

参照

その他のリソース

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

Web サーバーコントロールの作成

クライアントコントロールの登録

クライアントコントロールの作成

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

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

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

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

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

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