Microsoft AJAX Library を使用したカスタムクライアントスクリプトの作成

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

更新 : 2007 年 11 月

ASP.NET の AJAX 機能は、クライアントスクリプトを作成して ASP.NET アプリケーションに組み込む場合に役立ちます。これには、ECMAScript (JavaScript) 用の型システム、既存の ECMAScript (JavaScript) オブジェクトに .NET Framework クラスの多様性を提供する拡張機能などが含まれます。また、ASP.NET には、これらのスクリプトライブラリやアプリケーション内のカスタムスクリプトを管理する、ScriptManager コントロールも用意されています。

このトピックは、次のセクションで構成されています。

シナリオ
型システムの使用
JavaScript の基本型に対する拡張の使用
クライアントスクリプトの ASP.NET Web アプリケーションへの組み込み

シナリオ

以下の操作を行う場合は、Microsoft AJAX Library の機能を使用できます。

JavaScript コードにオブジェクト指向の機能を追加し、コードの再利用性、柔軟性、および管理のしやすさを向上させる。
リフレクションを使用して、クライアントスクリプトの実行時に構造およびコンポーネントをチェックする。
列挙体を使用して、整数表現よりもわかりやすい代替表現を作成する。
JavaScript の基本型に対する拡張を使用して、一般的なスクリプトタスクの開発時間を短縮する。
デバッガ拡張およびトレース機能を使用して、従来の JavaScript のデバッグ手法よりも迅速で有益なデバッグを実現する。

型システムの使用

Microsoft AJAX Library は、型システムおよび拡張子を JavaScript オブジェクトに追加して、.NET Framework に含まれている機能と似た、頻繁に使用されるオブジェクト指向機能を提供します。これにより、保守性に優れ、機能の追加やレイヤ化を簡単に実行できる構造的な方法で、AJAX 対応の ASP.NET アプリケーションを作成できます。Microsoft AJAX Library の拡張機能により、次の機能を JavaScript に追加できます。

クラス
名前空間
継承
インターフェイス
列挙体
リフレクション

このライブラリには、文字列と配列用のヘルパー関数も用意されています。

クラス、メンバ、および名前空間

Microsoft AJAX Library には、基本クラスと、それらの基本クラスから派生するオブジェクトおよびコンポーネントが含まれています。これらのクラスを合わせて使用すると、クライアントスクリプトの記述にオブジェクト指向プログラミングモデルを使用することができます。

Type クラスは、名前空間、クラス、および継承などのオブジェクト指向機能を JavaScript のプログラミングに追加します。Type クラスを使用して登録されたすべての JavaScript オブジェクトは、この機能に自動的にアクセスできます。Type クラスを使用して、JavaScript ファイルに名前空間とクラスを作成および登録する方法を次の例に示します

Type.registerNamespace("Demo");

Demo.Person = function(firstName, lastName, emailAddress) {
    this._firstName = firstName;
    this._lastName = lastName;
    this._emailAddress = emailAddress;
}

Demo.Person.prototype = {

    getFirstName: function() {
        return this._firstName;
    },

    getLastName: function() {
        return this._lastName;
    },

    getName: function() {
        return this._firstName + ' ' + this._lastName;
    },

    dispose: function() {
        alert('bye ' + this.getName());
    }
}
Demo.Person.registerClass('Demo.Person', null, Sys.IDisposable);

// Notify ScriptManager that this is the end of the script.
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

クラスは、フィールド、プロパティ、メソッド、およびイベントという 4 種類のメンバを持つことができます。フィールドおよびプロパティは、クラスのインスタンスの特性を記述する名前と値のペアです。フィールドはプリミティブ型で構成され、次の例のように直接アクセスされます。

myClassInstance.name="Fred"

プロパティは、任意のプリミティブ型または参照型を表すことができます。get アクセサメソッドと set アクセサメソッドを使用して、プロパティ値にアクセスします。Microsoft AJAX Library では、get アクセサおよび set アクセサは関数です。慣例により、関数名には "get_" または "set_" というプレフィックスを使用します。たとえば、cancel のプロパティの値を取得または設定するには、get_cancel メソッドまたは set_cancel メソッドを呼び出します。

Microsoft AJAX Library は、AJAX クライアントアプリケーションのライフサイクル中に発生したアクションに応答してイベントを発生させます。また、Microsoft AJAX Library には、AJAX クライアントコンポーネントのカスタムイベントを作成するための標準的な方法も用意されています。詳細については、「カスタムクライアントイベントの作成」および「AJAX クライアントライフサイクルイベント」を参照してください。

Microsoft AJAX Library を使用すると、名前空間を登録して、共通の機能をグループ化することができます。Type.registerNamespace メソッドおよび .registerClass メソッドを使用して、Person クラスを Demo 名前空間に追加する例を次に示します。

ASP.NET Web ページで AJAX 機能を有効にするには、目的のページに ScriptManager コントロールを追加する必要があります。ページがレンダリングされると、AJAX クライアントスクリプトライブラリへの適切なスクリプト参照が自動的に生成されます。ScriptManager コントロールを使用したページの例を次に示します。

<asp:ScriptManager runat="server" ID="scriptManager" />

名前空間を登録する方法、クラスを作成する方法、およびそのクラスを登録する方法を次の例に示します。

Type.registerNamespace("Demo");

Demo.Person = function(firstName, lastName, emailAddress) {
    this._firstName = firstName;
    this._lastName = lastName;
    this._emailAddress = emailAddress;
}

Demo.Person.prototype = {

    getFirstName: function() {
        return this._firstName;
    },

    getLastName: function() {
        return this._lastName;
    },

    getName: function() {
        return this._firstName + ' ' + this._lastName;
    },

    dispose: function() {
        alert('bye ' + this.getName());
    }
}
Demo.Person.registerClass('Demo.Person', null, Sys.IDisposable);

// Notify ScriptManager that this is the end of the script.
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Namespace</title>
</head>

<body>
    <form id="Main" runat="server">
        <asp:ScriptManager runat="server" ID="scriptManager" />
    </form>

    <div>
        <p>This example creates an instance of the Person class 
            and puts it in the "Demo" namespace.</p>

        <input id="Button1" value="Create Demo.Person" 
            type="button" onclick="return OnButton1Click()" />

    </div>

    <script type="text/javascript" src="Namespace.js"></script>
    <script type="text/javascript" language="JavaScript">

    function OnButton1Click() 
    {
        var testPerson = new Demo.Person(  
            'John', 'Smith', 'john.smith@example.com');
        alert(testPerson.getFirstName() + " " +    
            testPerson.getLastName() );

        return false;
    }
    </script>
</body>
</html>

アクセス修飾子

多くのオブジェクト指向プログラミング言語には、アクセス修飾子の概念が含まれています。アクセス修飾子を使用すると、クラスまたはメンバが利用可能なコンテキストを指定できます。たとえば、外部プログラム、同じ名前空間内の内部クラス、特定のコードブロック内のみなどです。JavaScript にはアクセス修飾子はありません。ただし、Microsoft AJAX Library では、アンダースコア文字 ("_") で始まる名前を持つメンバをプライベートであると見なし、これらのメンバが属するクラスの外部からはアクセスできないという規則を使用しています。

継承

継承とは、あるクラスから別のクラスを派生する機能のことです。派生クラスは、基本クラスのすべてのフィールド、プロパティ、メソッド、およびイベントを自動的に継承します。派生クラスには、新規メンバを追加できます。また、基本クラスの既存メンバをオーバーライドして、その動作を変更することもできます。

スクリプトで定義された 2 つのクラス、Person と Employee が含まれている例を次に示します。Employee は、Person から派生します。どちらのクラスもプライベートフィールドの使用方法を示し、また、パブリックプロパティとメソッドを含んでいます。さらに、Employee は Person クラスの toString 実装をオーバーライドして、基本クラスの機能を使用します。

Type.registerNamespace("Demo");

Demo.Person = function(firstName, lastName, emailAddress) {
    this._firstName = firstName;
    this._lastName = lastName;
    this._emailAddress = emailAddress;
}

Demo.Person.prototype = {
    getFirstName: function() {
        return this._firstName;
    },

    getLastName: function() {
        return this._lastName;
    },

    getEmailAddress: function() {
        return this._emailAddress;
    },
    setEmailAddress: function(emailAddress) {
        this._emailAddress = emailAddress;
    },

    getName: function() {
        return this._firstName + ' ' + this._lastName;
    },

    dispose: function() {
        alert('bye ' + this.getName());
    },

    sendMail: function() {
        var emailAddress = this.getEmailAddress();

        if (emailAddress.indexOf('@') < 0) {
            emailAddress = emailAddress + '@example.com';
        }
        alert('Sending mail to ' + emailAddress + ' ...');
    },

    toString: function() {
        return this.getName() + ' (' + this.getEmailAddress() + ')';
    }
}

Demo.Person.registerClass('Demo.Person', null, Sys.IDisposable);
Demo.Employee = function(firstName, lastName, emailAddress, team, title) {
    Demo.Employee.initializeBase(this, [firstName, lastName, emailAddress]);

    this._team = team;
    this._title = title;
}

Demo.Employee.prototype = {

    getTeam: function() {
        return this._team;
    },
    setTeam: function(team) {
        this._team = team;
    },

    getTitle: function() {
        return this._title;
    },
    setTitle: function(title) {
        this._title = title;
    },
    toString: function() {
        return Demo.Employee.callBaseMethod(this, 'toString') + '\r\n' + this.getTitle() + '\r\n' + this.getTeam();
    }
}
Demo.Employee.registerClass('Demo.Employee', Demo.Person);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Inheritance</title>
</head>

<body>
    <form id="Main" runat="server">
        <asp:ScriptManager runat="server" ID="scriptManager" />
    <script type="text/javascript" src="Inheritance.js"></script>
    </form>

    <h2>Inheritance</h2>
    <p />

    <div>
        This file contains two classes defined in script: Person and Employee, where
        Employee derives from Person.
        <p />

        Each class has private fields, and public properties and methods. In addition,
        Employee overrides the toString implementation, and in doing so, it uses the
        base class functionality.
        <p />

        This example puts the Person class in the "Demo" namespace.
        <p />
    </div>


    <div>
        <ul>
            <li><a href="#" onclick="return OnTestNewClick()">Object Creation</a></li>
            <li><a href="#" onclick="return OnTestDisposeClick()">Object Dispose</a></li>
            <li><a href="#" onclick="return OnTestPrivatePropertyClick()">Public vs. Private Properties</a></li>
            <li><a href="#" onclick="return OnTestInstanceMethodClick()">Instance Methods</a></li>
            <li><a href="#" onclick="return OnTestOverrideMethodClick()">Overriden Methods</a></li>
            <li><a href="#" onclick="return OnTestInstanceOfClick()">Instance Of Check</a></li>
        </ul>
    </div>

    <script type="text/javascript" language="JavaScript">

    function GetTestPerson() 
    {
        return new Demo.Person('Jane', 'Doe', 'jane.doe@example.com');
    }

    function GetTestEmployee() 
    {
        return new Demo.Employee('John', 'Doe', 'john.doe@example.com', 'Platform', 'Programmer');
    }

    function OnTestNewClick() {
        var aPerson = GetTestPerson();

        alert(aPerson.getFirstName());
        alert(aPerson);
        alert(Object.getType(aPerson).getName());

        var testPerson = GetTestPerson();
        alert(testPerson.getFirstName());
        alert(testPerson);

        return false;
    }

    function OnTestDisposeClick() {
        var aPerson = GetTestEmployee();
        alert(aPerson.getFirstName());
        aPerson.dispose();
    }

    function OnTestPrivatePropertyClick() {
        var aPerson = GetTestEmployee();
        alert('aPerson._firstName = ' + aPerson._firstName);
        alert('aPersona.getFirstName() = ' + aPerson.getFirstName());

        return false;
    }

    function OnTestInstanceMethodClick() {
        var aPerson = GetTestEmployee();
        aPerson.sendMail('Hello', 'This is a test mail.');

        return false;
    }

    function OnTestOverrideMethodClick() {
        var testPerson = GetTestEmployee();
        alert(testPerson);

        return false;
    }

    function OnTestInstanceOfClick() {
        var aPerson = GetTestEmployee();
        if (Demo.Employee.isInstanceOfType(aPerson)) {
            alert(aPerson.getName() + ' is an Employee instance.\r\nTitle property: ' + aPerson.getTitle());
        }

        return false;
    }

    </script>
</body>
</html>

インターフェイス

インターフェイスは、そのインターフェイスを実装するクラスの入出力要件を定義します。これにより、クラスが実装するその他の機能に関係なく、関数は同じインターフェイスを実装するクラスと情報をやり取りできます。

次の例では、Tree 基本クラスと IFruitTree インターフェイスを定義しています。Apple と Banana の 2 つの派生クラスは IFruitTree インターフェイスを実装しますが、Pine クラスは実装しません。任意のクラスが IFruitTree インターフェイスを実装すると、bearFruit メソッドは必ずそのクラスのメンバになります。

Type.registerNamespace("Demo.Trees");

Demo.Trees.IFruitTree = function() {}
Demo.Trees.IFruitTree.Prototype = {
    bearFruit: function(){}
}
Demo.Trees.IFruitTree.registerInterface('Demo.Trees.IFruitTree');


Demo.Trees.Tree = function(name) {
    this._name = name;
}
Demo.Trees.Tree.prototype = {
    returnName: function() {
        return this._name;
    },

    toStringCustom: function() {
        return this.returnName();
    },

    makeLeaves: function() {}
}
Demo.Trees.Tree.registerClass('Demo.Trees.Tree');


Demo.Trees.FruitTree = function(name, description) {
    Demo.Trees.FruitTree.initializeBase(this, [name]);
    this._description = description;
}
Demo.Trees.FruitTree.prototype.bearFruit = function() {
        return this._description;
}
Demo.Trees.FruitTree.registerClass('Demo.Trees.FruitTree', Demo.Trees.Tree, Demo.Trees.IFruitTree);

Demo.Trees.Apple = function() {
    Demo.Trees.Apple.initializeBase(this, ['Apple', 'red and crunchy']);
}
Demo.Trees.Apple.prototype = {
    makeLeaves: function() {
        alert('Medium-sized and desiduous');
    },
    toStringCustom: function() {
        return 'FruitTree ' + Demo.Trees.Apple.callBaseMethod(this, 'toStringCustom');
    }
}
Demo.Trees.Apple.registerClass('Demo.Trees.Apple', Demo.Trees.FruitTree);

Demo.Trees.GreenApple = function() {
    Demo.Trees.GreenApple.initializeBase(this);
    // You must set the _description feild after initializeBase
    // or you will get the base value.
    this._description = 'green and sour';
}
Demo.Trees.GreenApple.prototype.toStringCustom = function() {
    return Demo.Trees.GreenApple.callBaseMethod(this, 'toStringCustom') + ' ... its GreenApple!';
}
Demo.Trees.GreenApple.registerClass('Demo.Trees.GreenApple', Demo.Trees.Apple);


Demo.Trees.Banana = function(description) {
    Demo.Trees.Banana.initializeBase(this, ['Banana', 'yellow and squishy']);
}
Demo.Trees.Banana.prototype.makeLeaves = function() {
    alert('Big and green');
}
Demo.Trees.Banana.registerClass('Demo.Trees.Banana', Demo.Trees.FruitTree);



Demo.Trees.Pine = function() {
    Demo.Trees.Pine.initializeBase(this, ['Pine']);
}
Demo.Trees.Pine.prototype.makeLeaves = function() {
    alert('Needles in clusters');
}
Demo.Trees.Pine.registerClass('Demo.Trees.Pine', Demo.Trees.Tree);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Interface</title>
</head>

<body>
    <form id="Main" runat="server">
        <asp:ScriptManager runat="server" ID="scriptManager" />
    </form>

    <h2>Interface</h2>
    <p />

    <div>
        This file contains a Tree base class, and an IFruitTree interface.
        Apple and Banana, two derived classes implement that interface, whereas,
        Pine does not implement that interface.
        <p />
    </div>

    <script type="text/javascript" src="Interface.js"></script>

    <div>
        <ul>
                <li><a href="#" onclick="return OnTestNewClick()">Object Creation</a></li>
                <li><a href="#" onclick="return OnTestImplementsClick()">Implements Check</a></li>
                <li><a href="#" onclick="return OnTestInterfaceMethodClick()">Call interface method</a></li>
        </ul>
    </div>

    <script type="text/javascript" language="JavaScript">

    function OnTestNewClick() {
        var apple = new Demo.Trees.Apple('Apple');
        alert(apple.returnName());
        apple.makeLeaves();

        return false;
    }

    function OnTestImplementsClick() {
        var apple = new Demo.Trees.Apple();
        if (Demo.Trees.IFruitTree.isImplementedBy(apple)) {
            alert('Apple implements IFruitTree');
        }
        else {
            alert('Apple does not implement IFruitTree');
        }

        var pine = new Demo.Trees.Pine();
        if (Demo.Trees.IFruitTree.isImplementedBy(pine)) {
            alert('Pine implements IFruitTree');
        }
        else {
            alert('Pine does not implement IFruitTree');
        }

        return false;
    }

    function OnTestInterfaceMethodClick() {
        var apple = new Demo.Trees.Apple();
        ProcessTree(apple);

        var pine = new Demo.Trees.Pine();
        ProcessTree(pine);

        var banana = new Demo.Trees.Banana();
        ProcessTree(banana);

        var g = new Demo.Trees.GreenApple();
        ProcessTree(g);

        return false;
    }

    function ProcessTree(tree) {
        alert('Current Tree ' + tree.returnName());
        alert(tree.toStringCustom());
        if (Demo.Trees.IFruitTree.isImplementedBy(tree)) {
            alert(tree.returnName() + ' implements IFruitTree; Fruit is ' + tree.bearFruit());
        }
    }
    </script>
</body>
</html>

列挙体

列挙型は、名前付きの整数定数が複数含まれたクラスです。次の例に示すように、プロパティなどの値にアクセスできます。

myObject.color = myColorEnum.red

列挙体を使用すると、整数表現よりもわかりやすい代替表現を作成できます。Microsoft AJAX Library の列挙体の詳細については、「Type.registerEnum メソッド (ASP.NET AJAX)」を参照してください。

16 進数値を表す名前付きの色の列挙型を定義する例を次に示します。

Type.registerNamespace("Demo");

// Define an enumeration type and register it.
Demo.Color = function(){};
Demo.Color.prototype = 
{
    Red:    0xFF0000,
    Blue:   0x0000FF,
    Green:  0x00FF00,
    White:  0xFFFFFF 
}
Demo.Color.registerEnum("Demo.Color");

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Enumeration</title>
</head>

<body>
    <form id="Main" runat="server">
        <asp:ScriptManager runat="server" ID="scriptManager" />
    </form>

    <div>
        <p>This example creates an Enumeration of colors
            and applies them to page background.</p>

        <select id="ColorPicker" 
            onchange="ChangeColor(options[selectedIndex].value)">
            <option value="Red" label="Red" />
            <option value="Blue" label="Blue" />
            <option value="Green" label="Green" />
            <option value="White" label="White" />
        </select>

    </div>

    <script type="text/javascript" src="Enumeration.js"></script>
    <script type="text/javascript" language="JavaScript">

    function ChangeColor(value) 
    {
         document.body.bgColor = eval("Demo.Color." + value + ";");
    }

    </script>

</body>
</html>

リフレクション

リフレクションは、プログラムの実行時に構造およびコンポーネントをチェックする機能です。リフレクションを実装する API は、Type クラスの拡張機能です。これらのメソッドによって、任意のオブジェクトについて、継承元、特定のインターフェイスを実装しているか、特定のクラスのインスタンスであるかなどの情報を収集できます。

リフレクション API を使用して、前のインターフェイスの例の GreenApple クラスをテストする例を次に示します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Reflection</title>
</head>

<body>
    <form id="Main" runat="server">
        <asp:ScriptManager runat="server" ID="scriptManager" />
    </form>

    <div>
        <p>This example tests the Demo.Trees.GreenApple class 
            against various reflection APIs.</p>

        <input id="Button1" value="Check Type" 
            type="button" onclick="return OnButton1Click()" />
        <input id="Button2" value="Check Inheritance" 
            type="button" onclick="return OnButton2Click()" />
        <input id="Button3" value="Check Interface" 
            type="button" onclick="return OnButton3Click()" />

    </div>

    <script type="text/javascript" src="Interface.js"></script>
    <script type="text/javascript" language="JavaScript">

    var g = new Demo.Trees.GreenApple();
    var gt = Demo.Trees.GreenApple;
    var a = new Array(
        Demo.Trees.Apple, 
        Demo.Trees.Tree, 
        Demo.Trees.Pine,
        Demo.Trees.IFruitTree,
        Sys.IContainer);

    function OnButton1Click() 
    {
        for (var i = 0; i < a.length; i ++)
        {
            if (a[i].isInstanceOfType(g))
            {
                alert(gt.getName() + " is a " + a[i].getName() + ".");
            }
            else alert(gt.getName() + " is not a " + a[i].getName() + ".");
        }
    }

    function OnButton2Click() 
    {
        for (var i = 0; i < a.length; i ++)
        {
            if (gt.inheritsFrom(a[i]))
            {
                alert(gt.getName() + " inherits from " + a[i].getName() + ".");
            }
            else alert(gt.getName() + " does not inherit from " + a[i].getName() + ".");
        }
    }

    function OnButton3Click() 
    {
        for (var i = 0; i < a.length; i ++)
        {
            if (Type.isInterface(a[i]))
            {
                if (gt.implementsInterface(a[i]))
                {
                    alert(gt.getName() + " implements the " + a[i].getName() + " interface.");
                }
                else alert(gt.getName() + " does not implement the " + a[i].getName() + " interface.");
            }
            else alert(a[i].getName() + " is not an interface.");
        }
    }
    </script>
</body>
</html>

JavaScript の基本型に対する拡張の使用

JavaScript の基本型に対する拡張を使用すると、これらの型に機能を追加できます。この拡張の詳細については、次のトピックを参照してください。

Sys.Debug クラスは豊富なデバッグ機能を提供します。詳細については、「AJAX アプリケーションのデバッグとトレースの概要」および Sys.Debug クラスの概要を参照してください。

Microsoft AJAX Library に基づくコンポーネントを作成する場合、ScriptManager コントロールによって自動的に管理される、スクリプトファイルのデバッグバージョンとリリースバージョンを作成できます。スクリプトファイルのデバッグバージョンは、スクリプトファイル名に含まれている ".debug" によって識別できます。たとえば、次のスクリプトファイル名は、ファイルのデバッグバージョンとリテールバージョンを示しています。

MyScript.js (リテール)
MyScript.debug.js (デバッグ)

クライアントスクリプトの ASP.NET Web アプリケーションへの組み込み

ASP.NET の Web ページでは、次の例のように、<script> ブロックでスクリプトファイルを参照することでスクリプトファイルにアクセスできます。

<script type="text/javascript" src="MyScript.js"></script>

ただし、この方法で呼び出されたスクリプトは、部分ページレンダリングで使用したり、Microsoft AJAX Library の特定のコンポーネントにアクセスしたりできません。AJAX 対応の ASP.NET Web アプリケーションで、スクリプトファイルを部分ページレンダリングで使用できるようにするには、スクリプトをページ上の ScriptManager コントロールに登録する必要があります。スクリプトファイルを登録するには、目的のファイルを指す ScriptReference オブジェクトを作成し、それを Scripts コレクションに追加します。マークアップでこれを行う方法を次の例に示します。

<asp:ScriptManager ID="SMgr" runat="server">
  <Scripts>
    <asp:ScriptReference path="MyScript.js" />
  </Scripts>
</asp:ScriptManager>

スクリプトファイルが ScriptManager コントロールによって適切に処理されるようにするには、Sys.Application.notifyScriptLoaded メソッドへの呼び出しを各ファイルの最後に記述する必要があります。この呼び出しにより、ファイルが読み込みを完了したことがアプリケーションに通知されます。この目的でのコードの使用例を次に示します。

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

.js ファイルをリソースとしてマネージコードアセンブリに埋め込むこともできます。この方法は、クライアントスクリプトに実装する AJAX 機能付きの ASP.NET サーバーコントロールを作成する場合に使用します。スクリプトがアセンブリに埋め込まれている場合、通知のステートメントをスクリプトに記述する必要はありません。また、スクリプト参照で path 属性を指定する必要もありません。ただし、次の例に示すように、ファイル拡張子を除いたアセンブリの名前を記述する必要があります。

<asp:ScriptManager ID="SMgr" runat="server">
  <Scripts>
    <asp:ScriptReference 
        Name="MyScript.js" Assembly="MyScriptAssembly"/>
  </Scripts>
</asp:ScriptManager>

メモ :
スクリプトライブラリが埋め込まれたコントロールの多くはスクリプトを内部的に参照するので、このシナリオはページ作成者にとって一般的ではありません。詳細については、「チュートリアル : アセンブリ内のリソースとしての JavaScript ファイルの埋め込み」を参照してください。

スクリプトを参照するコードを作成して Scripts コレクションに追加することにより、プログラムによってスクリプトを登録することもできます。詳細については、「スクリプト参照の動的な割り当て」を参照してください。

ScriptManager コントロールの登録メソッドを使用すると、部分ページ更新に必要なスクリプトを登録できます。これらのメソッドは、次のように使用できます。

クライアントスクリプトのコードを生成するには、スクリプトのブロックを文字列としてビルドして RegisterClientScriptBlock メソッドに渡します。
Microsoft AJAX Library に依存しないスタンドアロンのスクリプトファイルを追加するには、RegisterClientScriptInclude メソッドを使用します。
アセンブリに埋め込まれているスクリプトファイルを追加するには、RegisterClientScriptInclude メソッドを使用します。

メモ :

これらのメソッドを使用して登録されるスクリプトでは、ローカリゼーションはサポートされません。

メモ :
これらのメソッドを使用して登録されるスクリプトでは、ローカリゼーションはサポートされません。

すべてのスクリプト登録メソッドおよびその使用方法の一覧については、ScriptManager コントロールの概要を参照してください。

登録するすべてのスクリプトブロックとインラインスクリプトは、ページの <form> 要素の中に含める必要があります。そうでない場合、スクリプトは ScriptManager コントロールに登録されず、ASP.NET AJAX 機能にアクセスできません。詳細については、「Sys.Application.initialize メソッド」を参照してください。

参照

次の方法で共有

Microsoft AJAX Library を使用したカスタムクライアントスクリプトの作成

シナリオ

型システムの使用

クラス、メンバ、および名前空間

アクセス修飾子

継承

インターフェイス

列挙体

リフレクション

JavaScript の基本型に対する拡張の使用

クライアントスクリプトの ASP.NET Web アプリケーションへの組み込み

参照

処理手順

概念

参照

その他のリソース

次の方法で共有

Microsoft AJAX Library を使用したカスタム クライアント スクリプトの作成

シナリオ

型システムの使用

クラス、メンバ、および名前空間

アクセス修飾子

継承

インターフェイス

列挙体

リフレクション

JavaScript の基本型に対する拡張の使用

クライアント スクリプトの ASP.NET Web アプリケーションへの組み込み

参照

処理手順

概念

参照

その他のリソース

Microsoft AJAX Library を使用したカスタムクライアントスクリプトの作成

クライアントスクリプトの ASP.NET Web アプリケーションへの組み込み