Erstellen von benutzerdefiniertem Clientskript mithilfe der Microsoft AJAX-Bibliothek
Aktualisiert: November 2007
Sie können die AJAX-Features in ASP.NET verwenden, um Clientskript zu erstellen und in ASP.NET-Anwendungen zu integrieren. Dazu gehören auch ein Typsystem für ECMAScript (JavaScript) und Erweiterungen zu vorhandenen ECMAScript (JavaScript)-Objekten, um die umfangreiche Funktionalität von .NET Framework-Klassen bereitzustellen. ASP.NET enthält außerdem das ScriptManager-Steuerelement, um diese Skriptbibliotheken und benutzerdefiniertes Skript in Ihren Anwendungen zu verwalten.
Dieses Thema enthält folgende Abschnitte:
Szenarien
Verwenden des Typsystems
Verwenden von Erweiterungen zu den JavaScript-Basistypen
Integrieren von Clientskript in ASP.NET-Webanwendungen
Szenarien
Sie können die Features der Microsoft AJAX Library verwenden, wenn Sie Folgendes durchführen möchten:
Fügen Sie dem JavaScript-Code objektorientierte Funktionen hinzu, um die Wiederverwendbarkeit, Flexibilität und Verwaltbarkeit von Code zu erhöhen.
Verwenden Sie die Reflektion, um die Struktur und die Komponenten des Clientskripts zur Laufzeit zu untersuchen.
Verwenden Sie Enumerationen, um eine leicht lesbare Alternative zu Ganzzahldarstellungen bereitzustellen.
Verwenden Sie Erweiterungen der JavaScript-Basistypen, um die Entwicklungszeit für allgemeine Skripterstellungsaufgaben zu reduzieren.
Verwenden Sie Debugerweiterungen und eine Ablaufverfolgung, um das Debuggen schneller und aussagekräftiger als mit den herkömmlichen JavaScript-Debugverfahren durchzuführen.
Verwenden des Typsystems
Die Microsoft AJAX Library fügt JavaScript-Objekten ein Typsystem und Erweiterungen hinzu, um häufig verwendete objektorientierte Features bereitzustellen, die den Features im .NET Framework ähneln. Mit diesen Funktionen können AJAX-fähige ASP.NET-Anwendungen auf eine strukturierte Art geschrieben werden. Hierdurch wird die Verwaltung und das Hinzufügen von Features oder Funktionen vereinfacht. Microsoft AJAX Library-Erweiterungen fügen JavaScript die folgenden Funktionen hinzu:
Klassen
Namespaces
Vererbung
Schnittstellen
Enumerationen
Reflektion
Die Bibliothek stellt auch Hilfsfunktionen für Zeichenfolgen und Arrays bereit.
Klassen, Member und Namespaces
Die Microsoft AJAX Library enthält Basisklassen sowie davon abgeleitete Objekte und Komponenten. Zusammen ermöglichen diese Klassen es Ihnen, zum Schreiben von Clientskript ein objektorientiertes Programmiermodell zu verwenden.
Die Type-Klasse fügt der JavaScript-Programmierung objektorientierte Features wie Namespaces, Klassen und Vererbung hinzu. Jedes JavaScript-Objekt, das mithilfe der Type-Klasse registriert wird, verfügt automatisch über Zugriff auf diese Funktionalität. Das folgende Beispiel zeigt, wie Sie die Type-Klasse verwenden, um in einer JavaScript-Datei einen Namespace und eine Klasse zu erstellen und zu registrieren:
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();
Klassen können vier Arten von Membern aufweisen: Felder, Eigenschaften, Methoden und Ereignisse. Felder und Eigenschaften sind Name/Wert-Paare, die die Eigenschaften der Instanz einer Klasse beschreiben. Felder bestehen aus primitiven Typen, und es wird direkt darauf zugegriffen, wie im folgenden Beispiel gezeigt:
myClassInstance.name="Fred"
Eigenschaften können jeden primitiven Typ oder Referenztyp darstellen. Sie greifen auf Eigenschaftenwerte mithilfe von get- und set-Accessormethoden zu. In der Microsoft AJAX Library sind die get- und set-Accessoren Funktionen, die der Konvention nach im Funktionsnamen das Präfix "get_" bzw. "set_" aufweisen. Beispiel: Um einen Wert für eine Eigenschaft wie cancel abzurufen oder festzulegen, rufen Sie die get_cancel-Methode oder die set_cancel-Methode auf.
Die Microsoft AJAX Library löst Ereignisse als Antwort auf Aktionen aus, die während des Lebenszyklus einer AJAX-Clientanwendung eintreten. Die Microsoft AJAX Library bietet auch ein Standardverfahren zum Erstellen von benutzerdefinierten Ereignissen für AJAX-Clientkomponenten. Weitere Informationen finden Sie unter Erstellen von benutzerdefinierten Clientereignissen und Lebenszyklusereignisse des AJAX-Clients.
Die Microsoft AJAX Library bietet ein Verfahren zum Registrieren von Namespaces, damit Sie allgemeine Funktionen gruppieren können. Das folgende Beispiel zeigt, wie Sie eine Person-Klasse dem Demo-Namespace hinzufügen, indem Sie die Methoden Type.registerNamespace und .registerClass verwenden.
Um die AJAX-Funktionalität für eine ASP.NET-Webseite zu aktivieren, müssen Sie der Seite ein ScriptManager-Steuerelement hinzufügen. Wenn die Seite gerendert wird, werden die entsprechenden Skriptverweise zu AJAX-Clientskriptbibliotheken automatisch generiert. Das folgende Beispiel zeigt eine Seite mit einem ScriptManager-Steuerelement.
<asp:ScriptManager ID="scriptManager" />
Das folgende Beispiel zeigt, wie Sie den Namespace registrieren, die Klasse erstellen und die Klasse dann registrieren.
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>
Zugriffsmodifizierer
Die meisten objektorientierten Programmiersprachen arbeiten mit Zugriffsmodifizierern, mit deren Hilfe Sie angeben können, in welchem Kontext eine Klasse oder ein Member verfügbar ist, z. B. für externe Programme, interne Klassen innerhalb desselben Namespace oder nur innerhalb eines bestimmten Codeblocks. Es gibt keine Zugriffsmodifizierer in JavaScript. Die Microsoft AJAX Library folgt jedoch der Konvention, dass Member mit Namen, die mit einem Unterstrich ("_") beginnen, als privat angesehen werden und nicht außerhalb der Klasse darauf zugegriffen wird, deren Teil sie sind.
Vererbung
Vererbung ist die Fähigkeit einer Klasse, von einer anderen Klasse abgeleitet zu werden. Eine abgeleitete Klasse erbt automatisch alle Felder, Eigenschaften, Methoden und Ereignisse der Basisklasse. Eine abgeleitete Klasse kann neue Member hinzufügen oder vorhandene Member der Basisklasse überschreiben, um deren Verhalten zu ändern.
Das folgende Beispiel enthält zwei in Skript definierte Klassen: Person und Employee, wobei Employee von Person abgeleitet ist. Beide Klassen verdeutlichen die Verwendung privater Felder und verfügen über öffentliche Eigenschaften und Methoden. Außerdem überschreibt Employee die toString-Implementierung der Person-Klasse und verwendet die Basisklassenfunktionalität.
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>
Schnittstellen
Eine Schnittstelle definiert die Eingabe- und Ausgabeanforderungen von Klassen, die die Schnittstelle implementieren. Auf diese Weise kann eine Funktion mit Klassen interagieren, die dieselbe Schnittstelle implementieren. Dies ist unabhängig davon, welche andere Funktionalität die Klasse implementiert.
Im folgenden Beispiel werden eine Tree-Basisklasse und eine IFruitTree-Schnittstelle definiert. Apple und Banana, zwei abgeleitete Klassen, implementieren die IFruitTree-Schnittstelle, die Pine-Klasse jedoch nicht. Jede Klasse, die die IFruitTree-Schnittstelle implementiert, stellt sicher, dass eine bearFruit-Methode ein Member der Klasse ist.
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>
Enumerationen
Eine Enumeration ist eine Klasse, die einen Satz benannter Ganzzahlkonstanten enthält. Sie können auf die Werte wie auf Eigenschaften zugreifen. Dies ist im folgenden Beispiel gezeigt:
myObject.color = myColorEnum.red
Enumerationen stellen eine leicht lesbare Alternative zu Ganzzahldarstellungen dar. Weitere Informationen zu Enumerationen in der Microsoft AJAX Library finden Sie unter Type.registerEnum-Methode (ASP.NET AJAX).
Im folgenden Beispiel wird eine Enumeration mit benannten Farben definiert, die Hexadezimalwerte darstellen.
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>
Reflektion
Die Reflektion ist die Fähigkeit, die Struktur und die Komponenten eine Programms zur Laufzeit zu untersuchen. Die APIs, die die Reflektion implementieren, sind Erweiterungen der Type-Klasse. Mithilfe dieser Methoden können Sie Informationen zu einem Objekt sammeln, z. B. von welchem Element es erbt, ob es eine bestimmte Schnittstelle implementiert und ob es eine Instanz einer bestimmten Klasse ist.
Im folgenden Beispiel werden Reflektions-APIs verwendet, um die GreenApple-Klasse aus dem vorherigen Schnittstellenbeispiel zu testen.
<!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>
Verwenden von Erweiterungen zu den JavaScript-Basistypen
Erweiterungen zu den JavaScript-Basistypen stellen zusätzliche Funktionalität für diese Typen bereit. Weitere Informationen zu diesen Erweiterungen finden Sie unter den folgenden Themen:
Die Sys.Debug-Klasse stellt umfangreiche Debugfunktionen bereit. Weitere Informationen finden Sie unter Übersicht über das Debuggen und die Ablaufverfolgung von AJAX-Anwendungen und in der Übersicht zur Sys.Debug-Klasse.
Wenn Sie Komponenten basierend auf der Microsoft AJAX Library erstellen, können Sie Debug- und Releaseversionen von Skriptdateien erstellen, die vom ScriptManager-Steuerelement automatisch verwaltet werden. Sie können Debugversionen von Skriptdateien kennzeichnen, indem Sie ".debug" als Teil des Namens der Skriptdatei verwenden. Zum Beispiel identifizieren die folgenden Skriptdateinamen Verkaufs- und Debugversion einer Datei:
MyScript.js (Verkauf)
MyScript.debug.js (Debug)
Integrieren von Clientskript in ASP.NET-Webanwendungen
Eine ASP.NET-Webseite kann auf eine Skriptdatei zugreifen, indem sie darauf in einem <script>-Block verweist. Dies ist im folgenden Beispiel gezeigt:
<script type="text/javascript" src="MyScript.js"></script>
Ein Skript, das auf diese Weise aufgerufen wird, kann jedoch nicht am Teilrendering von Seiten teilnehmen und nicht auf bestimmte Komponenten der Microsoft AJAX Library zugreifen. Um eine Skriptdatei in einer AJAX-fähigen ASP.NET-Webanwendung für das Teilrendering von Seiten verfügbar zu machen, müssen Sie das Skript mit dem ScriptManager-Steuerelement auf der Seite registrieren. Um eine Skriptdatei zu registrieren, erstellen Sie ein ScriptReference-Objekt, das auf die entsprechende Datei zeigt und diese der Scripts-Auflistung hinzufügt. Das folgende Beispiel zeigt, wie Sie dies mithilfe von Markup durchführen:
<asp:ScriptManager ID="SMgr" >
<Scripts>
<asp:ScriptReference path="MyScript.js" />
</Scripts>
</asp:ScriptManager>
Damit Skriptdateien vom ScriptManager-Steuerelement richtig verarbeitet werden, muss jede Datei am Ende einen Aufruf der Sys.Application.notifyScriptLoaded-Methode enthalten. Dieser Aufruf informiert die Anwendung darüber, dass die Datei vollständig geladen wurde. Das folgende Codebeispiel zeigt den Code, den Sie dafür verwenden können:
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
Sie können JS-Dateien auch als Ressourcen in Assemblys mit verwaltetem Code einbetten. (Dies ist z. B. ratsam, wenn Sie ein ASP.NET-Serversteuerelement mit AJAX-Funktionalität erstellen, das im Clientskript implementiert ist.) Wenn das Skript in eine Assembly eingebettet ist, müssen Sie in das Skript keine Benachrichtigungsanweisung einfügen. Sie müssen im Skriptverweis auch kein path-Attribut angeben. Sie müssen den Namen der Assembly jedoch ohne Dateinamenerweiterung bereitstellen. Dies ist im folgenden Beispiel gezeigt:
<asp:ScriptManager ID="SMgr" >
<Scripts>
<asp:ScriptReference
Name="MyScript.js" Assembly="MyScriptAssembly"/>
</Scripts>
</asp:ScriptManager>
.gif "Hinweis") Hinweis: |
|---|
Dieses Szenario wird von Seitenentwicklern nicht häufig verwendet, da die meisten Steuerelemente mit eingebetteten Skriptbibliotheken intern auf ihre Skripte verweisen. Weitere Informationen hierzu finden Sie unter Exemplarische Vorgehensweise: Einbetten einer JavaScript-Datei als Ressource in eine Assembly. |
Sie können Skripts auch programmgesteuert registrieren, indem Sie Skriptverweise auf Code erstellen und diese dann der Scripts-Auflistung hinzufügen. Weitere Informationen hierzu finden Sie unter Dynamisches Zuweisen von Skriptverweisen.
Sie können Skripts registrieren, die für Teilaktualisierungen von Seiten erforderlich sind, indem Sie die Registrierungsmethoden des ScriptManager-Steuerelements verwenden. Sie können diese Methoden wie folgt verwenden:
Um Clientskript im Code zu erstellen, erstellen Sie einen Skriptblock als Zeichenfolge und übergeben diese an die RegisterClientScriptBlock-Methode.
Um eigenständige Skriptdateien hinzuzufügen, die keine Microsoft AJAX Library-Abhängigkeiten haben, verwenden Sie die RegisterClientScriptInclude-Methode.
Um Skriptdateien hinzuzufügen, die in eine Assembly eingebettet sind, verwenden Sie die RegisterClientScriptInclude-Methode.
Hinweis:Skripts, die mithilfe dieser Methoden registriert werden, weisen keine Lokalisierungsunterstützung auf.
Eine vollständige Liste der Methoden zur Skriptregistrierung mit ihren Verwendungen finden Sie in der Übersicht zum ScriptManager-Steuerelement.
Alle Skriptblöcke und Inlineskripts, die Sie registrieren, müssen sich im <form>-Element der Seite befinden. Andernfalls wird das Skript nicht beim ScriptManager-Steuerelement registriert und kann nicht auf die ASP.NET-AJAX-Funktionalität zugreifen. Weitere Informationen finden Sie unter Sys.Application.initialize-Methode.
Siehe auch
Aufgaben
Konzepte
Übersicht über das Teilrendering von Seiten
Clientskript in ASP.NET-Webseiten
Erstellen von Clientkomponenten und Steuerelementen