使用 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 程式碼以增加程式碼的重複使用性、彈性與可維護性。
在執行階段使用反映 (Reflection) 來檢查用戶端指令碼結構與元件。
使用列舉型別 (Enumeration) 來提供另一種簡單易讀的整數表示法。
在 JavaScript 基底類別中使用擴充功能來縮短常見指令碼編寫工作的開發時間。
使用偵錯擴充功能與追蹤功能，以提供比傳統 JavaScript 偵錯技術更為快速、詳細的偵錯作業。

使用型別系統

Microsoft AJAX Library 會將型別系統與擴充功能加入至 JavaScript 物件中，以提供類似 .NET Framework 功能的常用物件導向功能。它們可讓您以結構化方式撰寫具備 AJAX 能力的 ASP.NET 應用程式，以提高可維護性並使其更容易加入與分層功能。Microsoft AJAX Library 擴充功能會將下列功能加入至 JavaScript：

類別
命名空間
繼承
介面
列舉型別
反映

程式庫同時會將 Helper 功能提供給字串與陣列。

類別、成員與命名空間

Microsoft AJAX Library 包含基底類別，以及從這些類別衍生的物件與元件。一起使用這些類別可讓您使用物件導向的程式撰寫模型 (Programming Model)，以撰寫用戶端指令碼。

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();

類別分成四種成員：欄位、屬性、方法和事件。欄位和屬性都是名稱/值組，可用來說明類別執行個體的特性。欄位是由基本型別 (Primitive Type) 所組成，而且可直接存取，如下列範例所示：

myClassInstance.name="Fred"

屬性可代表任何基本或參考型別。您可以使用 get 和 set 存取子方法來存取屬性值。在 Microsoft AJAX Library 中，get 和 set 存取子都是函式，且通常會在函式名稱中使用 "get_" 或 "set_" 的前置詞。例如，若要取得或設定如 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 網頁的 AJAX 功能，您必須將 ScriptManager 控制項加入至網頁中。在網頁呈現出來後，就會自動針對 AJAX 用戶端指令碼程式庫產生適當的指令碼參考。下列範例說明具有 ScriptManager 控制項的網頁。

<asp:ScriptManager  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" >
        <asp:ScriptManager  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>

存取修飾詞

大部分的物件導向程式設計語言都包含了「存取修飾詞」(Access Modifier) 的概念，此概念可讓您指定要在哪種環境下 (例如在外部程式中、相同命名空間裡的內部類別，或是僅於特定程式碼區塊中) 提供類別或成員。JavaScript 並未包含存取修飾詞。但是，Microsoft AJAX Library 按照慣例會將具有底線字元 ("_") 開頭名稱的成員視為私用，而且無法在所屬的類別以外加以存取。

繼承

繼承為某類別從另一個類別衍生的能力。衍生類別會自訂繼承基底類別的所有欄位、屬性、方法與事件。衍生類別可以加入新成員，或覆寫基底類別的現有成員以變更其行為。

下列範例包含兩個在指令碼中定義的類別：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" >
        <asp:ScriptManager  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，這兩個衍生類別會實作 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" >
        <asp:ScriptManager  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)。

下列範例定義了代表十六進位值之具名色彩的列舉型別。

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" >
        <asp:ScriptManager  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" >
        <asp:ScriptManager  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 網頁可藉由在 <script> 區塊中參考指令碼檔案來加以存取，如下列範例所示：

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

但是，透過這種方式叫用的指令碼無法參與網頁局部呈現作業或是存取特定的 Microsoft AJAX Library 元件。為了讓使用 AJAX 技術的 ASP.NET Web 應用程式能夠在網頁局部呈現作業中使用指令碼檔案，指令碼必須在網頁中註冊 ScriptManager 控制項。若要註冊指令碼檔案，請建立 ScriptReference 物件，以指向檔案問題並將其加入至 Scripts 集合。下列範例說明如何使用標記進行這項作業：

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

為了讓 ScriptManager 控制項能夠正確無誤地處理指令碼檔案，每個檔案都必須在檔案的結果包含對 Sys.Application.notifyScriptLoaded 方法的呼叫。此呼叫會通知應用程式，告知檔案已經完成載入。下列範例說明做為此用途的程式碼：

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

您也可以在 Managed 程式碼組件中將 .js 檔案當成資源來嵌入 (如果使用已在用戶端指令碼中實作的功能來建立 ASP.NET 伺服器控制項，就可以這麼做)。如果您的指令碼已經內嵌在組件中，就不需要將通知陳述式加入至指令碼中。您也不需要在指令碼參考中指定 path 屬性。但是，您必須提供不包含副檔名的組件名稱，如下列範例所示：

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

注意事項：
網頁開發人員不常碰到這種情況，因為大部分使用內嵌式指令碼程式庫的控制項都會在內部參考自己的指令碼。如需詳細資訊，請參閱逐步解說：嵌入 JavaScript 檔做為組件中的資源。

您也可以在程式碼中建立指令碼參考，並將其加入至 Scripts 集合，藉此以程式設計方式來註冊指令碼。如需詳細資訊，請參閱動態指派指令碼參考。

您可以使用 ScriptManager 控制項的註冊方法，針對網頁局部更新註冊所需的指令碼。您可以採用下列各種方式來使用這些方法：

若要在程式碼中產生用戶端指令碼，請將指令碼區塊建置為字串，並將其傳送至 RegisterClientScriptBlock 方法。
若要加入不具有任何 Microsoft AJAX Library 相依性的獨立指令碼檔案，請使用 RegisterClientScriptInclude 方法。
若要加入內嵌在組件中的指令碼檔案，請使用 RegisterClientScriptInclude 方法。

注意事項：

使用這些方法註冊的指令碼，將無法獲得任何當地語系化支援。

注意事項：
使用這些方法註冊的指令碼，將無法獲得任何當地語系化支援。

如需指令碼註冊方法的完整清單及其使用方式，請參閱 ScriptManager 控制項概觀。

任何您所註冊的指令碼區塊或內嵌指令碼 (Inline Script) 都必須位於網頁的 <form> 項目中。否則，指令碼將無法註冊 ScriptManager 控制項，而且無法存取 ASP.NET AJAX 功能。如需詳細資訊，請參閱 Sys.Application.initialize 方法。

請參閱

共用方式為