Die JavaScript-Bibliotheken für das neue AJAX-Framework kann man sich bei Codeplex herunterladen: http://aspnet.codeplex.com/releases/view/34488.
Diese Dateien müssen z.B. im Script-Verzeichnis eine Webanwendung liegen und in die Seite eingebunden sein.
Im folgenden ein kleines Beispiel für die eine Auswahl von Observer Methoden (Eine Übersicht der Observer-Methoden findet man hier: http://msdn.microsoft.com/en-us/library/dd393766.aspx).
Die Observer Funktion des AJAX-Frameworks gibt uns die Möglichkeit Veränderungen an den JavaScript-Objekten zu beobachten / verfolgen.
Im ersten Beispiel wird mittels der Methode “Sys.Observer.addPropertyChanged” an das Objekt Person ein Event-Handler angehängt welcher bei Änderungen an diesem Objekt, diese (standardmäßig) in einem TextArea-Feld mit der ID “TraceConsole“ aus:
<!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></title>
</head>
<body>
<table>
<tr>
<td>Vorname</td>
<td><input type="text" id="txtVorname" /></td>
</tr>
<tr>
<td>Nachname</td>
<td><input type="text" id="txtNachname" /></td>
</tr>
<tr>
<td colspan="2">
<button onclick="change()">Change</button>
</td>
</tr>
</table>
<textarea id="TraceConsole" rows="20" style="width: 50%"></textarea>
<script src="scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
<script src="scripts/MicrosoftAjaxTemplates.debug.js" type="text/javascript"></script>
<script type="text/javascript">
// ein Beispiel JSON-Objekt
var person = {
Vorname: "Christian",
Nachname: "Kiefer"
};
// einen Event-Handler auf das JSON-Objekt person setzen
// bei jeder Änderung eines Wertes des Objektes wird diese Funktion aufgerufen
Sys.Observer.addPropertyChanged(person, function () {
// Die Methode Sys.Debug.traceDump gibt den Dump in einem TextArea-Tag
// mit der ID TraceConsole aus, wenn vorhanden
Sys.Debug.traceDump(person);
});
function change() {
Sys.Observer.setValue(person, 'Vorname', $get('txtVorname').value);
Sys.Observer.setValue(person, 'Nachname', $get('txtNachname').value);
// // Alternativ würde auch gehen
// Sys.Observer.makeObservable(person);
// person.setValue('Vorname', $get('txtVorname').value);
// person.setValue('Nachname', $get('txtNachname').value);
}
</script>
</body>
</html>
Im zweiten Beispiel wird nicht ein einzelnes Objekt sondern ein Array beobachtet. Mittels der Methode “makeObservable” werden dem ArrayPersonen weitere Methoden hinzugefügt, wie z.B. “add”.
Nachdem dem Array Personen eine neue Person hinzugefügt wurde, wird der neue Inhalt des Arrays in dem TextArea-Bereich ausgegeben.
<!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></title>
</head>
<body>
<table>
<tr>
<td>Vorname</td>
<td><input type="text" id="txtVorname" /></td>
</tr>
<tr>
<td>Nachname</td>
<td><input type="text" id="txtNachname" /></td>
</tr>
<tr>
<td colspan="2">
<button onclick="add()">Hinzufügen</button>
</td>
</tr>
</table>
<textarea id="TraceConsole" rows="20" style="width: 50%"></textarea>
<script src="scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
<script src="scripts/MicrosoftAjaxTemplates.debug.js" type="text/javascript"></script>
<script type="text/javascript">
// ein Beispiel mit Array
var personen = [
{ Vorname: "Christian", Nachname: "Kiefer"}
];
// mit makeObservable werden dem Objekt Personen weitere Methoden hinzugefügt
Sys.Observer.makeObservable(personen);
// einen Event-Handler auf das Array personen setzen
// bei jeder Änderung des Arrays wird diese Funktion aufgerufen
personen.add_collectionChanged( function () {
// Die Methode Sys.Debug.traceDump gibt den Dump in einem TextArea-Tag
// mit der ID TraceConsole aus, wenn vorhanden
Sys.Debug.traceDump(personen);
});
function add() {
var person = {
Vorname: $get('txtVorname').value,
Nachname: $get('txtNachname').value
};
// Die Methode add stammt von makeObservable
personen.add(person);
}
</script>
</body>
</html>